Skip to content

Commit 422a474

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into mpopov/remove-focus-styles
2 parents 9553ab8 + 3fe37b0 commit 422a474

File tree

7 files changed

+189
-63
lines changed

7 files changed

+189
-63
lines changed

‎projects/igniteui-angular/src/lib/avatar/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
55

66
# Usage
77
```html
8-
<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
8+
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
99
</igx-avatar>
1010
```
1111

@@ -27,7 +27,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
2727

2828
Using `igx-avatar` tag to include it into your app.
2929
```html
30-
<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
30+
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
3131
</igx-avatar>
3232
```
3333

‎projects/igniteui-angular/src/lib/avatar/avatar.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
4747
*
4848
* @example
4949
* ```html
50-
* <igx-avatar initials="MS" roundShape="true" size="large">
50+
* <igx-avatar initials="MS" [roundShape]="true" size="large">
5151
* </igx-avatar>
5252
* ```
5353
*/
@@ -145,12 +145,12 @@ export class IgxAvatarComponent implements OnInit {
145145
public id = `igx-avatar-${NEXT_ID++}`;
146146

147147
/**
148-
* Sets a round shape to the avatar, if `roundShape` is set to `true`.
148+
* Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
149149
* By default the shape of the avatar is a square.
150150
*
151151
* @example
152152
* ```html
153-
* <igx-avatar roundShape="true" ></igx-avatar>
153+
* <igx-avatar [roundShape]="true" ></igx-avatar>
154154
* ```
155155
*/
156156

‎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
@@ -707,7 +707,7 @@
707707
grid-template-columns: 1fr;
708708
overflow: hidden;
709709
box-shadow: $grid-shadow;
710-
710+
711711
@if $variant == 'fluent' {
712712
box-shadow: 0 0 0 1px --var($theme, 'grid-border-color');
713713
}
@@ -1143,16 +1143,19 @@
11431143
%igx-grid__td--bool {
11441144
justify-content: center;
11451145

1146-
igx-icon {
1146+
%igx-icon-display {
11471147
height: rem(18px);
11481148
width: rem(18px);
11491149
font-size: rem(18px);
1150+
}
1151+
1152+
%igx-icon--error {
11501153
color: igx-color($palette, 'grays', 500);
11511154
}
11521155
}
11531156

11541157
%igx-grid__td--bool-true {
1155-
igx-icon {
1158+
%igx-icon--success {
11561159
color: igx-color($palette, 'grays', 700);
11571160
}
11581161
}

‎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)