Skip to content

Commit bb1e44c

Browse files
Simeon Simeonoffkdinev
Simeon Simeonoff
authored and
kdinev
committed
Grid styling fixes (#2911)
* fix(theme): theme not building with legacy support off * refactor(cell-editing): use compact input groups for numbers and strings
1 parent b15cce3 commit bb1e44c

File tree

2 files changed

+49
-21
lines changed

2 files changed

+49
-21
lines changed

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

+47-19
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
/// @param {Color} $drop-area-icon-color [rgba(0, 0, 0, .38)] - The drop area icon color.
5353
/// @param {Color} $drop-area-background [rgba(0, 0, 0, .04)] - The drop area background color.
5454
/// @param {Color} $drop-area-on-drop-background [rgba(0, 0, 0, .08)] - The drop area background on drop color.
55-
/// @param {Color} $treegrid-filtered-text-color [rgba(0, 0, 0, .04)] - grouping row background color on focus.
55+
/// @param {Color} $tree-filtered-text-color [rgba(0, 0, 0, .04)] - grouping row background color on focus.
5656
///
5757
/// @requires igx-color
5858
/// @requires igx-contrast-color
@@ -126,7 +126,7 @@
126126
$drop-area-background: null,
127127
$drop-area-on-drop-background: null,
128128
129-
$treegrid-filtered-text-color: null
129+
$tree-filtered-text-color: null
130130
) {
131131
$default-theme: (
132132
name: 'igx-grid',
@@ -193,13 +193,16 @@
193193

194194
group-row-background: hexrgba(igx-color($palette, 'grays', 100)),
195195
group-row-selected-background: hexrgba(igx-color($palette, 'grays', 200)),
196-
treegrid-filtered-text-color: igx-color($palette, grays, 500)
196+
tree-filtered-text-color: igx-color($palette, grays, 500)
197197
);
198198

199199
@if $preset {
200200
$default-theme: map-get($preset, map-get($default-theme, 'name'));
201201
}
202202

203+
$tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($default-theme, 'row-selected-background')), .5);
204+
$tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($default-theme, 'cell-selected-background')), .5);
205+
203206
@if not($ghost-header-icon-color) and $ghost-header-background {
204207
$ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
205208
}
@@ -264,7 +267,6 @@
264267
$group-row-background: $header-background
265268
}
266269

267-
///////
268270
@if not($expand-icon-color) and $group-row-background {
269271
$expand-icon-color: text-contrast($group-row-background)
270272
}
@@ -280,8 +282,6 @@
280282
@if not($group-count-background) and $group-row-selected-background {
281283
$group-count-background: text-contrast($group-row-selected-background);
282284
}
283-
////////
284-
285285

286286
@if not($expand-all-icon-color) and $header-background {
287287
$expand-all-icon-color: rgba(text-contrast($header-background), .87);
@@ -383,7 +383,9 @@
383383
drop-area-icon-color: $drop-area-icon-color,
384384
drop-area-on-drop-background: $drop-area-on-drop-background,
385385
drop-area-background: $drop-area-background,
386-
treegrid-filtered-text-color: $treegrid-filtered-text-color
386+
tree-filtered-text-color: $tree-filtered-text-color,
387+
tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
388+
tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color
387389
));
388390
}
389391

@@ -414,8 +416,6 @@
414416
$transition: all 120ms $ease-in-out-cubic;
415417

416418
// Cell
417-
// $grid-cell-padding: 0 rem(24px);
418-
// $grid-cell-padding--e: 0 rem(24px);
419419
$grid-cell-align-num: right;
420420
$grid-cell-fs: rem(13px);
421421
$grid-cell-lh: rem(16px);
@@ -655,10 +655,10 @@
655655
}
656656

657657
%igx-grid__tree-grouping-indicator {
658-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
658+
color: --var($theme, 'row-selected-text-color');
659659

660660
&:hover {
661-
color: text-contrast(--var($theme, 'row-selected-background'));
661+
color: --var($theme, 'row-selected-text-color');
662662
}
663663
}
664664
}
@@ -708,29 +708,55 @@
708708

709709
%igx-grid-row--filtered {
710710
%grid-cell-text {
711-
color: --var($theme, 'treegrid-filtered-text-color');
711+
color: --var($theme, 'tree-filtered-text-color');
712+
}
713+
714+
%igx-grid__tree-grouping-indicator {
715+
color: --var($theme, 'tree-filtered-text-color');
716+
717+
&:hover {
718+
color: --var($theme, 'tree-filtered-text-color');
719+
}
720+
}
721+
722+
%grid-cell--selected {
723+
%grid-cell-text {
724+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
725+
}
726+
727+
%igx-grid__tree-grouping-indicator {
728+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
729+
730+
&:hover {
731+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
732+
}
733+
}
712734
}
713735
}
714736

715737
%grid-row--selected--filtered {
716738
%grid-cell-text {
717-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
739+
color: --var($theme, 'tree-selected-filtered-row-text-color');
718740
}
719741

720742
%igx-grid__tree-grouping-indicator {
721-
color: rgba(text-contrast(--var($theme, 'row-selected-background')), .5);
743+
color: --var($theme, 'tree-selected-filtered-row-text-color');
722744

723745
&:hover {
724-
color: text-contrast(--var($theme, 'row-selected-background'));
746+
color: --var($theme, 'tree-selected-filtered-row-text-color');
725747
}
726748
}
727749

728750
%grid-cell--selected {
751+
%grid-cell-text {
752+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
753+
}
754+
729755
%igx-grid__tree-grouping-indicator {
730-
color: rgba(text-contrast(--var($theme, 'cell-selected-background')), .5);
756+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
731757

732758
&:hover {
733-
color: text-contrast(--var($theme, 'cell-selected-background'));
759+
color: --var($theme, 'tree-selected-filtered-cell-text-color');
734760
}
735761
}
736762
}
@@ -740,6 +766,8 @@
740766
display: flex;
741767
align-items: center;
742768
justify-content: center;
769+
user-select: none;
770+
outline-style: none;
743771
margin-right: rem(8);
744772
cursor: pointer;
745773

@@ -791,10 +819,10 @@
791819
border-bottom: 0;
792820

793821
%igx-grid__tree-grouping-indicator {
794-
color: rgba(text-contrast(--var($theme, 'cell-selected-background')), .5);
822+
color: --var($theme, 'cell-selected-text-color');
795823

796824
&:hover {
797-
color: text-contrast(--var($theme, 'cell-selected-background'));
825+
color: --var($theme, 'cell-selected-text-color');
798826
}
799827
}
800828
}

‎projects/igniteui-angular/src/lib/grids/cell.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
</ng-template>
1010
<ng-template #inlineEditor let-cell="cell">
1111
<ng-container *ngIf="column.dataType === 'string'">
12-
<igx-input-group>
12+
<igx-input-group displayDensity="compact">
1313
<input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
1414
</igx-input-group>
1515
</ng-container>
1616
<ng-container *ngIf="column.dataType === 'number'">
17-
<igx-input-group>
17+
<igx-input-group displayDensity="compact">
1818
<input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" type="number">
1919
</igx-input-group>
2020
</ng-container>

0 commit comments

Comments
 (0)