docs(grid): clean up numbering sample, #1363 #1417

IgniteUI · Sep 11, 2019 · 1b64263 · 1b64263
1 parent 54b1bb8
commit 1b64263
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/.../grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.html b/.../grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.html
@@ -1,18 +1,18 @@
 <div class="grid__wrapper">
-    <igx-grid #myGrid [data]="data" [primaryKey]="'ID'" [rowSelection]="'multiple'" [cellSelection]="'none'"
+    <igx-grid #myGrid [data]="data" primaryKey="ID" rowSelection="multiple" cellSelection="none"
         [paging]="true" [height]="'530px'" width="100%">
-        <igx-column [field]="'ContactName'" [width]="'20%'"></igx-column>
-        <igx-column [field]="'Country'" [width]="'20%'"></igx-column>
-        <igx-column [field]="'City'" [width]="'20%'" dataType="number"></igx-column>
-        <igx-column [field]="'PostalCode'" [width]="'20%'" dataType="number"></igx-column>
-        <igx-column [field]="'CompanyName'" [width]="'20%'" dataType="number"></igx-column>
+        <igx-column field='ContactName' width="20%"></igx-column>
+        <igx-column field='Country' width="20%"></igx-column>
+        <igx-column field='City' width="20%" dataType="number"></igx-column>
+        <igx-column field='PostalCode' width="20%" dataType="number"></igx-column>
+        <igx-column field='CompanyName' width="20%" dataType="number"></igx-column>
 
         <ng-template igxHeadSelector let-headContext>
-            <div class="header-selector">
-                <div *ngIf="headContext.selectedCount === headContext.totalCount && headContext.totalCount !== 0"
-                    class="excel-style-arrow-all"></div>
-                <div *ngIf="headContext.selectedCount !== headContext.totalCount" class="excel-style-arrow">
-                </div>
+            <div class="header-selector" [ngClass]="{
+                'excel-style-arrow-all': headContext.selectedCount === headContext.totalCount && headContext.totalCount !== 0,
+                'excel-style-arrow': headContext.selectedCount !== headContext.totalCount
+            }">
+                <i class="material-icons">signal_cellular_4_bar</i>
             </div>
         </ng-template>
 

diff --git a/.../grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.scss b/.../grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.scss
@@ -1,22 +1,8 @@
 @import "~igniteui-angular/lib/core/styles/themes/index";
-@include igx-core();
-@include igx-theme($default-palette);
 
 $default-arrow-color: igx-color($default-palette, 'grays', 400);
 $default-arrow-hover-color: igx-color($default-palette, 'grays', 800);
 $default-arrow-all-color: igx-color($default-palette, 'secondary', 100);
-$border-width: 12px;
-$border-style: solid;
-
-@mixin triangle($color) {
-    width: 0;
-    height: 0;
-    border-left: $border-width $border-style transparent;
-    border-top: $border-width $border-style transparent;
-    margin: 2;
-    border-right: $border-width $border-style $color;
-    border-bottom: $border-width $border-style $color;
-}
 
 @mixin selector($justify, $align) {
     display: flex;
@@ -30,10 +16,6 @@ $border-style: solid;
     @include selector(flex-end, flex-end);
     height: 100%;
     padding: 8px;
-
-    &:hover .excel-style-arrow {
-        @include triangle($default-arrow-hover-color);
-    }
 }
 
 .row-selector {
@@ -47,10 +29,12 @@ $border-style: solid;
 }
 
 .excel-style-arrow {
-    @include triangle($default-arrow-color);
+    color: $default-arrow-color;
+    &:hover {
+        color: $default-arrow-hover-color;
+    }
 }
 
 .excel-style-arrow-all {
-    @include triangle($default-arrow-all-color);
+    color: $default-arrow-all-color;
 }
-