fix(grids): improve the appearance of the pinning icon in the Custom Column Pinning UI samples - vNext (#3183)

viktorkombov · dkamburov · web-flow · commit f0c7dd0f7476 · 2022-11-25T14:00:41.000+02:00
* fix(grids): improve the pinning icon in Custom Column Pinning UI samples

* fix(grids): add a missing CSS class to the header's text

* fix(grids): set width to all columns

Co-authored-by: Deyan Kamburov &lt;dkamburov@users.noreply.github.com&gt;
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -342,7 +342,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts'],
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts', '/src/app/services/svgIcons.ts'],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxHierarchicalGridModule', 'HGridPinningSampleComponent', 'IgxPreventDocumentScrollModule'],
                 ngDeclarations: ['HGridPinningSampleComponent'],
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -221,7 +221,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
 
         // TreeGrid Column Pinning sample
         configs.push(new Config({
-            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts'],
+            additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts', '/src/app/services/svgIcons.ts'],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridColumnPinningSampleComponent', 'IgxIconModule'],
                 ngDeclarations: ['TreeGridColumnPinningSampleComponent'],
diff --git a/src/app/grid/grid-sample-pinning/grid-pinning.component.html b/src/app/grid/grid-sample-pinning/grid-pinning.component.html
@@ -1,13 +1,15 @@
 <div class="grid__wrapper" style='width: 100%;'>
     <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
-        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
-            [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
+        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width"
+            [pinned]='c.pinned' [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
             <ng-template igxHeader>
                 <div class="title-inner">
-                    <span style="float:left">{{col.header}}</span>
-                    <igx-icon class="pin-icon" family="filtering-icons" name="{{col.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(col)"></igx-icon>
+                    <span class="header-text">{{col.header}}</span>
+                    <igx-icon class="pin-icon" [class.pinned]="col.pinned" [class.unpinned]="!col.pinned"
+                        family="filtering-icons" name="{{col.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(col)">
+                    </igx-icon>
                 </div>
             </ng-template>
         </igx-column>
     </igx-grid>
-</div>
+</div>
diff --git a/src/app/grid/grid-sample-pinning/grid-pinning.component.scss b/src/app/grid/grid-sample-pinning/grid-pinning.component.scss
@@ -1,53 +1,39 @@
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
-
-.header-icon {
-    font-size: 1.1em;
-    width: 1.1em;
-    height: 1.1em;
-    float: right;
-    cursor: pointer;
+.grid__wrapper {
+    margin: 0 auto;
+    padding: 16px;
 }
 
-.header {
-    height: 100%;
+.title-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-:host ::ng-deep .title {
-    width: 100%;
+.header-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .pin-icon {
     margin-left: 8px;
-    font-size: 14px;
     cursor: pointer;
     display: flex;
     align-items: center;
-    color: #999;
+}
+
+.pinned {
+    color: #444;
 
     &:hover {
-        color: #444
+        color: #999;
     }
 }
 
-.igx-grid__th--pinned  {
-    .pin-icon {
-        color: #444;
+.unpinned {
+    color: #999;
 
-        &:hover {
-            color: #999
-        }
+    &:hover {
+        color: #444;
     }
 }
-
-.title-inner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.grid__wrapper {
-    margin: 0 auto;
-    padding: 16px;
-}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.html b/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.html
@@ -1,9 +1,10 @@
 <div class="grid__wrapper">
 <ng-template igxHeader let-column #pinTemplate>
     <div class="title-inner">
-        <span style="float:left">{{column.header || column.field}}</span>
-        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned" family="fas" name="fa-thumbtack"
-            (click)="toggleColumn(column)"></igx-icon>
+        <span class="header-text">{{column.header || column.field}}</span>
+        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned"
+            family="filtering-icons" name="{{column.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(column)">
+        </igx-icon>
     </div>
 </ng-template>
 <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
diff --git a/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.scss b/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.scss
@@ -1,61 +1,39 @@
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
-
-.header-icon {
-    font-size: 1.1em;
-    width: 1.1em;
-    height: 1.1em;
-    float: right;
-    cursor: pointer;
+.grid__wrapper {
+    margin: 0 auto;
+    padding: 16px;
 }
 
-.header {
-    height: 100%;
+.title-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-:host ::ng-deep .title {
-    width: 100%;
+.header-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .pin-icon {
     margin-left: 8px;
-    font-size: 14px;
     cursor: pointer;
     display: flex;
     align-items: center;
-    color: #999;
-
-    &:hover {
-        color: #444
-    }
 }
 
-.igx-grid__th--pinned  {
-    .pin-icon {
-        color: #444;
+.pinned {
+    color: #444;
 
-        &:hover {
-            color: #999
-        }
+    &:hover {
+        color: #999;
     }
 }
 
-.title-inner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
+.unpinned {
+    color: #999;
 
-.photo {
-    vertical-align: middle;
-    max-height: 62px;
-}
-.cell__inner_2 {
-    margin: 1px
+    &:hover {
+        color: #444;
+    }
 }
-
-.grid__wrapper {
-    margin: 0 auto;
-    padding: 16px;
-}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.ts b/src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component.ts
@@ -1,21 +1,35 @@
-import { Component } from '@angular/core';
-import { ColumnType } from 'igniteui-angular';
+
+import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
+import { ColumnType, IgxIconService } from 'igniteui-angular';
 import { CUSTOMERS } from '../../data/hierarchical-data';
+import { icons } from "../../services/svgIcons";
 
+const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 @Component({
     selector: 'app-hierarchical-grid-pinning',
     styleUrls: ['./hierarchical-grid-pinning.component.scss'],
     templateUrl: 'hierarchical-grid-pinning.component.html'
 })
 
-export class HGridPinningSampleComponent {
+export class HGridPinningSampleComponent implements AfterViewInit {
     public localdata;
 
-    constructor() {
+    constructor(private cdr: ChangeDetectorRef, private iconService: IgxIconService) {
         this.localdata = CUSTOMERS;
     }
 
-    public toggleColumn(col: ColumnType) {
-        col.pinned ? col.unpin() : col.pin();
+
+    public ngAfterViewInit() {
+        const pinnedIcons = icons.filter(icon => icon.name === "pin" || icon.name === "unpin");
+        pinnedIcons.forEach(icon => {
+            if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
+                this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
+            }
+        });
+    }
+
+    public toggleColumn(column: ColumnType) {
+        column.pinned ? column.unpin() : column.pin();
+        this.cdr.detectChanges();
     }
 }
diff --git a/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.html b/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.html
@@ -1,8 +1,9 @@
 <ng-template igxHeader let-column #pinTemplate>
     <div class="title-inner">
-        <span style="float:left">{{column.header || column.field}}</span>
-        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned" family="fas" name="fa-thumbtack"
-            (click)="toggleColumn(column)"></igx-icon>
+        <span class="header-text">{{column.header || column.field}}</span>
+        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned"
+            family="filtering-icons" name="{{column.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(column)">
+        </igx-icon>
     </div>
 </ng-template>
 <div class="grid__wrapper">
diff --git a/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.scss b/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.scss
@@ -1,14 +1,22 @@
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
-@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
-
 .grid__wrapper {
-  padding: 16px;
+    margin: 0 auto;
+    padding: 16px;
+}
+
+.title-inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .pin-icon {
     margin-left: 8px;
-    font-size: 14px;
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -29,9 +37,3 @@
         color: #444;
     }
 }
-
-.title-inner {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
diff --git a/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.ts b/src/app/tree-grid/tree-grid-column-pinning-sample/tree-grid-column-pinning-sample.component.ts
@@ -1,21 +1,33 @@
-import { Component, ViewChild } from '@angular/core';
-import { ColumnType, IgxTreeGridComponent } from 'igniteui-angular';
+import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { ColumnType, IgxIconService, IgxTreeGridComponent } from 'igniteui-angular';
 import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
+import { icons } from "../../services/svgIcons";
 
+const FILTERING_ICONS_FONT_SET = "filtering-icons";
 @Component({
   selector: 'app-tree-grid-column-pinning-sample',
   styleUrls: ['./tree-grid-column-pinning-sample.component.scss'],
   templateUrl: './tree-grid-column-pinning-sample.component.html'
 })
-export class TreeGridColumnPinningSampleComponent {
+export class TreeGridColumnPinningSampleComponent implements AfterViewInit {
     @ViewChild('treeGrid', { static: true }) public treeGrid: IgxTreeGridComponent;
     public data: any[];
 
-    constructor() {
+    constructor(private cdr: ChangeDetectorRef, private iconService: IgxIconService) {
         this.data = generateEmployeeDetailedFlatData();
     }
 
+    public ngAfterViewInit() {
+        const pinnedIcons = icons.filter(icon => icon.name === "pin" || icon.name === "unpin");
+        pinnedIcons.forEach(icon => {
+            if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
+                this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
+            }
+        });
+    }
+
     public toggleColumn(column: ColumnType) {
         column.pinned ? column.unpin() : column.pin();
+        this.cdr.detectChanges();
     }
 }
