feat: update styles for table view

jdi-testing · Aug 28, 2024 · 9a407f4 · 9a407f4
1 parent 107cfcf
commit 9a407f4
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 54 deletions.
diff --git a/src/common/styles/itemsList.less b/src/common/styles/itemsList.less
@@ -76,7 +76,6 @@
       border: 1px solid #d9d9d9;
       border-radius: 2px;
       overflow-y: hidden;
-      overflow-x: hidden;
     }
 
     &_button,

diff --git a/src/features/locators/styles/LocatorPageTable.less b/src/features/locators/styles/LocatorPageTable.less
@@ -1,26 +1,11 @@
 .jdn__locatorsTree-container {
   height: calc(-192px + 100vh);
-  overflow-y: auto;
-}
-
-.ant-tree-list-holder-inner {
-  overflow-x: auto;
-}
-
-.jdn__locator, .jdn__locator-menu {
-  width: fit-content;
 }
 
 .jdn__locatorsTree-container--table {
   display: grid;
   grid-template-columns: minmax(100px, auto) 1fr;
 
-  .ant-tree-list-holder > div {
-    //height: inherit;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
   .jdn__locator_colorized-string--vividus {
     span span, .jdn__locator_output-string-general-view {
       display: none;
@@ -33,16 +18,37 @@
     min-width: 100px;
   }
 
+  .jdn__locator {
+    display: flex;
+    flex-wrap: nowrap;
+    word-break: revert;
+    font-size: 12px;
+    width: calc(100vw / 2 - 142px);;
+    overflow-x: clip;
+    overflow-y: hidden;
+    height: 44px;
+
+    &:hover {
+      overflow-x: auto;
+    }
+  }
+
+
   .jdn__locatorsTree--left {
+
     .jdn__locator_buttons {
       display: none;
     }
 
     .jdn__locator_locator-name--vividus, .jdn__locator_caret-down {
       display: inline;
     }
-  }
 
+    .jdn__locator {
+      width: 100%;
+      margin-right: 8px;
+    }
+  }
 
   .jdn__locatorsTree--right {
     .jdn__locator_checkbox_wrapper, .jdn__locator-icon, .ant-tree-switcher {
@@ -55,25 +61,14 @@
       display: inline;
     }
 
-    //.jdn__locator_buttons {
-    //  border: 1px solid red;
-    //  position: absolute;
-    //  right: 0;
-    //  top: -9px;
-    //}
+  }
+
+
+  .jdn__locator_checkbox_wrapper {
+    display: none;
   }
 
   .jdn__locator {
     width: fit-content;
   }
-
-}
-
-.jdn__locator_checkbox_wrapper {
-  display: none;
-}
-
-.jdn__locator_locators {
-  white-space: nowrap;
-  width: inherit;
-}
+}
diff --git a/src/features/locators/styles/locator.less b/src/features/locators/styles/locator.less
@@ -2,15 +2,34 @@
 
 .jdn__locator {
     display: flex;
-    overflow-x: clip;
-    //width: calc(100vw - 198px);
-    padding-right: 78px;
     font-size: 12px;
+    width: calc(100vw - 167px);
+    overflow-x: clip;
+    min-height: 44px;
 
     font-family: "Noto Sans Display",
       sans-serif;
     word-break: break-word;
 
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: rgba(0, 0, 0, .3);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+    }
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: rgba(0, 0, 0, 0.1); /* Цвет фона под скроллбаром */
+    }
+
     &_container {
       position: relative;
 
@@ -41,15 +60,10 @@
     }
 
     &_buttons {
-      position: fixed;
-      right: 33px;
       display: flex;
       flex-direction: row-reverse;
-      height: 29px;
-      width: 80px;
-
-      padding-right: 8px;
-      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px , rgba(255, 255, 255, 1) 10px)
+      height: 32px;
+      width: 64px;
     }
 
     &_output-string {

diff --git a/src/features/locators/styles/locatorPage.less b/src/features/locators/styles/locatorPage.less
@@ -55,7 +55,9 @@
     & .jdn__locatorsTree {
       &-container {
         overflow-y: auto;
+        overflow-x: auto;
         height: 100%;
+        width: 100%;
 
         .ant-spin {
           position: relative;
@@ -85,7 +87,6 @@
     .ant-tree {
       height: 100%;
       &-treenode {
-        height: 38px;
         width: 100%;
         align-items: flex-start;
         gap: 1px;
@@ -109,6 +110,11 @@
             .jdn__locator_buttons {
               background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px , @active-locator 10px)
             }
+            &.jdn__tree-item:hover {
+              .jdn__locator_buttons {
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 0px , red 10px)
+              }
+            }
           }
         }
 
@@ -131,15 +137,7 @@
 
       &-list-holder {
         height: 100%;
-        overflow-y: hidden !important;
-
-        > div {
-          //height: inherit !important;
-
-          .ant-tree-list-holder-inner {
-            //height: inherit;
-          }
-        }
+        overflow: hidden;
       }
     }
 

diff --git a/src/features/pageObjects/styles/pageObject.less b/src/features/pageObjects/styles/pageObject.less
@@ -3,6 +3,10 @@
 
 .jdn__pageObject {
     &-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
       height: calc(100vh - 94px);
 
       &-text {