fix(grid-pinning-styling): apply custom styles (#3334)

Co-authored-by: Teodosia Hristodorova <52423497+teodosiah@users.noreply.github.com>
IgniteUI · Jun 9, 2023 · b7bc796 · b7bc796
1 parent cfb5b76
commit b7bc796
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 31 deletions.
diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.html
@@ -1,11 +1,12 @@
-<div class="grid__wrapper" style='width: 100%;'>
+<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="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
+                    <igx-icon class="pin-icon" [class.pinned]="col.pinned" [class.unpinned]="!col.pinned"
+                        family="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
                 </div>
             </ng-template>
         </igx-column>

diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.scss b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.scss
@@ -14,42 +14,27 @@ $custom-theme: grid-theme(
 	@include css-vars($custom-theme);
 }
 
-.header-icon {
-    font-size: 1.1em;
-    width: 1.1em;
-    height: 1.1em;
-    float: right;
-    cursor: pointer;
-}
-
-.header {
-    height: 100%;
-}
-
-:host ::ng-deep .title {
-    width: 100%;
-}
-
 .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;
     }
 }
 

diff --git a/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts b/src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts
@@ -3,12 +3,9 @@ import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
 
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    providers: [],
     selector: 'app-grid-sample',
     styleUrls: ['grid-pinning-styling.component.scss'],
     templateUrl: 'grid-pinning-styling.component.html'
-
 })
 
 export class PinningStylingComponent implements OnInit{