Merge pull request #1894 from swimlane/sort-unset-icon

Add a new input for sorted but unset state icon
swimlane · Jul 14, 2020 · e1fdf0b · e1fdf0b
2 parents 9de1c7d + d78e44c
commit e1fdf0b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 20 deletions.
diff --git a/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.html b/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.html
@@ -13,6 +13,7 @@
     [targetMarkerTemplate]="targetMarkerTemplate"
     [sortAscendingIcon]="cssClasses.sortAscending"
     [sortDescendingIcon]="cssClasses.sortDescending"
+    [sortUnsetIcon]="cssClasses.sortUnset"
     [allRowsSelected]="allRowsSelected"
     [selectionType]="selectionType"
     (sort)="onColumnSort($event)"

diff --git a/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/datatable.component.ts
@@ -305,6 +305,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   @Input() cssClasses: any = {
     sortAscending: 'datatable-icon-up',
     sortDescending: 'datatable-icon-down',
+    sortUnset: 'datatable-icon-sort-unset',
     pagerLeftArrow: 'datatable-icon-left',
     pagerRightArrow: 'datatable-icon-right',
     pagerPrevious: 'datatable-icon-prev',

diff --git a/projects/swimlane/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/header/header-cell.component.ts
@@ -48,6 +48,7 @@ export class DataTableHeaderCellComponent {
   @Input() sortType: SortType;
   @Input() sortAscendingIcon: string;
   @Input() sortDescendingIcon: string;
+  @Input() sortUnsetIcon: string;
 
   @Input() isTarget: boolean;
   @Input() targetMarkerTemplate: any;
@@ -176,6 +177,10 @@ export class DataTableHeaderCellComponent {
     this.columnContextmenu.emit({ event: $event, column: this.column });
   }
 
+  ngOnInit() {
+    this.sortClass = this.calcSortClass(this.sortDir);
+  }
+
   calcSortDir(sorts: any[]): any {
     if (sorts && this.column) {
       const sort = sorts.find((s: any) => {
@@ -198,12 +203,13 @@ export class DataTableHeaderCellComponent {
   }
 
   calcSortClass(sortDir: SortDirection): string {
+    if (!this.cellContext.column.sortable) return;
     if (sortDir === SortDirection.asc) {
       return `sort-btn sort-asc ${this.sortAscendingIcon}`;
     } else if (sortDir === SortDirection.desc) {
       return `sort-btn sort-desc ${this.sortDescendingIcon}`;
     } else {
-      return `sort-btn`;
+      return `sort-btn ${this.sortUnsetIcon}`;
     }
   }
 }
diff --git a/projects/swimlane/ngx-datatable/src/lib/components/header/header.component.ts b/projects/swimlane/ngx-datatable/src/lib/components/header/header.component.ts
@@ -54,6 +54,7 @@ import { translateXY } from '../../utils/translate';
           [selectionType]="selectionType"
           [sortAscendingIcon]="sortAscendingIcon"
           [sortDescendingIcon]="sortDescendingIcon"
+          [sortUnsetIcon]="sortUnsetIcon"
           [allRowsSelected]="allRowsSelected"
           (sort)="onSort($event)"
           (select)="select.emit($event)"
@@ -71,6 +72,7 @@ import { translateXY } from '../../utils/translate';
 export class DataTableHeaderComponent implements OnDestroy {
   @Input() sortAscendingIcon: any;
   @Input() sortDescendingIcon: any;
+  @Input() sortUnsetIcon: any;
   @Input() scrollbarH: boolean;
   @Input() dealsWithGroup: boolean;
   @Input() targetMarkerTemplate: any;

diff --git a/src/assets/icons.css b/src/assets/icons.css
@@ -9,7 +9,7 @@
   font-style: normal;
 }
 
-[data-icon]:before {
+[data-icon]::before {
   font-family: 'data-table' !important;
   content: attr(data-icon);
   font-style: normal !important;
@@ -22,8 +22,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-[class^='datatable-icon-']:before,
-[class*=' datatable-icon-']:before {
+[class^='datatable-icon-']::before,
+[class*=' datatable-icon-']::before {
   font-family: 'data-table' !important;
   font-style: normal !important;
   font-weight: normal !important;
@@ -35,51 +35,71 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.datatable-icon-filter:before {
+.datatable-icon-filter::before {
   content: '\62';
 }
-.datatable-icon-collapse:before {
+
+.datatable-icon-collapse::before {
   content: '\61';
 }
-.datatable-icon-expand:before {
+
+.datatable-icon-expand::before {
   content: '\63';
 }
-.datatable-icon-close:before {
+
+.datatable-icon-close::before {
   content: '\64';
 }
-.datatable-icon-up:before {
+
+.datatable-icon-up::before {
   content: '\65';
 }
-.datatable-icon-down:before {
+
+.datatable-icon-down::before {
   content: '\66';
 }
-.datatable-icon-sort:before {
+
+.datatable-icon-sort-unset::before {
+  content: '\63';
+  opacity: 0.5;
+}
+
+.datatable-icon-sort::before {
   content: '\67';
 }
-.datatable-icon-done:before {
+
+.datatable-icon-done::before {
   content: '\68';
 }
-.datatable-icon-done-all:before {
+
+.datatable-icon-done-all::before {
   content: '\69';
 }
-.datatable-icon-search:before {
+
+.datatable-icon-search::before {
   content: '\6a';
 }
-.datatable-icon-pin:before {
+
+.datatable-icon-pin::before {
   content: '\6b';
 }
-.datatable-icon-add:before {
+
+.datatable-icon-add::before {
   content: '\6d';
 }
-.datatable-icon-left:before {
+
+.datatable-icon-left::before {
   content: '\6f';
 }
-.datatable-icon-right:before {
+
+.datatable-icon-right::before {
   content: '\70';
 }
-.datatable-icon-skip:before {
+
+.datatable-icon-skip::before {
   content: '\71';
 }
-.datatable-icon-prev:before {
+
+.datatable-icon-prev::before {
   content: '\72';
 }