FilterBuilder - fix treeview items padding (#26061)

DevExpress · Nov 22, 2023 · 41944a4 · 41944a4
1 parent b746e2e
commit 41944a4
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 44 deletions.
diff --git a/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss
@@ -93,8 +93,10 @@ $filterbuilder-menu-icon-color: null !default;
   .dx-treeview-item {
     .dx-icon {
       color: $filterbuilder-menu-icon-color;
-
-      @include dx-icon-sizing(14px);
     }
   }
+
+  .dx-treeview-expander-icon-stub {
+    display: none;
+  }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss
@@ -65,4 +65,4 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera
 $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
 $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
 $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-$filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+$filterbuilder-menu-icon-color: $base-text-color !default;
diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss
@@ -72,10 +72,6 @@
   }
 
   &.dx-filterbuilder-operations {
-    .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-rtl {
       .dx-treeview-item {
         padding-right: $fluent-filterbuilder-treeview-item-left-padding;
@@ -84,14 +80,6 @@
   }
 
   .dx-treeview-node {
-    > .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding * 2;
-    }
-
-    &.dx-treeview-node-is-leaf > .dx-treeview-item {
-      padding-left: $fluent-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-treeview-node-container-opened {
       margin-left: $fluent-filterbuilder-treeview-item-left-padding;
     }
@@ -107,7 +95,6 @@
   }
 
   .dx-treeview-toggle-item-visibility {
-    height: $fluent-filterbuilder-treeview-item-min-heigth;
     left: $fluent-filterbuilder-treeview-toggle-left;
   }
 

diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss
@@ -12,17 +12,18 @@ $fluent-filterbuilder-treeview-item-min-heigth: null !default;
 @if $size == "default" {
   $fluent-filterbuilder-icon-padding: 8px !default;
   $fluent-filterbuilder-filled-editor-padding: 13px 12px !default;
-  $fluent-filterbuilder-treeview-item-left-padding: 24px !default;
-  $fluent-filterbuilder-treeview-item-padding: 8px $fluent-filterbuilder-treeview-item-left-padding 10px !default;
+
+  $fluent-filterbuilder-treeview-item-left-padding: 12px !default;
+  $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default;
   $fluent-filterbuilder-treeview-toggle-left: 16px !default;
-  $fluent-filterbuilder-treeview-item-min-heigth: 36px !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: 32px !default;
 }
 
 @else if $size == "compact" {
   $fluent-filterbuilder-icon-padding: 4px !default;
   $fluent-filterbuilder-filled-editor-padding: 8px 8px !default;
-  $fluent-filterbuilder-treeview-item-left-padding: 8px !default;
-  $fluent-filterbuilder-treeview-item-padding: 4px $fluent-filterbuilder-treeview-item-left-padding 5px !default;
+  $fluent-filterbuilder-treeview-item-left-padding: 4px !default;
+  $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default;
   $fluent-filterbuilder-treeview-toggle-left: 0 !default;
-  $fluent-filterbuilder-treeview-item-min-heigth: 26px !default;
+  $fluent-filterbuilder-treeview-item-min-heigth: 24px !default;
 }
diff --git a/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss
@@ -93,7 +93,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "contrast" {
@@ -117,7 +117,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-focus-color: $filterbuilder-item-value-color !default;
   $filterbuilder-text-color: $base-text-color !default;
   $filterbuilder-text-focus-color: $base-text-color !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "dark" {
@@ -141,13 +141,13 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: darken($base-icon-color, 33.7%) !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "darkmoon" {
   $filterbuilder-text-color: #000 !default;
   $filterbuilder-text-focus-color: $filterbuilder-text-color !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
   $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.8) !default;
   $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: -0.1) !default;
   $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 0.2) !default;
@@ -189,7 +189,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default;
   $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "greenmist" {
@@ -213,7 +213,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "light" {
@@ -237,7 +237,7 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
 @if $color == "softblue" {
@@ -261,6 +261,6 @@ $filterbuilder-menu-icon-color: null !default;
   $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
   $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
   $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-  $filterbuilder-menu-icon-color: $base-icon-color !default;
+  $filterbuilder-menu-icon-color: $base-text-color !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss
@@ -65,4 +65,4 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera
 $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
 $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
 $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-$filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+$filterbuilder-menu-icon-color: $base-text-color !default;
diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss
@@ -83,14 +83,6 @@
   }
 
   .dx-treeview-node {
-    > .dx-treeview-item {
-      padding-left: $material-filterbuilder-treeview-item-left-padding * 2;
-    }
-
-    &.dx-treeview-node-is-leaf > .dx-treeview-item {
-      padding-left: $material-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-treeview-node-container-opened {
       margin-left: $material-filterbuilder-treeview-item-left-padding;
     }
@@ -106,7 +98,6 @@
   }
 
   .dx-treeview-toggle-item-visibility {
-    height: $material-filterbuilder-treeview-item-min-heigth;
     left: $material-filterbuilder-treeview-toggle-left;
   }
 

diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss
@@ -12,17 +12,17 @@ $material-filterbuilder-treeview-item-min-heigth: null !default;
 @if $size == "default" {
   $material-filterbuilder-icon-padding: 8px !default;
   $material-filterbuilder-filled-editor-padding: 13px 12px !default;
-  $material-filterbuilder-treeview-item-left-padding: 24px !default;
-  $material-filterbuilder-treeview-item-padding: 8px $material-filterbuilder-treeview-item-left-padding 10px !default;
+  $material-filterbuilder-treeview-item-left-padding: 8px !default;
+  $material-filterbuilder-treeview-item-padding: 8px 24px 8px $material-filterbuilder-treeview-item-left-padding !default;
   $material-filterbuilder-treeview-toggle-left: 16px !default;
   $material-filterbuilder-treeview-item-min-heigth: 36px !default;
 }
 
 @else if $size == "compact" {
   $material-filterbuilder-icon-padding: 4px !default;
   $material-filterbuilder-filled-editor-padding: 8px 8px !default;
-  $material-filterbuilder-treeview-item-left-padding: 8px !default;
-  $material-filterbuilder-treeview-item-padding: 4px $material-filterbuilder-treeview-item-left-padding 5px !default;
+  $material-filterbuilder-treeview-item-left-padding: 4px !default;
+  $material-filterbuilder-treeview-item-padding: 4px 12px 4px $material-filterbuilder-treeview-item-left-padding !default;
   $material-filterbuilder-treeview-toggle-left: 0 !default;
   $material-filterbuilder-treeview-item-min-heigth: 26px !default;
 }