Skip to content

Commit b7fbe44

Browse files
hanastasovhanastasov
committed
merge 8.2.3
2 parents fd59d39 + 446783c commit b7fbe44

File tree

12 files changed

+156
-137
lines changed

12 files changed

+156
-137
lines changed

‎projects/igniteui-angular/migrations/update-8_2_6/changes/theme-props.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"$schema": "../../common/schema/theme-props.schema.json",
3+
"changes": [
4+
{
5+
"name": "$button-background",
6+
"remove": true,
7+
"owner": "igx-grid-toolbar-theme"
8+
},
9+
{
10+
"name": "$button-text-color",
11+
"remove": true,
12+
"owner": "igx-grid-toolbar-theme"
13+
},
14+
{
15+
"name": "$button-hover-background",
16+
"remove": true,
17+
"owner": "igx-grid-toolbar-theme"
18+
},
19+
{
20+
"name": "$button-hover-text-color",
21+
"remove": true,
22+
"owner": "igx-grid-toolbar-theme"
23+
},
24+
{
25+
"name": "$button-focus-background",
26+
"remove": true,
27+
"owner": "igx-grid-toolbar-theme"
28+
},
29+
{
30+
"name": "$button-focus-text-color",
31+
"remove": true,
32+
"owner": "igx-grid-toolbar-theme"
33+
}
34+
]
35+
}

‎projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,43 @@ describe('Update 8.2.6', () => {
2727
appTree.create('/angular.json', JSON.stringify(configJson));
2828
});
2929

30+
it('should update igx-carousel-theme prop', done => {
31+
appTree.create(
32+
'/testSrc/appPrefix/component/test.component.scss',
33+
`$my-toolbar-theme: igx-grid-toolbar-theme(
34+
$background-color: null,
35+
$button-background: null,
36+
$title-text-color: null,
37+
$button-text-color: null,
38+
$button-hover-background: null,
39+
$button-hover-text-color: null,
40+
$button-focus-background: null,
41+
$button-focus-text-color: null,
42+
$dropdown-background: null,
43+
$item-text-color: null,
44+
$item-hover-background: null,
45+
$item-hover-text-color: null,
46+
$item-focus-background: null,
47+
$item-focus-text-color: null
48+
);`
49+
);
50+
const tree = schematicRunner.runSchematic('migration-12', {}, appTree);
51+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
52+
.toEqual(
53+
`$my-toolbar-theme: igx-grid-toolbar-theme(
54+
$background-color: null,
55+
$title-text-color: null,
56+
$dropdown-background: null,
57+
$item-text-color: null,
58+
$item-hover-background: null,
59+
$item-hover-text-color: null,
60+
$item-focus-background: null,
61+
$item-focus-text-color: null
62+
);`
63+
);
64+
done();
65+
});
66+
3067
it('should update igx-grid-paginator-theme', done => {
3168
appTree.create(
3269
'/testSrc/appPrefix/component/test.component.scss',

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

Lines changed: 8 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@
1010
///
1111
/// @param {Color} $background-color [null] - The toolbar background color.
1212
/// @param {Color} $title-text-color [null] - The toolbar title text color.
13-
/// @param {Color} $button-background [null] - The toolbar button background color.
14-
/// @param {Color} $button-text-color [null] - The toolbar button text color.
15-
/// @param {Color} $button-hover-background [null] - The toolbar button hover background color.
16-
/// @param {Color} $button-hover-text-color [null] - The toolbar button hover text color.
17-
/// @param {Color} $button-focus-background [null] - The toolbar button focus background color.
18-
/// @param {Color} $button-focus-text-color [null] - The toolbar button focus text color.
1913
/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.
2014
/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color.
2115
/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color.
@@ -41,15 +35,8 @@
4135
$schema: $light-schema,
4236
4337
$background-color: null,
44-
$button-background: null,
4538
$title-text-color: null,
4639
47-
$button-text-color: null,
48-
$button-hover-background: null,
49-
$button-hover-text-color: null,
50-
$button-focus-background: null,
51-
$button-focus-text-color: null,
52-
5340
$dropdown-background: null,
5441
$item-text-color: null,
5542
$item-hover-background: null,
@@ -92,44 +79,13 @@
9279
$item-focus-text-color: text-contrast($item-focus-background);
9380
}
9481

95-
@if not($button-hover-background) and $background-color {
96-
$button-hover-text-color: text-contrast($background-color);
97-
98-
@if type-of($background-color) == 'color' {
99-
$button-hover-background: rgba(text-contrast($background-color), .2);
100-
}
101-
}
102-
103-
@if not($button-focus-background) and $background-color {
104-
$button-focus-text-color: text-contrast($background-color);
105-
106-
@if type-of($background-color) == 'color' {
107-
$button-focus-background: rgba(text-contrast($background-color), .2);
108-
}
109-
}
110-
111-
@if not($button-background) and $background-color {
112-
$button-text-color: text-contrast($background-color);
113-
114-
@if type-of($background-color) == 'color' {
115-
$button-background: rgba(text-contrast($background-color), .1);
116-
}
117-
}
118-
11982
@return extend($theme, (
12083
name: $name,
12184
palette: $palette,
12285

12386
background-color: $background-color,
124-
button-background: $button-background,
12587
title-text-color: $title-text-color,
12688

127-
button-text-color: $button-text-color,
128-
button-hover-background: $button-hover-background,
129-
button-hover-text-color: $button-hover-text-color,
130-
button-focus-background: $button-focus-background,
131-
button-focus-text-color: $button-focus-text-color,
132-
13389
item-text-color: $item-text-color,
13490
dropdown-background: $dropdown-background,
13591
item-hover-background: $item-hover-background,
@@ -191,39 +147,11 @@
191147
padding: map-get($grid-toolbar-padding-rtl, 'comfortable');
192148
}
193149

194-
%igx-button--flat {
195-
background: --var($theme, 'button-background');
196-
color: --var($theme, 'button-text-color');
197-
margin-#{$left}: rem(8);
198-
199-
&:hover {
200-
background: --var($theme, 'button-hover-background');
201-
color: --var($theme, 'button-hover-text-color');
202-
}
203-
204-
&:focus,
205-
&:active {
206-
background: --var($theme, 'button-focus-background');
207-
color: --var($theme, 'button-focus-text-color');
208-
}
209-
}
210-
211-
%igx-button--icon {
212-
background: --var($theme, 'button-background');
213-
color: --var($theme, 'button-text-color');
150+
%igx-button--outlined,
151+
%igx-button--raised,
152+
%igx-button--flat,
153+
%igx-button--icon{
214154
margin-#{$left}: rem(8);
215-
border-radius: 0;
216-
217-
&:hover {
218-
background: --var($theme, 'button-hover-background');
219-
color: --var($theme, 'button-hover-text-color');
220-
}
221-
222-
&:focus,
223-
&:active {
224-
background: --var($theme, 'button-focus-background');
225-
color: --var($theme, 'button-focus-text-color');
226-
}
227155
}
228156

229157
%igx-grid-toolbar__button-space {
@@ -249,8 +177,10 @@
249177
&[dir='rtl'] {
250178
text-align: #{$right};
251179

180+
%igx-button--outlined,
181+
%igx-button--raised,
252182
%igx-button--flat,
253-
%igx-button--icon {
183+
%igx-button--icon{
254184
margin-#{$left}: 0;
255185
margin-#{$right}: rem(8);
256186
}
@@ -321,7 +251,7 @@
321251
}
322252

323253
%igx-grid-toolbar__adv-filter--filtered {
324-
color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
254+
border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
325255
}
326256

327257
%igx-grid-toolbar__dropdown {

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

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@
1111
///
1212
/// @property {map} background-color [igx-color: ('grays', 50)] - The toolbar background color.
1313
/// @property {map} title-text-color [igx-color: ('grays', 600)] - The toolbar title text color.
14-
/// @property {map} button-background [igx-color: ('grays', 100)] - The toolbar button background color.
15-
/// @property {map} button-text-color [igx-color: ('grays', 600)] - The toolbar button text color.
16-
/// @property {map} button-hover-background [igx-color: ('grays', 100)] - The toolbar button hover background color.
17-
/// @property {map} button-hover-text-color [igx-color: ('grays', 600)] - The toolbar button hover text color.
18-
/// @property {map} button-focus-background [igx-color: ('grays', 100)] - The toolbar button focus background color.
19-
/// @property {map} button-focus-text-color [igx-color: ('grays', 600)] - The toolbar button focus text color.
14+
2015
/// @property {Color} dropdown-background [#fff] - The toolbar drop-down background color.
2116
/// @property {map} item-text-color [igx-color: ('grays', 600)] - The toolbar drop-down item text color.
2217
/// @property {map} item-hover-background [igx-color: ('grays', 100)] - The toolbar drop-down item hover background color.
@@ -35,30 +30,6 @@ $_light-grid-toolbar: (
3530
igx-color: ('grays', 600)
3631
),
3732

38-
button-background: (
39-
igx-color: ('grays', 100)
40-
),
41-
42-
button-text-color: (
43-
igx-color: ('grays', 600)
44-
),
45-
46-
button-hover-background: (
47-
igx-color: ('grays', 100)
48-
),
49-
50-
button-hover-text-color: (
51-
igx-color: ('grays', 600)
52-
),
53-
54-
button-focus-background: (
55-
igx-color: ('grays', 100)
56-
),
57-
58-
button-focus-text-color: (
59-
igx-color: ('grays', 600)
60-
),
61-
6233
dropdown-background: #fff,
6334

6435
item-text-color: (
@@ -79,14 +50,13 @@ $_light-grid-toolbar: (
7950

8051
item-focus-text-color: (
8152
igx-color: ('grays', 600)
82-
)
53+
),
8354
);
8455

8556
/// Generates a fluent grid-toolbar schema.
8657
/// @type {Map}
8758
///
8859
/// @property {map} background-color [igx-color: 'surface'] - The toolbar background color.
89-
/// @property {map} button-hover-text-color [igx-color: ('primary', 500)] - The toolbar button hover text color.
9060
///
9161
/// @requires {function} extend
9262
/// @requires {map} $_light-grid-toolbar
@@ -96,9 +66,5 @@ $_fluent-grid-toolbar: extend(
9666
background-color: (
9767
igx-color: 'surface'
9868
),
99-
100-
button-hover-text-color: (
101-
igx-color: ('primary', 500)
102-
),
10369
)
10470
);

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
477477

478478
this.filteringService.filteredColumn = null;
479479
this.filteringService.selectedExpression = null;
480-
this.cdr.detectChanges();
481480

482481
this.chipAreaScrollOffset = 0;
483482
this.transform(this.chipAreaScrollOffset);

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,6 +1073,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
10731073
*/
10741074
set filterMode(value) {
10751075
this._filterMode = value;
1076+
1077+
if (this.filteringService.isFilterRowVisible) {
1078+
this.filteringRow.close();
1079+
}
1080+
this.notifyChanges(true);
10761081
}
10771082

10781083
/**
@@ -4446,6 +4451,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44464451
return pagingHeight;
44474452
}
44484453

4454+
/**
4455+
* @hidden
4456+
*/
4457+
protected getFilterCellHeight(): number {
4458+
const headerGroupNativeEl = (this.headerGroupsList.length !== 0) ?
4459+
this.headerGroupsList[0].element.nativeElement : null;
4460+
const filterCellNativeEl = (headerGroupNativeEl) ?
4461+
headerGroupNativeEl.querySelector('igx-grid-filtering-cell') : null;
4462+
return (filterCellNativeEl) ? filterCellNativeEl.offsetHeight : 0;
4463+
}
4464+
44494465
/**
44504466
* @hidden
44514467
*/
@@ -4454,12 +4470,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44544470
return null;
44554471
}
44564472

4457-
4473+
const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
4474+
this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
4475+
this.theadRow.nativeElement.offsetHeight;
44584476
const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
44594477
const toolbarHeight = this.getToolbarHeight();
44604478
const pagingHeight = this.getPagingHeight();
44614479
const groupAreaHeight = this.getGroupAreaHeight();
4462-
const renderedHeight = toolbarHeight + this.theadRow.nativeElement.offsetHeight +
4480+
const renderedHeight = toolbarHeight + actualTheadRow +
44634481
footerHeight + pagingHeight + groupAreaHeight +
44644482
this.scr.nativeElement.clientHeight;
44654483

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99

1010
<div class="igx-grid-toolbar__actions">
1111
<div *ngIf="grid.allowAdvancedFiltering">
12-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #advancedFilteringButton name="btnAdvancedFiltering" igxButton igxRipple
12+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #advancedFilteringButton name="btnAdvancedFiltering" igxRipple
13+
[ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'"
1314
(click)="showAdvancedFilteringUI()">
1415
<div class="igx-grid-toolbar__button-space">
15-
<igx-icon [ngClass]="grid.advancedFilteringExpressionsTree ? 'igx-grid-toolbar__adv-filter--filtered' : 'igx-grid-toolbar__adv-filter'">
16+
<igx-icon>
1617
filter_list
1718
</igx-icon>
1819
<span>{{grid.resourceStrings.igx_grid_advanced_filter_title}}</span>
@@ -21,7 +22,7 @@
2122
</div>
2223

2324
<div *ngIf="grid.columnHiding">
24-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #columnHidingButton name="btnColumnHiding" igxButton igxRipple
25+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnHidingButton name="btnColumnHiding" igxRipple
2526
(click)="toggleColumnHidingUI()">
2627
<div class="igx-grid-toolbar__button-space">
2728
<igx-icon *ngIf="grid.hiddenColumnsCount > 0">visibility_off</igx-icon>
@@ -41,7 +42,7 @@
4142
</igx-drop-down>
4243
</div>
4344
<div *ngIf="grid.columnPinning">
44-
<button igxButton="flat" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxButton igxRipple
45+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
4546
(click)="toggleColumnPinningUI()">
4647
<div class="igx-grid-toolbar__button-space">
4748
<igx-icon *ngIf="pinnedColumnsCount > 0">lock</igx-icon>
@@ -61,7 +62,7 @@
6162
</div>
6263

6364
<div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
64-
<button igxButton="flat" [displayDensity]="grid.displayDensity" igxRipple #btnExport
65+
<button igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btnExport
6566
(click)="exportClicked()">
6667
<span class="igx-grid-toolbar__button-space">
6768
<igx-icon fontSet="material">import_export</igx-icon>

0 commit comments

Comments
 (0)