From 0f8f4e068995b1b846b64e2134b46df547232f65 Mon Sep 17 00:00:00 2001 From: IBarakov Date: Mon, 2 Nov 2020 17:59:24 +0200 Subject: [PATCH 1/6] feat(esf): make header icon templatable --- .../components/grid/_excel-filtering-theme.scss | 5 +++-- .../src/lib/grids/grid-base.directive.ts | 14 +++++++++++++- .../src/lib/grids/grid/grid.directives.ts | 9 +++++++++ .../src/lib/grids/grid/grid.module.ts | 3 +++ .../grids/headers/grid-header.component.html | 17 +++++++++++++---- .../lib/grids/headers/grid-header.component.ts | 17 ++++++++++++++++- 6 files changed, 57 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 83f4049a021..01497ec79ef 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -37,9 +37,10 @@ } %grid-excel-icon { + display: flex; cursor: pointer; - &.igx-icon { + igx-icon { width: rem(15px); height: rem(15px); font-size: rem(15px); @@ -47,7 +48,7 @@ } %grid-excel-icon--filtered { - &.igx-icon { + igx-icon { color: if( $variant == 'indigo-design', igx-color($palette, 'warn', 500), diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 73466da0473..7df75ff20b0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -103,7 +103,7 @@ import { IgxColumnResizingService } from './resizing/resizing.service'; import { IFilteringStrategy } from '../data-operations/filtering-strategy'; import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, - IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective + IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective } from './grid/grid.directives'; import { GridKeydownTargetType, @@ -231,6 +231,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements @ViewChild('defaultCollapsedTemplate', { read: TemplateRef, static: true }) protected defaultCollapsedTemplate: TemplateRef; + /** + * @hidden @internal + */ + @ViewChild('defaultESFHeaderIcon', { read: TemplateRef, static: true }) + protected defaultESFHeaderIconTemplate: TemplateRef; + /** * Gets/Sets the resource strings. * @remarks @@ -1994,6 +2000,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef }) public headerCollapseIndicatorTemplate: TemplateRef = null; + /** + * The custom template, if any, that should be used when rendering a row expand indicator. + */ + @ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef }) + public excelStyleHeaderIconTemplate: TemplateRef = null; + /** * @hidden * @internal diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts index 1f8323a0010..fe5a127bd2a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts @@ -63,6 +63,15 @@ export class IgxHeaderExpandIndicatorDirective { export class IgxHeaderCollapseIndicatorDirective { } +/** + * @hidden + */ +@Directive({ + selector: '[igxExcelStyleHeaderIcon]' +}) +export class IgxExcelStyleHeaderIconDirective { +} + /** * @hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts index fc40dbdf3e9..5f9d1a426ad 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.module.ts @@ -3,6 +3,7 @@ import { IgxGroupAreaDropDirective, IgxGroupByRowTemplateDirective, IgxRowExpandedIndicatorDirective, + IgxExcelStyleHeaderIconDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, @@ -32,6 +33,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component'; IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective, IgxRowExpandedIndicatorDirective, + IgxExcelStyleHeaderIconDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, @@ -52,6 +54,7 @@ import { IgxGridExpandableCellComponent } from './expandable-cell.component'; IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective, IgxRowExpandedIndicatorDirective, + IgxExcelStyleHeaderIconDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html index f8d030f13eb..03dc15c206d 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html @@ -2,6 +2,10 @@ {{ column.header || column.field }} + + more_vert + + @@ -16,8 +20,13 @@ {{sortingIcon}} - - more_vert - +
+ + + +
+ diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index 3fa8efac331..07b1393973d 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -8,7 +8,9 @@ import { HostListener, Input, NgZone, - OnDestroy + OnDestroy, + TemplateRef, + ViewChild } from '@angular/core'; import { DataType } from '../../data-operations/data-util'; import { SortingDirection } from '../../data-operations/sorting-expression.interface'; @@ -34,6 +36,12 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { private _destroy$ = new Subject(); + /** + * @hidden + */ + @ViewChild('defaultESFHeaderIconTemplate', { read: TemplateRef, static: true }) + protected defaultESFHeaderIconTemplate: TemplateRef; + @Input() public column: IgxColumnComponent; @@ -83,6 +91,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { return null; } + /** + * @hidden + */ + public get iconTemplate() { + return this.grid.excelStyleHeaderIconTemplate || this.defaultESFHeaderIconTemplate; + } + get ascending() { return this.sortDirection === SortingDirection.Asc; } From e81df8de2f6a57b9988ac40051cca941dca353da Mon Sep 17 00:00:00 2001 From: IBarakov Date: Tue, 3 Nov 2020 12:32:08 +0200 Subject: [PATCH 2/6] feat(esf): add test to cover templated icon scenario --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 9 +++++++++ .../src/lib/test-utils/grid-functions.spec.ts | 5 +++++ .../src/lib/test-utils/grid-samples.spec.ts | 4 ++++ 3 files changed, 18 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 714543fd56d..7e29578c277 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -4874,6 +4874,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix); expect(listItems[1].innerText).not.toBe('(Blanks)'); })); + + it('Should use custom excel style filter icon instead of default one.', fakeAsync(() => { + const header = GridFunctions.getColumnHeader('AnotherField', fix); + fix.detectChanges(); + const icon = GridFunctions.getHeaderFilterIcon(header); + fix.detectChanges(); + expect(icon).not.toBeNull(); + expect(icon.nativeElement.textContent.toLowerCase().trim()).toBe('filter_alt'); + })); }); describe('Load values on demand', () => { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index 40ad7fa8df7..d8b8c1364a8 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -66,6 +66,7 @@ const GRID_FOOTER_CLASS = '.igx-grid__tfoot'; const GRID_CONTENT_CLASS = '.igx-grid__tbody-content'; const DISPLAY_CONTAINER = 'igx-display-container'; const SORT_ICON_CLASS = '.sort-icon'; +const FILTER_ICON_CLASS = '.igx-excel-filter__icon'; const SELECTED_COLUMN_CLASS = 'igx-grid__th--selected'; const HOVERED_COLUMN_CLASS = 'igx-grid__th--selectable'; const SELECTED_COLUMN_CELL_CLASS = 'igx-grid__td--column-selected'; @@ -1869,6 +1870,10 @@ export class GridFunctions { return header.query(By.css(SORT_ICON_CLASS)); } + public static getHeaderFilterIcon(header: DebugElement): DebugElement { + return header.query(By.css(FILTER_ICON_CLASS)); + } + public static clickHeaderSortIcon(header: DebugElement) { const sortIcon = header.query(By.css(SORT_ICON_CLASS)); sortIcon.triggerEventHandler('click', new Event('click')); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 61202e380b9..35a3c2dff48 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1201,6 +1201,10 @@ export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridCompone dataType="string" [filters]="customFilter" [sortable]="'true'" [movable]="'true'"> + + filter_alt + + From fbc9e241a5961b2b5511406c589151ee56450f10 Mon Sep 17 00:00:00 2001 From: IBarakov Date: Tue, 3 Nov 2020 12:36:58 +0200 Subject: [PATCH 3/6] chore(*): add changelog entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b5bc7edc9f2..0a0d54f9a7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ # Ignite UI for Angular Change Log All notable changes for each version of this project will be documented in this file. +## 11.0.0 + +### General +- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` + - **Breaking Change** - Added a new directive for re-templating the header filter icon - `IgxExcelStyleHeaderIconDirective`. + ## 10.2.0 ### General From 512eb1447a1a979108eb02e0671388612e42994a Mon Sep 17 00:00:00 2001 From: Ivaylo Barakov Date: Tue, 3 Nov 2020 14:17:00 +0200 Subject: [PATCH 4/6] Update CHANGELOG.md Co-authored-by: Diyan Dimitrov <43128948+DiyanDimitrov@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a0d54f9a7c..963c9fa24ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ All notable changes for each version of this project will be documented in this ### General - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` - - **Breaking Change** - Added a new directive for re-templating the header filter icon - `IgxExcelStyleHeaderIconDirective`. + - Added a new directive for re-templating the Excel style filtering header icon - `IgxExcelStyleHeaderIconDirective`. ## 10.2.0 From 711376865f78ae743f8b016b41c7ef2a74eebad3 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Tue, 3 Nov 2020 17:33:45 +0200 Subject: [PATCH 5/6] feat(esf): add esf header icon template to the dev demo --- src/app/grid-filtering/grid-filtering.sample.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/grid-filtering/grid-filtering.sample.html b/src/app/grid-filtering/grid-filtering.sample.html index c4e0b2f949d..cd1b7657be7 100644 --- a/src/app/grid-filtering/grid-filtering.sample.html +++ b/src/app/grid-filtering/grid-filtering.sample.html @@ -89,6 +89,10 @@

ESF Templates

[dataType]="c.type"> + + filter_alt + +
COLUMN OPERATIONS From 3ef627cf1045361f52fbbcc5b358a28eb08740b4 Mon Sep 17 00:00:00 2001 From: IBarakov Date: Wed, 4 Nov 2020 12:38:30 +0200 Subject: [PATCH 6/6] fix(esf): address PR comments --- .../src/lib/grids/headers/grid-header.component.html | 2 +- .../src/lib/grids/headers/grid-header.component.ts | 2 +- .../lib/grids/hierarchical-grid/hierarchical-grid.component.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html index 03dc15c206d..753aeaeee89 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html @@ -25,7 +25,7 @@ (pointerdown)="$event.stopPropagation()" [ngClass]="filterIconClassName"> - +
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index 07b1393973d..7715f3c709e 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -94,7 +94,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy { /** * @hidden */ - public get iconTemplate() { + public get esfIconTemplate() { return this.grid.excelStyleHeaderIconTemplate || this.defaultESFHeaderIconTemplate; } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 97f148186ea..cd5a7060049 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -350,6 +350,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate; this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate; this.headerExpandIndicatorTemplate = this.rootGrid.headerExpandIndicatorTemplate; + this.excelStyleHeaderIconTemplate = this.rootGrid.excelStyleHeaderIconTemplate; this.hasChildrenKey = this.parentIsland ? this.parentIsland.hasChildrenKey || this.rootGrid.hasChildrenKey : this.rootGrid.hasChildrenKey;