Skip to content

Commit 1f204e9

Browse files
simeonoffsimeonoff
authored
Merge pull request #7082 from IgniteUI/simeonoff/fix-7050
refactor(grid): improve column selection theme
2 parents db37582 + 186ea02 commit 1f204e9

File tree

5 files changed

+177
-157
lines changed

5 files changed

+177
-157
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
/// @param {String} $header-border-width [null] - The border width used for header borders.
1818
/// @param {String} $header-border-style [null] - The border style used for header borders.
1919
/// @param {Color} $header-border-color [null] - The color used for header borders.
20+
/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).
21+
/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).
2022
///
2123
/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
2224
/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
@@ -126,6 +128,9 @@
126128
$header-border-style: null,
127129
$header-border-color: null,
128130
131+
$header-selected-background: null,
132+
$header-selected-text-color: null,
133+
129134
$sorted-header-icon-color: null,
130135
131136
$content-background: null,
@@ -230,7 +235,22 @@
230235

231236
$tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
232237
$tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
233-
$row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);
238+
239+
$rs-bg: if(
240+
$row-selected-background,
241+
$row-selected-background,
242+
map-get($theme, 'row-selected-background')
243+
);
244+
245+
$row-selected-cell-background: null;
246+
247+
@if type-of($rs-bg) == 'color' {
248+
@if luminance($rs-bg) < .5 {
249+
$row-selected-cell-background: lighten-color($rs-bg, 8%);
250+
} @else {
251+
$row-selected-cell-background: darken-color($rs-bg, 8%);
252+
}
253+
}
234254

235255
@if not($ghost-header-icon-color) and $ghost-header-background {
236256
@if type-of($ghost-header-background) == 'color' {
@@ -250,6 +270,10 @@
250270
$header-text-color: text-contrast($header-background);
251271
}
252272

273+
@if not($header-selected-text-color) and $header-selected-background {
274+
$header-selected-text-color: text-contrast($header-selected-background);
275+
}
276+
253277
@if not($header-border-color) and $header-background {
254278
@if type-of($header-background) == 'color' {
255279
$header-border-color: rgba(text-contrast($header-background), .24);
@@ -442,6 +466,8 @@
442466

443467
header-background: $header-background,
444468
header-text-color: $header-text-color,
469+
header-selected-background: $header-selected-background,
470+
header-selected-text-color: $header-selected-text-color,
445471
header-border-width: $header-border-width,
446472
header-border-style: $header-border-style,
447473
header-border-color: $header-border-color,
@@ -979,6 +1005,15 @@
9791005
&:hover {
9801006
background: --var($theme, 'row-hover-background');
9811007
color: --var($theme, 'row-hover-text-color');
1008+
1009+
%grid-cell--column-selected {
1010+
background: --var($theme, 'row-selected-hover-background');
1011+
}
1012+
1013+
%grid-cell--cross-selected {
1014+
color: --var($theme, 'row-selected-text-color');
1015+
background: --var($theme, 'row-selected-cell-background');
1016+
}
9821017
}
9831018

9841019
&%igx-grid__tr--ghost {
@@ -1059,6 +1094,11 @@
10591094
&:hover {
10601095
background: --var($theme, 'row-selected-hover-background');
10611096
color: --var($theme, 'row-selected-text-color');
1097+
1098+
%grid-cell--column-selected {
1099+
color: --var($theme, 'row-selected-text-color');
1100+
background: --var($theme, 'row-selected-hover-background');
1101+
}
10621102
}
10631103

10641104
%igx-grid__tree-grouping-indicator {
@@ -1289,14 +1329,10 @@
12891329
%grid-cell--column-selected {
12901330
color: --var($theme, 'row-selected-text-color');
12911331
background: --var($theme, 'row-selected-background');
1292-
1293-
&:hover {
1294-
background: --var($theme, 'row-selected-hover-background');
1295-
color: --var($theme, 'row-selected-text-color');
1296-
}
12971332
}
12981333

12991334
%grid-cell--cross-selected {
1335+
color: --var($theme, 'row-selected-text-color');
13001336
background: --var($theme, 'row-selected-cell-background');
13011337
}
13021338

@@ -1472,14 +1508,14 @@
14721508
}
14731509

14741510
%igx-grid__th--selectable {
1475-
color: --var($theme, 'row-selected-text-color');
1476-
background: --var($theme, 'row-selected-background');
1511+
color: --var($theme, 'header-selected-text-color');
1512+
background: --var($theme, 'header-selected-background');
14771513
opacity: .7;
14781514
}
14791515

14801516
%igx-grid__th--selected {
1481-
color: --var($theme, 'row-selected-text-color');
1482-
background: --var($theme, 'row-selected-cell-background');
1517+
color: --var($theme, 'header-selected-text-color');
1518+
background: --var($theme, 'header-selected-background');
14831519
}
14841520

14851521
%igx-grid__th--sortable {
@@ -2208,8 +2244,8 @@
22082244
}
22092245

22102246
%igx-grid__filtering-cell--selected {
2211-
color: --var($theme, 'row-selected-text-color');
2212-
background: --var($theme, 'row-selected-cell-background');
2247+
color: --var($theme, 'header-selected-text-color');
2248+
background: --var($theme, 'header-selected-background');
22132249
}
22142250

22152251
%igx-grid__filtering-cell-indicator {

‎projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -47,37 +47,14 @@
4747
/// @requires igx-palette
4848
$default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
4949

50-
5150
/// Default dark palette
5251
/// @type {Map}
5352
/// @group palettes
54-
$default-dark-palette: extend(
55-
$default-palette,
56-
(
57-
surface: (500: #222)
58-
)
59-
) !default;
60-
61-
/// Global Overlay Color
62-
/// @group palettes
63-
/// @type Color
64-
/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
65-
/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
66-
/// @requires igx-color
67-
$overlay-color: igx-color($default-palette, 'grays') !default;
68-
69-
/// Default elevations. Work in progress.
70-
/// Subject to change.
71-
/// @group elevations
72-
/// @type Map
73-
/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
74-
/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
75-
/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
76-
/// @requires igx-elevations
77-
$elevations: igx-elevations(
78-
rgba(0, 0, 0, .26),
79-
rgba(0, 0, 0, .12),
80-
rgba(0, 0, 0, .08)
53+
$default-dark-palette: igx-palette(
54+
$primary: igx-color($default-palette, 'primary'),
55+
$secondary: igx-color($default-palette, 'secondary'),
56+
$grays: #fff,
57+
$surface: #222
8158
) !default;
8259

8360
/// Green palette
@@ -191,3 +168,25 @@ $bootstrap-dark-palette: igx-palette(
191168
$grays: #fff
192169
) !default;
193170

171+
/// Global Overlay Color
172+
/// @group palettes
173+
/// @type Color
174+
/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
175+
/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
176+
/// @requires igx-color
177+
$overlay-color: igx-color($default-palette, 'grays') !default;
178+
179+
/// Default elevations. Work in progress.
180+
/// Subject to change.
181+
/// @group elevations
182+
/// @type Map
183+
/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
184+
/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
185+
/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
186+
/// @requires igx-elevations
187+
$elevations: igx-elevations(
188+
rgba(0, 0, 0, .26),
189+
rgba(0, 0, 0, .12),
190+
rgba(0, 0, 0, .08)
191+
) !default;
192+

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import '../light/grid';
2+
23
////
34
/// @group schemas
45
/// @access private
@@ -8,13 +9,15 @@
89
/// Generates the base dark grid schema.
910
/// @type {Map}
1011
/// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #222] - The table header background color.
12+
/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%] - The table header background color when selected (ex. column selection).
13+
/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%, text-contrast: ()] - The table header text color when selected (ex. column selection).
1114
/// @prop {Color} content-background [#222] - The table body background color.
1215
/// @prop {Color} row-odd-background [#222] - The background color of odd rows.
1316
/// @prop {Color} row-even-background [#222] - The background color of even rows.
1417
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
1518
/// @prop {Color} row-hover-text-color [#fff] - The hover row text color.
1619
/// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
17-
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover.
20+
/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222, lighten-color: 5%] - The selected row background color on hover.
1821
/// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
1922
/// @prop {Color} ghost-header-background [#222] - The dragged header background color.
2023
/// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
@@ -37,6 +40,21 @@ $_base-dark-grid: (
3740
hexrgba: #222
3841
),
3942

43+
header-selected-background: (
44+
igx-color: ('secondary', 500),
45+
rgba: .24,
46+
hexrgba: #222,
47+
lighten-color: 8%
48+
),
49+
50+
header-selected-text-color: (
51+
igx-color: ('secondary', 500),
52+
rgba: .24,
53+
hexrgba: #222,
54+
lighten-color: 8%,
55+
text-contrast: ()
56+
),
57+
4058
content-background: #222,
4159

4260
row-odd-background: #222,
@@ -59,7 +77,8 @@ $_base-dark-grid: (
5977
row-selected-hover-background: (
6078
igx-color: ('secondary', 'A700'),
6179
rgba: .24,
62-
hexrgba: #222
80+
hexrgba: #222,
81+
lighten-color: 5%
6382
),
6483

6584
row-selected-text-color: #fff,
@@ -135,6 +154,8 @@ $_dark-grid: extend($_light-grid, $_base-dark-grid);
135154

136155

137156
/// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid.
157+
/// @prop {Map} header-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The table header background color when selected (ex. column selection).
158+
/// @prop {Map} header-selected-text-color [igx-color: ('grays', 200), hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
138159
/// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
139160
/// @prop {Map} row-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The selected row background color.
140161
/// @prop {Map} row-selected-hover-background [igx-color: ('grays', '300'), hexrgba: #222] - The selected row background color on hover.
@@ -145,6 +166,17 @@ $_dark-fluent-grid: extend(
145166
$_fluent-grid,
146167
$_base-dark-grid,
147168
(
169+
header-selected-background: (
170+
igx-color: ('grays', 200),
171+
hexrgba: #222
172+
),
173+
174+
header-selected-text-color: (
175+
igx-color: ('grays', 200),
176+
hexrgba: #222,
177+
text-contrast: ()
178+
),
179+
148180
row-hover-background: (
149181
igx-color: ('grays', 100),
150182
hexrgba: #222
@@ -168,6 +200,8 @@ $_dark-fluent-grid: extend(
168200
///
169201
/// @prop {Color} header-background [#222] - The table header background color.
170202
/// @prop {Color} header-text-color [#fff] - The table header text color.
203+
/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The table header background color when selected (ex. column selection).
204+
/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
171205
///
172206
/// @requires {function} extend
173207
/// @requires $_bootstrap-grid
@@ -178,5 +212,18 @@ $_dark-bootstrap-grid: extend(
178212
(
179213
header-background: #222,
180214
header-text-color: #fff,
215+
216+
header-selected-background: (
217+
igx-color: ('secondary', 500),
218+
rgba: .24,
219+
hexrgba: #222,
220+
),
221+
222+
header-selected-text-color: (
223+
igx-color: ('secondary', 500),
224+
rgba: .24,
225+
hexrgba: #222,
226+
text-contrast: ()
227+
),
181228
)
182229
);

0 commit comments

Comments
 (0)