Skip to content

Commit 65a8954

Browse files
LipataLipata
authored
Merge branch 'master' into rkaraivanov/column-formatters-performance
2 parents d63a7cf + 0547a1a commit 65a8954

File tree

10 files changed

+94
-25
lines changed

10 files changed

+94
-25
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ The following example shows how you can use the Indigo theme:
7979
- `igxGrid`
8080
- **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
8181
- `igx-select`, `igx-combo`, `igx-drop-down`
82-
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
82+
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
8383
- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
8484
- `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
8585
- `actions` - contains information about the transactions, that caused the emission of the event.

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,14 @@
542542
@extend %igx-grid__filtering-cell-indicator--hidden !optional;
543543
}
544544

545+
@include e(filtering-dropdown-items) {
546+
@extend %igx-grid__filtering-dropdown-items !optional;
547+
}
548+
549+
@include e(filtering-dropdown-text) {
550+
@extend %igx-grid__filtering-dropdown-text !optional;
551+
}
552+
545553
@include e(filtering-row) {
546554
@extend %igx-grid__filtering-row !optional;
547555
}
@@ -554,8 +562,12 @@
554562
@extend %igx-grid__filtering-row--compact !optional;
555563
}
556564

557-
@include e(filtering-row-buttons) {
558-
@extend %igx-grid__filtering-row-buttons !optional;
565+
@include e(filtering-row-editing-buttons) {
566+
@extend %igx-grid__filtering-row-editing-buttons !optional;
567+
}
568+
569+
@include e(filtering-row-editing-buttons, $m: small) {
570+
@extend %igx-grid__filtering-row-editing-buttons--small !optional;
559571
}
560572

561573
@include e(filtering-row-main) {

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2374,7 +2374,9 @@
23742374
}
23752375

23762376
igx-input-group {
2377-
flex: 0 0 200px;
2377+
width: 100%;
2378+
max-width: rem(200px);
2379+
min-width: rem(140px);
23782380
}
23792381

23802382
igx-prefix:focus {
@@ -2396,6 +2398,15 @@
23962398
}
23972399
}
23982400

2401+
%igx-grid__filtering-dropdown-items {
2402+
display: flex;
2403+
align-items: center;
2404+
}
2405+
2406+
%igx-grid__filtering-dropdown-text {
2407+
margin-left: rem(16px);
2408+
}
2409+
23992410
%igx-grid__filtering-row--cosy {
24002411
height: map-get($grid-header-height, 'cosy');
24012412
}
@@ -2409,6 +2420,7 @@
24092420
flex: 1;
24102421
overflow: hidden;
24112422
max-width: calc(100% - 176px);
2423+
min-width: rem(56px);
24122424

24132425
igx-chips-area {
24142426
transition: transform .25s $ease-out-back;
@@ -2640,4 +2652,30 @@
26402652

26412653
@include _excel-filtering($theme, $palette);
26422654
@include _advanced-filtering($theme, $palette);
2655+
2656+
%igx-grid__filtering-row-editing-buttons--small,
2657+
%igx-grid__filtering-row-editing-buttons {
2658+
display: flex;
2659+
align-items: center;
2660+
}
2661+
2662+
%igx-grid__filtering-row-editing-buttons {
2663+
button {
2664+
igx-icon {
2665+
margin-#{$right}: rem(8px);
2666+
}
2667+
}
2668+
}
2669+
2670+
%igx-grid__filtering-row-editing-buttons--small {
2671+
button {
2672+
&:not([disabled]) {
2673+
igx-icon {
2674+
color: --var($theme, 'sorted-header-icon-color');
2675+
}
2676+
}
2677+
}
2678+
}
26432679
}
2680+
2681+

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1558,7 +1558,6 @@
15581558
border: 1px solid --var($theme, 'border-color');
15591559
font-size: map-get($bootstrap-font-size, 'comfortable');
15601560
padding: map-get($bootstrap-padding, 'comfortable');
1561-
transition: box-shadow $transition-timing, color $transition-timing;
15621561
}
15631562

15641563
%bootstrap-input--focus {

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,12 @@ <h6 class="igx-filter-empty__title">
160160
[name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
161161
</igx-icon>
162162
<igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
163-
<igx-icon fontSet="filtering-icons"
164-
[name]="selectedColumn.filters.condition(condition).iconName">
165-
</igx-icon>
166-
<span>{{getConditionFriendlyName(condition)}}</span>
163+
<div class="igx-grid__filtering-dropdown-items">
164+
<igx-icon fontSet="filtering-icons"
165+
[name]="selectedColumn.filters.condition(condition).iconName">
166+
</igx-icon>
167+
<span class="igx-grid__filtering-dropdown-text">{{getConditionFriendlyName(condition)}}</span>
168+
</div>
167169
</igx-select-item>
168170
</igx-select>
169171

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<igx-drop-down-item *ngFor="let condition of conditions"
44
[value]="condition"
55
[selected]="isConditionSelected(condition)">
6-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
7-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
6+
<div class="igx-grid__filtering-dropdown-items">
7+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
8+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
9+
</div>
810
</igx-drop-down-item>
911
</igx-drop-down>
1012

@@ -121,7 +123,13 @@
121123
<igx-icon>navigate_next</igx-icon>
122124
</button>
123125

124-
<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
125-
<button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">{{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</button>
126-
<button #closeButton igxButton igxRipple (click)="close()">{{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</button>
126+
<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
127+
<button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
128+
<igx-icon>refresh</igx-icon>
129+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
130+
</button>
131+
<button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="close()">
132+
<igx-icon>close</igx-icon>
133+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
134+
</button>
127135
</div>

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -778,4 +778,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
778778
private get isColumnFiltered() {
779779
return this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0;
780780
}
781+
782+
public get isNarrowWidth(): boolean {
783+
return this.element.nativeElement.offsetWidth < 432;
784+
}
781785
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
<igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
1010
</igx-prefix>
1111
<igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
12-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
13-
<span>{{translateCondition(condition)}}</span>
12+
<div class="igx-grid__filtering-dropdown-items">
13+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
14+
<span class="igx-grid__filtering-dropdown-text">{{translateCondition(condition)}}</span>
15+
</div>
1416
</igx-select-item>
1517
</igx-select>
1618

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -166,12 +166,16 @@ <h4>{{ column.header || column.field }}</h4>
166166
<igx-drop-down-item
167167
*ngFor="let condition of conditions"
168168
[value]="condition">
169-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
170-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
169+
<div class="igx-grid__filtering-dropdown-items">
170+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
171+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
172+
</div>
171173
</igx-drop-down-item>
172174
<igx-drop-down-item *ngIf="showCustomFilterItem()">
173-
<igx-icon>filter_list</igx-icon>
174-
<span style="margin-left: 16px">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
175+
<div class="igx-grid__filtering-dropdown-items">
176+
<igx-icon>filter_list</igx-icon>
177+
<span class="igx-grid__filtering-dropdown-text">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
178+
</div>
175179
</igx-drop-down-item>
176180
</div>
177181
</igx-drop-down>

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1128,7 +1128,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11281128
const reset = editingBtns.queryAll(By.css('button'))[0];
11291129
const close = editingBtns.queryAll(By.css('button'))[1];
11301130

1131-
expect(reset.nativeElement.innerText).toBe('Reset');
1131+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11321132
}));
11331133

11341134
it('Should correctly change resource strings for filter row using Changei18n.', fakeAsync(() => {
@@ -1151,8 +1151,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11511151
const reset = editingBtns.queryAll(By.css('button'))[0];
11521152
const close = editingBtns.queryAll(By.css('button'))[1];
11531153

1154-
expect(close.nativeElement.innerText).toBe('My close');
1155-
expect(reset.nativeElement.innerText).toBe('Reset');
1154+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1155+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11561156

11571157
changei18n({
11581158
igx_grid_filter: 'Filter',
@@ -1181,8 +1181,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11811181
const reset = editingBtns.queryAll(By.css('button'))[0];
11821182
const close = editingBtns.queryAll(By.css('button'))[1];
11831183

1184-
expect(close.nativeElement.innerText).toBe('My close');
1185-
expect(reset.nativeElement.innerText).toBe('Reset');
1184+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1185+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11861186
}));
11871187

11881188
it('should correctly apply locale to datePicker.', fakeAsync(() => {

0 commit comments

Comments
 (0)