Skip to content

Commit 8bf3045

Browse files
rkaraivanovrkaraivanov
authored
Merge pull request #8142 from IgniteUI/fix-8100-master
fix(grid): improve bool cell style templating
2 parents e5b9418 + 9d16a9a commit 8bf3045

File tree

5 files changed

+184
-58
lines changed

5 files changed

+184
-58
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -703,7 +703,7 @@
703703
grid-template-columns: 1fr;
704704
overflow: hidden;
705705
box-shadow: $grid-shadow;
706-
706+
707707
@if $variant == 'fluent' {
708708
box-shadow: 0 0 0 1px --var($theme, 'grid-border-color');
709709
}
@@ -1139,16 +1139,19 @@
11391139
%igx-grid__td--bool {
11401140
justify-content: center;
11411141

1142-
igx-icon {
1142+
%igx-icon-display {
11431143
height: rem(18px);
11441144
width: rem(18px);
11451145
font-size: rem(18px);
1146+
}
1147+
1148+
%igx-icon--error {
11461149
color: igx-color($palette, 'grays', 500);
11471150
}
11481151
}
11491152

11501153
%igx-grid__td--bool-true {
1151-
igx-icon {
1154+
%igx-icon--success {
11521155
color: igx-color($palette, 'grays', 700);
11531156
}
11541157
}

‎projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,16 @@
1515
@extend %igx-icon-display !optional;
1616
@extend %igx-icon--inactive !optional;
1717
}
18+
19+
@include m(success) {
20+
@extend %igx-icon-display !optional;
21+
@extend %igx-icon--success !optional;
22+
}
23+
24+
@include m(error) {
25+
@extend %igx-icon-display !optional;
26+
@extend %igx-icon--error !optional;
27+
}
1828
}
1929

2030
@include b(igx-svg-container) {

‎projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,14 @@
7474
}
7575
}
7676

77+
%igx-icon--success {
78+
color: igx-color(map-get($theme, 'palette'), 'success');
79+
}
80+
81+
%igx-icon--error {
82+
color: igx-color(map-get($theme, 'palette'), 'error');
83+
}
84+
7785
%igx-icon--inactive {
7886
color: --var($theme, 'disabled-color') !important;
7987
opacity: .54;

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

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,94 @@
11
<ng-template #defaultPinnedIndicator>
2-
<igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
2+
<igx-chip
3+
*ngIf="displayPinnedChip"
4+
class="igx-grid__td--pinned-chip"
5+
[disabled]="true"
6+
[displayDensity]="'compact'"
7+
>{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip
8+
>
39
</ng-template>
410
<ng-template #defaultCell>
5-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
11+
<div
12+
igxTextHighlight
13+
class="igx-grid__td-text"
14+
style="pointer-events: none;"
615
[cssClass]="highlightClass"
716
[activeCssClass]="activeHighlightClass"
817
[groupName]="gridID"
9-
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
18+
[value]="
19+
formatter
20+
? (value | columnFormatter: formatter)
21+
: column.dataType === 'number'
22+
? (value | igxdecimal: grid.locale)
23+
: column.dataType === 'date'
24+
? (value | igxdate: grid.locale)
25+
: value
26+
"
1027
[row]="rowData"
1128
[column]="this.column.field"
1229
[containerClass]="'igx-grid__td-text'"
13-
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
14-
column.dataType === 'number' ?
15-
(value | igxdecimal:grid.locale) :
16-
column.dataType === 'date' ?
17-
(value | igxdate: grid.locale) :
18-
column.dataType === 'boolean' ? "" :
19-
value
30+
[metadata]="searchMetadata"
31+
>{{
32+
formatter
33+
? (value | columnFormatter: formatter)
34+
: column.dataType === "number"
35+
? (value | igxdecimal: grid.locale)
36+
: column.dataType === "date"
37+
? (value | igxdate: grid.locale)
38+
: column.dataType === "boolean"
39+
? ""
40+
: value
2041
}}</div>
21-
<igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
42+
<igx-icon
43+
*ngIf="column.dataType === 'boolean'"
44+
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
45+
>{{ value ? "check" : "close" }}</igx-icon
46+
>
2247
</ng-template>
2348
<ng-template #inlineEditor let-cell="cell">
2449
<ng-container *ngIf="column.dataType === 'string'">
2550
<igx-input-group displayDensity="compact">
26-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" />
51+
<input
52+
igxInput
53+
[value]="editValue"
54+
(input)="editValue = $event.target.value"
55+
[igxFocus]="true"
56+
/>
2757
</igx-input-group>
2858
</ng-container>
2959
<ng-container *ngIf="column.dataType === 'number'">
3060
<igx-input-group displayDensity="compact">
31-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" type="number">
61+
<input
62+
igxInput
63+
[value]="editValue"
64+
(input)="editValue = $event.target.value"
65+
[igxFocus]="true"
66+
type="number"
67+
/>
3268
</igx-input-group>
3369
</ng-container>
3470
<ng-container *ngIf="column.dataType === 'boolean'">
35-
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
36-
[igxFocus]="true" [disableRipple]="true"></igx-checkbox>
71+
<igx-checkbox
72+
(change)="editValue = $event.checked"
73+
[value]="editValue"
74+
[checked]="editValue"
75+
[igxFocus]="true"
76+
[disableRipple]="true"
77+
></igx-checkbox>
3778
</ng-container>
3879
<ng-container *ngIf="column.dataType === 'date'">
39-
<igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
40-
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
80+
<igx-date-picker
81+
[style.width.%]="100"
82+
[outlet]="grid.outlet"
83+
mode="dropdown"
84+
[locale]="grid.locale"
85+
[(value)]="editValue"
86+
[igxFocus]="true"
87+
[labelVisibility]="false"
88+
>
4189
</igx-date-picker>
4290
</ng-container>
4391
</ng-template>
4492
<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
4593
</ng-container>
46-
<ng-container *ngTemplateOutlet="template; context: context">
47-
</ng-container>
94+
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

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

Lines changed: 94 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,133 @@
11
<ng-template #defaultPinnedIndicator>
2-
<igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
2+
<igx-chip
3+
*ngIf="displayPinnedChip"
4+
class="igx-grid__td--pinned-chip"
5+
[disabled]="true"
6+
[displayDensity]="'compact'"
7+
>{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip
8+
>
39
</ng-template>
410
<ng-template #defaultCell>
5-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
11+
<div
12+
igxTextHighlight
13+
class="igx-grid__td-text"
14+
style="pointer-events: none;"
615
[cssClass]="highlightClass"
716
[activeCssClass]="activeHighlightClass"
817
[groupName]="gridID"
9-
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
18+
[value]="
19+
formatter
20+
? (value | columnFormatter: formatter)
21+
: column.dataType === 'number'
22+
? (value | igxdecimal: grid.locale)
23+
: column.dataType === 'date'
24+
? (value | igxdate: grid.locale)
25+
: value
26+
"
1027
[row]="rowData"
1128
[column]="this.column.field"
1229
[containerClass]="'igx-grid__td-text'"
13-
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
14-
column.dataType === 'number' ?
15-
(value | igxdecimal:grid.locale) :
16-
column.dataType === 'date' ?
17-
(value | igxdate: grid.locale) :
18-
column.dataType === 'boolean' ? "" :
19-
value
30+
[metadata]="searchMetadata"
31+
>{{
32+
formatter
33+
? (value | columnFormatter: formatter)
34+
: column.dataType === "number"
35+
? (value | igxdecimal: grid.locale)
36+
: column.dataType === "date"
37+
? (value | igxdate: grid.locale)
38+
: column.dataType === "boolean"
39+
? ""
40+
: value
2041
}}</div>
21-
<igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
42+
<igx-icon
43+
*ngIf="column.dataType === 'boolean'"
44+
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
45+
>{{ value ? "check" : "close" }}</igx-icon
46+
>
2247
</ng-template>
23-
<ng-template #inlineEditor let-cell="cell">
48+
<ng-template #inlineEditor let-cell="cell">
2449
<ng-container *ngIf="column.dataType === 'string'">
2550
<igx-input-group displayDensity="compact">
26-
<input igxInput [(ngModel)]="editValue" [igxFocus]="true">
51+
<input igxInput [(ngModel)]="editValue" [igxFocus]="true" />
2752
</igx-input-group>
2853
</ng-container>
2954
<ng-container *ngIf="column.dataType === 'number'">
3055
<igx-input-group displayDensity="compact">
31-
<input igxInput [(ngModel)]="editValue" [igxFocus]="true" type="number">
56+
<input
57+
igxInput
58+
[(ngModel)]="editValue"
59+
[igxFocus]="true"
60+
type="number"
61+
/>
3262
</igx-input-group>
3363
</ng-container>
3464
<ng-container *ngIf="column.dataType === 'boolean'">
35-
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
65+
<igx-checkbox
66+
(change)="editValue = $event.checked"
67+
[value]="editValue"
68+
[checked]="editValue"
69+
[disableRipple]="true"
70+
></igx-checkbox>
3671
</ng-container>
3772
<ng-container *ngIf="column.dataType === 'date'">
38-
<igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
39-
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
40-
</igx-date-picker>
73+
<igx-date-picker
74+
[style.width.%]="100"
75+
[outlet]="grid.outlet"
76+
mode="dropdown"
77+
[locale]="grid.locale"
78+
[(value)]="editValue"
79+
[igxFocus]="true"
80+
[labelVisibility]="false"
81+
>
82+
</igx-date-picker>
4183
</ng-container>
4284
</ng-template>
4385
<ng-container *ngIf="!editMode">
4486
<ng-container *ngIf="level > 0">
45-
<div #indentationDiv class="igx-grid__tree-cell--padding-level-{{level}}"></div>
87+
<div
88+
#indentationDiv
89+
class="igx-grid__tree-cell--padding-level-{{ level }}"
90+
></div>
4691
</ng-container>
47-
<div #indicator
48-
*ngIf="!isLoading"
49-
class="igx-grid__tree-grouping-indicator"
50-
[ngStyle]="{'visibility': showIndicator ? 'visible' : 'hidden'}"
51-
(click)="toggle($event)" (focus)="onIndicatorFocus()">
52-
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }">
92+
<div
93+
#indicator
94+
*ngIf="!isLoading"
95+
class="igx-grid__tree-grouping-indicator"
96+
[ngStyle]="{ visibility: showIndicator ? 'visible' : 'hidden' }"
97+
(click)="toggle($event)"
98+
(focus)="onIndicatorFocus()"
99+
>
100+
<ng-container
101+
*ngTemplateOutlet="iconTemplate; context: { $implicit: this }"
102+
>
53103
</ng-container>
54-
<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
104+
<ng-container
105+
*ngTemplateOutlet="pinnedIndicatorTemplate; context: context"
106+
>
55107
</ng-container>
56108
</div>
57-
<div *ngIf="isLoading"
58-
(dblclick)="onLoadingDblClick($event)"
59-
class="igx-grid__tree-loading-indicator">
60-
<ng-container *ngTemplateOutlet="grid.rowLoadingIndicatorTemplate ? grid.rowLoadingIndicatorTemplate : defaultLoadingIndicatorTemplate">
109+
<div
110+
*ngIf="isLoading"
111+
(dblclick)="onLoadingDblClick($event)"
112+
class="igx-grid__tree-loading-indicator"
113+
>
114+
<ng-container
115+
*ngTemplateOutlet="
116+
grid.rowLoadingIndicatorTemplate
117+
? grid.rowLoadingIndicatorTemplate
118+
: defaultLoadingIndicatorTemplate
119+
"
120+
>
61121
</ng-container>
62122
</div>
63123
<ng-template #defaultLoadingIndicatorTemplate>
64-
<igx-circular-bar [indeterminate]="true">
65-
</igx-circular-bar>
124+
<igx-circular-bar [indeterminate]="true"> </igx-circular-bar>
66125
</ng-template>
67126
</ng-container>
68-
<ng-container *ngTemplateOutlet="template; context: context">
69-
</ng-container>
127+
<ng-container *ngTemplateOutlet="template; context: context"> </ng-container>
70128
<ng-template #defaultExpandedTemplate>
71-
<igx-icon fontSet="material">expand_more</igx-icon>
129+
<igx-icon fontSet="material">expand_more</igx-icon>
72130
</ng-template>
73131
<ng-template #defaultCollapsedTemplate>
74-
<igx-icon fontSet="material">chevron_right</igx-icon>
132+
<igx-icon fontSet="material">chevron_right</igx-icon>
75133
</ng-template>

0 commit comments

Comments
 (0)