Skip to content

Commit

Permalink
🎨 Fluent: Redesign group panel header cells and make icons 20x20 (#25641
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@Raushen
Raushen authored Sep 25, 2023
1 parent 73e65be commit 648ebb1
Show file tree
Hide file tree
Showing 9 changed files with 24 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/devextreme/scss/widgets/fluent/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ $scrollview-pulldown-path: null !default;
$base-accent-foreground2-active: #0A2E4A !default;

$fluent-color-theme-modificator: "light" !default;
$base-text-color: rgba(36, 36, 36, 1) !default;
$base-text-color: rgba(20, 20, 20, 1) !default;
$base-label-color: rgba(0, 0, 0, 0.6) !default;
$base-disabled-color: rgba(224, 224, 224, 1) !default; // e0e0e0 // rgba(0, 0, 0, $base-disabled-opacity) !default;
$base-border-color-disabled: rgba(224, 224, 224, 1) !default; // e0e0e0
Expand Down
7 changes: 5 additions & 2 deletions packages/devextreme/scss/widgets/fluent/dataGrid/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,15 @@
.dx-group-panel-item {
margin-right: $fluent-grid-base-grouppanel-item-margin;
color: $datagrid-columnchooser-item-color;
font-weight: $datagrid-columnchooser-font-weight;
font-weight: $fluent-datagrid-grouppanel-item-font-weight;
font-size: $fluent-grid-base-header-cell-font-size;
line-height: $fluent-grid-base-header-line-height;
background: $datagrid-block-separator-bg;
background: $base-neutral-background4;
border-radius: 16px;
padding: 8px 10px;
border-width: 1px;
border-style: solid;
border-color: $base-border-color-disabled;
}

.dx-block-separator {
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/scss/widgets/fluent/dataGrid/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
// adduse

$fluent-datagrid-cell-padding: 7px !default;
$fluent-datagrid-grouppanel-item-font-weight: 400 !default;
2 changes: 1 addition & 1 deletion packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ $datagrid-row-alternation-bg: null !default;
$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
$datagrid-active-header-filter-icon-color: $base-accent !default;
$datagrid-text-stub-background-image-path: null !default;
Expand Down
2 changes: 2 additions & 0 deletions packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1223,6 +1223,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig

.dx-icon-filter {
color: $datagrid-filter-panel-color;

@include dx-icon-sizing($fluent-filter-panel-icon-size);
}
}

Expand Down
12 changes: 6 additions & 6 deletions packages/devextreme/scss/widgets/fluent/gridBase/_sizes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,17 @@ $fluent-grid-base-command-edit-column-with-icons-width: null !default;
$fluent-grid-base-adaptive-column-height: null !default;
$fluent-grid-base-treeview-search-margin: null !default;
$fluent-grid-base-nodata-font-size: null !default;
$fluent-command-edit-icon-size: null !default;
$fluent-filter-row-between-editor-padding: null !default;
$fluent-command-column-additional-right-margin: null !default;

$fluent-grid-base-header-line-height: 18px !default;
$fluent-grid-base-header-icon-size: 15px !default;
$fluent-grid-base-header-icon-size: 20px !default;
$fluent-grid-base-column-chooser-item-margin: 8px !default;
$fluent-command-edit-icon-margin: 2px !default;

$fluent-command-edit-icon-size: 20px !default;
$fluent-filter-panel-icon-size: 20px !default;

@if $size == "default" {
$fluent-grid-base-cell-height: 48px !default;
$fluent-grid-base-header-height: 48px !default;
Expand All @@ -44,14 +46,13 @@ $fluent-command-edit-icon-margin: 2px !default;
$fluent-grid-base-column-chooser-horizontal-padding: 24px !default;
$fluent-grid-base-column-chooser-paddings: 16px $fluent-grid-base-column-chooser-horizontal-padding 9px !default;
$fluent-grid-base-header-panel-padding: 8px 0 !default;
$fluent-grid-base-grouppanel-item-margin: 10px !default;
$fluent-grid-base-grouppanel-item-margin: 6px !default;

$fluent-grid-base-command-edit-column-width: 115px !default;
$fluent-grid-base-command-edit-column-with-icons-width: 93px !default;
$fluent-grid-base-adaptive-column-height: 40px !default;
$fluent-grid-base-treeview-search-margin: 10px !default;
$fluent-grid-base-nodata-font-size: 17px !default;
$fluent-command-edit-icon-size: 18px !default;

$fluent-filter-row-between-editor-padding: 12px !default;
$fluent-command-column-additional-right-margin: 0 !default;
Expand All @@ -72,14 +73,13 @@ $fluent-command-edit-icon-margin: 2px !default;
$fluent-grid-base-column-chooser-horizontal-padding: 8px !default;
$fluent-grid-base-column-chooser-paddings: 8px $fluent-grid-base-column-chooser-horizontal-padding 8px !default;
$fluent-grid-base-header-panel-padding: 6px 0 !default;
$fluent-grid-base-grouppanel-item-margin: 8px !default;
$fluent-grid-base-grouppanel-item-margin: 6px !default;

$fluent-grid-base-command-edit-column-width: 105px !default;
$fluent-grid-base-command-edit-column-with-icons-width: 80px !default;
$fluent-grid-base-adaptive-column-height: 26px !default;
$fluent-grid-base-treeview-search-margin: 10px !default;
$fluent-grid-base-nodata-font-size: 14px !default;
$fluent-command-edit-icon-size: 16px !default;

$fluent-filter-row-between-editor-padding: 8px !default;
$fluent-command-column-additional-right-margin: 2px !default;
Expand Down
14 changes: 7 additions & 7 deletions packages/devextreme/scss/widgets/generic/gridBase/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/carmine/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: $datagrid-border-color !default;
Expand Down Expand Up @@ -327,7 +327,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: darken($datagrid-base-color, 26%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/dark/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: darken($datagrid-border-color, 6.67) !default;
Expand Down Expand Up @@ -370,7 +370,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default;
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/darkmoon/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: $datagrid-border-color !default;
Expand Down Expand Up @@ -413,7 +413,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: darken($datagrid-base-color, 40%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/darkviolet/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: $datagrid-border-color !default;
Expand Down Expand Up @@ -456,7 +456,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/greenmist/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: $datagrid-border-color !default;
Expand Down Expand Up @@ -499,7 +499,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/light/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: lighten($datagrid-border-color, 6.67) !default;
Expand Down Expand Up @@ -542,7 +542,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-columnchooser-overlay-border-radius: $base-border-radius-large !default; // TODO: may be not need
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/softblue/grid/text-stub.png') !default;
$datagrid-cell-removed-border-color: $datagrid-border-color !default;
$datagrid-row-removed-bg: $datagrid-border-color !default;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme/scss/widgets/material/gridBase/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ $datagrid-row-alternation-bg: null !default;
$datagrid-summary-color: color.change($datagrid-base-color, $alpha: 0.7) !default;
$datagrid-columnchooser-message-color: lighten($datagrid-base-color, 26%) !default;
$datagrid-summary-bg: $datagrid-base-background-color !default;
$datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
$datagrid-column-separator-bg: $base-accent !default;
$datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
$datagrid-active-header-filter-icon-color: $base-accent !default;
$datagrid-text-stub-background-image-path: null !default;
Expand Down
Binary file modified ...esting/testcafe/tests/dataGrid/etalons/column-separator-with-expand-columns.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 648ebb1

Please sign in to comment.