Skip to content

Commit

Permalink
DataGrid/TreeList - Fluent theme - Changes of colors (#25732)
Browse files Browse the repository at this point in the history 
Signed-off-by: Andrey Dolzhikov <[email protected]>
Co-authored-by: Eldar Iusupzhanov <[email protected]>
  • Loading branch information
@Raushen @Tucchhaa
Raushen and Tucchhaa authored Oct 3, 2023
1 parent 15af49b commit f971545
Show file tree
Hide file tree
Showing 23 changed files with 78 additions and 39 deletions.
5 changes: 3 additions & 2 deletions packages/devextreme/js/__internal/grids/data_grid/m_widget_base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { logger } from '@js/core/utils/console';
import { extend } from '@js/core/utils/extend';
import { each } from '@js/core/utils/iterator';
import { isFunction, isString } from '@js/core/utils/type';
import { isMaterial } from '@js/ui/themes';
import { isMaterialBased } from '@js/ui/themes';
import Widget from '@js/ui/widget/ui.widget';
import gridCoreUtils from '@ts/grids/grid_core/m_utils';

Expand Down Expand Up @@ -85,6 +85,7 @@ const DataGrid = (Widget as any).inherit({
},

_defaultOptionsRules() {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return this.callBase().concat([
{
device: { platform: 'ios' },
Expand All @@ -95,7 +96,7 @@ const DataGrid = (Widget as any).inherit({
{
device() {
// @ts-expect-error
return isMaterial();
return isMaterialBased();
},
options: {
showRowLines: true,
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/js/__internal/grids/tree_list/m_widget_base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { deferRender, noop } from '@js/core/utils/common';
import { extend } from '@js/core/utils/extend';
import { each } from '@js/core/utils/iterator';
import { isDefined, isFunction } from '@js/core/utils/type';
import { isMaterial } from '@js/ui/themes';
import { isMaterialBased } from '@js/ui/themes';
import Widget from '@js/ui/widget/ui.widget';
import gridCoreUtils from '@ts/grids/grid_core/m_utils';

Expand Down Expand Up @@ -86,7 +86,7 @@ const TreeList = (Widget as any).inherit({
{
device() {
// @ts-expect-error
return isMaterial();
return isMaterialBased();
},
options: {
showRowLines: true,
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme/js/common/grids.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -925,6 +925,7 @@ export interface EditingBase<TRowData = any, TKey = any> {
/**
* @docid GridBaseOptions.editing.useIcons
* @default true &for(Material)
* @default true &for(Fluent)
* @default false
* @public
*/
Expand Down Expand Up @@ -1228,6 +1229,7 @@ export type HeaderFilter = {
/**
* @docid GridBaseOptions.headerFilter.height
* @default 315 &for(Material)
* @default 315 &for(Fluent)
* @default 325
*/
height?: number;
Expand Down Expand Up @@ -2262,6 +2264,7 @@ export type GridBaseOptions<TComponent extends GridBase<TRowData, TKey>, TRowDat
/**
* @docid
* @default false &for(Material)
* @default false &for(Fluent)
* @default true
* @public
*/
Expand All @@ -2270,6 +2273,7 @@ export type GridBaseOptions<TComponent extends GridBase<TRowData, TKey>, TRowDat
* @docid
* @default true &for(iOS)
* @default true &for(Material)
* @default true &for(Fluent)
* @default false
* @public
*/
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/ui/data_grid.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2006,6 +2006,7 @@ export type Selection = SelectionBase & {
* @docid dxDataGridOptions.selection.showCheckBoxesMode
* @default "onClick"
* @default "always" &for(Material)
* @default "always" &for(Fluent)
* @public
*/
showCheckBoxesMode?: SelectionColumnDisplayMode;
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme/playground/jquery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<script type="text/javascript" src="./themeSelector.js"></script>
<script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
</head>
<body>
<body class="dx-surface">
<div role="main">
<h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>

Expand Down
11 changes: 10 additions & 1 deletion packages/devextreme/scss/widgets/base/dataGrid/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,12 @@ $datagrid-text-stub-background-image-path: null !default;

.dx-datagrid {
color: $datagrid-base-color;
background-color: $datagrid-base-background-color;

> .dx-datagrid-headers,
> .dx-datagrid-rowsview,
> .dx-datagrid-total-footer {
background-color: $datagrid-base-background-color;
}

.dx-sort-up {
@include dx-icon(sortup);
Expand All @@ -74,6 +79,10 @@ $datagrid-text-stub-background-image-path: null !default;
}

.dx-datagrid-header-panel {
.dx-toolbar {
background-color: transparent;
}

.dx-group-panel-item,
.dx-header-filter {
outline: none;
Expand Down
12 changes: 11 additions & 1 deletion packages/devextreme/scss/widgets/base/treeList/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,11 @@ $treelist-row-error-color: $datagrid-row-error-color;

.dx-treelist-container {
color: $treelist-base-color;
background-color: $treelist-base-background-color;

> .dx-treelist-headers,
> .dx-treelist-rowsview {
background-color: $datagrid-base-background-color;
}

.dx-sort-up {
@include dx-icon(sortup);
Expand All @@ -99,6 +103,12 @@ $treelist-row-error-color: $datagrid-row-error-color;
}
}

.dx-treelist-header-panel {
.dx-toolbar {
background-color: transparent;
}
}

.dx-treelist-headers {
.dx-header-row > td,
.dx-header-filter {
Expand Down
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/fluent/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ $scrollview-pulldown-path: null !default;
$base-foreground-inverted-focused: rgba(71, 158, 245, 1) !default; // #479EF5

$base-neutral-background-hover: rgba(235, 235, 235, 1) !default; // #ebebeb
$base-border-color: rgba(209, 209, 209, 1) !default; // d1d1d1
$base-border-color: rgba(224, 224, 224, 1) !default; // #e0e0e0
$base-border-color-hover: darken($base-border-color, 3.92) !default; // c7c7c7
$base-border-color-focused: darken($base-border-color, 11.76) !default; // b3b3b3
$base-border-color-accessible: rgba(97, 97, 97, 1) !default; // #616161
Expand Down Expand Up @@ -299,7 +299,7 @@ $scrollview-pulldown-path: null !default;
$base-bg-active: $base-neutral-background1-active !default;

$base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
$base-border-color: rgba(102, 102, 102, 1) !default; // #666666
$base-border-color: rgba(97, 97, 97, 1) !default; // #616161
$base-border-color-hover: lighten( $base-border-color, 5.88) !default; // #757575
$base-border-color-focused: lighten( $base-border-color, 1.96) !default; // #6b6b6b
$base-border-color-accessible: rgba(173, 173, 173, 1) !default; // #adadad
Expand Down
4 changes: 2 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 @@ -62,7 +62,7 @@
}

.dx-sort {
color: $datagrid-menu-icon-color;
color: $header-filter-color-empty;
}
}

Expand All @@ -79,7 +79,7 @@
}

font-size: $fluent-grid-base-header-cell-font-size;
font-weight: bold;
font-weight: 500;

td {
border-top-color: $fluent-grid-base-border-color;
Expand Down
10 changes: 6 additions & 4 deletions packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ $datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default;
* $name 90. Group row text color
* $type color
*/
$datagrid-group-row-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
$datagrid-group-row-color: null !default;

/**
* $name 95. Group row background color
Expand All @@ -113,7 +113,7 @@ $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !de
* $type color
*/
$datagrid-search-color: $base-inverted-text-color !default;
$datagrid-chevron-icon-color: lighten($base-spin-icon-color, 38.5%) !default;
$datagrid-chevron-icon-color: $base-spin-icon-color !default;

/**
* $name 110. Highlighted text background color
Expand Down Expand Up @@ -174,11 +174,12 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;

@if $mode == "light" {
$datagrid-columnchooser-item-color: $datagrid-base-color !default;
$datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
$datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;
$datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default;
$datagrid-selection-bg: color.change(darken($base-element-bg, 100%), $alpha: 0.08) !default;
$datagrid-row-error-color: $base-inverted-text-color !default;
$datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
Expand All @@ -189,11 +190,12 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;

@if $mode == "dark" {
$datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
$datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
$datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default;
$datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default;
$datagrid-selection-bg: color.change(lighten($base-element-bg, 100%), $alpha: 0.08) !default;
$datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
$datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default;
Expand Down
12 changes: 5 additions & 7 deletions packages/devextreme/scss/widgets/fluent/gridBase/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
> div {
@include dx-icon-sizing($fluent-grid-base-header-icon-size);
}

> span {
margin-left: 4px;
}
}

.dx-placeholder::before {
Expand Down Expand Up @@ -658,19 +662,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
font-weight: $datagrid-columnchooser-font-weight;
font-size: $fluent-grid-base-header-cell-font-size;

.dx-sort-indicator,
.dx-sort {
color: $datagrid-base-color;
color: $header-filter-color-empty;
}

&:hover {
.dx-#{$widget-name}-text-content {
color: $datagrid-base-color;
}

.dx-sort {
color: $datagrid-columnchooser-hover-icon-color;
}
}

&:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-editor-cell):not(.dx-command-edit):not(.dx-#{$widget-name}-group-space) {
Expand Down Expand Up @@ -794,7 +793,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
.dx-#{$widget-name}-header-panel {
border-bottom: $datagrid-border;
padding: $fluent-grid-base-header-panel-padding;
background-color: $toolbar-bg;

.dx-apply-button {
@include dx-button-flat-color-styling($button-success-color, $button-success-color, $button-success-color, $button-success-text-hover-bg, $button-success-text-focused-bg, $button-success-text-active-bg);
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme/scss/widgets/fluent/widget/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,7 @@
@include disabled-widget();
}
}

.dx-surface {
background-color: $base-bg;
}
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 @@ -213,7 +213,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: $base-accent !default;
$datagrid-row-selected-border-color: lighten($base-accent, 9%) !default;
$datagrid-row-selected-color: lighten($datagrid-base-color, 100%) !default;
Expand Down Expand Up @@ -299,7 +299,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: #444 !default;
$datagrid-row-selected-border-color: $datagrid-border-color !default;
$datagrid-row-selected-color: $datagrid-base-color !default;
Expand Down Expand Up @@ -342,7 +342,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: $base-accent !default;
$datagrid-row-selected-border-color: $base-grid-selected-border-color !default;
$datagrid-row-selected-color: $base-bg !default;
Expand Down Expand Up @@ -385,7 +385,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: $base-select-bg !default;
$datagrid-row-selected-border-color: $base-selected-border !default;
$datagrid-row-selected-color: $datagrid-base-color !default;
Expand Down Expand Up @@ -428,7 +428,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: $base-link-color !default;
$datagrid-row-selected-border-color: lighten($base-accent, 14%) !default;
$datagrid-row-selected-color: lighten($base-text-color, 100%) !default;
Expand Down Expand Up @@ -471,7 +471,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: #e6e6e6 !default;
$datagrid-row-selected-border-color: $datagrid-border-color !default;
$datagrid-row-selected-color: $datagrid-base-color !default;
Expand Down Expand Up @@ -514,7 +514,7 @@ $datagrid-text-stub-background-image-path: null !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$datagrid-header-drag-bg: $datagrid-base-background-color !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.5) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.5) !default;
$datagrid-selection-bg: $base-grid-selection-background !default;
$datagrid-row-selected-border-color: $base-grid-selectedrow-border-color !default;
$datagrid-row-selected-color: $datagrid-base-color !default;
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme/scss/widgets/generic/widget/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,7 @@
@include disabled-widget();
}
}

.dx-surface {
background-color: $base-bg;
}
4 changes: 2 additions & 2 deletions packages/devextreme/scss/widgets/material/gridBase/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
$datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.72) !default;
$datagrid-selection-bg: color.change($base-accent, $alpha: 0.04) !default;
$datagrid-row-error-color: $base-inverted-text-color !default;
$datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
Expand All @@ -193,7 +193,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
$datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
$datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
$header-filter-color: $datagrid-columnchooser-item-color !default;
$header-filter-color-empty: color.change($datagrid-columnchooser-item-color, $alpha: 0.38) !default;
$header-filter-color-empty: color.change($header-filter-color, $alpha: 0.38) !default;
$datagrid-selection-bg: color.change($base-accent, $alpha: 0.07) !default;
$datagrid-row-error-color: rgba(255, 255, 255, 1) !default;
$datagrid-columnchooser-item-bg: lighten($datagrid-columnchooser-bg, 3%) !default;
Expand Down
1 change: 0 additions & 1 deletion packages/devextreme/scss/widgets/material/gridBase/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -766,7 +766,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
.dx-#{$widget-name}-header-panel {
border-bottom: $datagrid-border;
padding: $material-grid-base-header-panel-padding;
background-color: $toolbar-bg;

.dx-apply-button {
@include dx-button-flat-color-styling($button-success-color, $button-success-text-hover-bg, $button-success-text-focused-bg, $button-success-text-active-bg);
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme/scss/widgets/material/widget/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,7 @@
@include disabled-widget();
}
}

.dx-surface {
background-color: $base-bg;
}
2 changes: 1 addition & 1 deletion packages/devextreme/testing/testcafe/tests/container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<script type="text/javascript" src="../../../artifacts/js/dx.all.js"></script>
<script type="text/javascript" src="../../../../../node_modules/axe-core/axe.min.js"></script>
</head>
<body>
<body class="dx-surface">
<div role="main">
<h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>

Expand Down
Binary file modified ...ns/FAB with grid, position.of is #grid, after scrolling (fluent-blue-light).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.
Binary file modified ...s/FAB with grid, position.of is #grid, before scrolling (fluent-blue-light).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.
Binary file modified ...AB with grid, position.of is undefined, after scrolling (fluent-blue-light).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.
Binary file modified ...B with grid, position.of is undefined, before scrolling (fluent-blue-light).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.
Loading

0 comments on commit f971545

Please sign in to comment.