docs(grid): add excel style selector to grid, #1363

IgniteUI · Aug 9, 2019 · 2395c96 · 2395c96
1 parent 70b0727
commit 2395c96
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/...d-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.html b/...d-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.html
@@ -7,19 +7,18 @@
         <igx-column [field]="'CompanyName'" [width]="'20%'" dataType="number"></igx-column>
 
         <ng-template igxHeadSelector let-headContext>
-            <div style="min-width: 60px; height: 100%;" (click)="myGrid.onHeadSelectorClick($event, filteredData)"></div>
+            <div class="header-selector" (click)="myGrid.onHeadSelectorClick($event, filteredData)">
+                <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>
         </ng-template>
 
         <ng-template igxRowSelector let-rowContext>
-            <div style="min-width: 60px; display: flex;">
-                <div style="padding-right: 5px; width: 25px;">
-                    <span>{{ rowContext.index + 1 }}</span>
-                </div>
-                <igx-checkbox [checked]="rowContext.selected"
-                    (change)="!rowContext.selected ? myGrid.selectRows([rowContext.rowID]) : myGrid.deselectRows([rowContext.rowID])"
-                    disableRipple="true" [disableTransitions]="myGrid.disableTransitions"
-                    [aria-label]="myGrid.rowCheckboxAriaLabel" style="padding-right: 10px;">
-                </igx-checkbox>
+            <div class="row-selector"
+                (click)="!rowContext.selected ? myGrid.selectRows([rowContext.rowID]) : myGrid.deselectRows([rowContext.rowID])">
+                <span>{{ rowContext.index + 1 }}</span>
             </div>
         </ng-template>
     </igx-grid>

diff --git a/...d-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.scss b/...d-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.scss
@@ -0,0 +1,56 @@
+@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;
+    justify-content: $justify;
+    align-items: $align;
+    min-width: 50px;
+    cursor: pointer;
+}
+
+.header-selector {
+    @include selector(flex-end, flex-end);
+    height: 100%;
+    padding: 8px;
+
+    &:hover .excel-style-arrow {
+        @include triangle($default-arrow-hover-color);
+    }
+}
+
+.row-selector {
+    @include selector(center, center);
+}
+
+::ng-deep {
+    .igx-grid__cbx-selection {
+        padding: 0;
+    }
+}
+
+.excel-style-arrow {
+    @include triangle($default-arrow-color);
+}
+
+.excel-style-arrow-all {
+    @include triangle($default-arrow-all-color);
+}
+