feat(Sort): better visual representation a column is sortable

ISSUES CLOSED: #1739
GetTerminus · Oct 25, 2019 · bd4955c · bd4955c
1 parent 9a071ea
commit bd4955c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/terminus-ui/sort/src/sort-header.component.html b/terminus-ui/sort/src/sort-header.component.html
@@ -10,6 +10,11 @@
   >
     <ng-content></ng-content>
 
+    <ts-icon
+      class="ts-sort-header-container__icon"
+      [class.ts-sort-header-container__icon--hidden]="_isSorted()"
+    >swap_vert</ts-icon>
+
     <div
       class="ts-sort-header-arrow"
       *ngIf="_isSorted()"

diff --git a/terminus-ui/sort/src/sort-header.component.scss b/terminus-ui/sort/src/sort-header.component.scss
@@ -19,10 +19,28 @@ $ts-sort-header-arrow-transition: 225ms cubic-bezier(.4, 0, .2, 1);
   align-items: center;
   cursor: cursor(pointer);
   display: flex;
+  // Set up for icon
+  position: relative;
 
   .ts-sort-header-disabled & {
     cursor: cursor(default);
   }
+
+  // Double arrow icon to signify sortability
+  &__icon {
+    opacity: 1;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(40%, -36%);
+    transition: opacity 200ms ease-out 200ms;
+
+    // Sort direction shown via Angular animation so we hide this icon
+    &--hidden {
+      opacity: 0;
+      transition: opacity 100ms ease-out 100ms;
+    }
+  }
 }
 
 // Class added if arrow is before text (defaults to after)

diff --git a/terminus-ui/sort/src/sort.directive.ts b/terminus-ui/sort/src/sort.directive.ts
@@ -73,12 +73,6 @@ export interface TsSortState {
 }
 
 
-// Boilerplate for applying mixins to TsSort.
-// export class TsSortBase {}
-// eslint-disable-next-line no-underscore-dangle
-// export const _TsSortMixinBase = mixinDisabled(TsSortBase);
-
-
 /**
  * Container for TsSortables to manage the sort state and provide default sort parameters
  *
@@ -119,7 +113,7 @@ export class TsSortDirective implements OnChanges, OnDestroy {
   /**
    * The direction to set when an TsSortable is initially sorted.
    *
-   * May be overriden by the TsSortable's sort start.
+   * May be overridden by the TsSortable's sort start.
    */
   @Input('tsSortStart')
   public start: 'asc' | 'desc' = 'asc';
@@ -142,7 +136,7 @@ export class TsSortDirective implements OnChanges, OnDestroy {
   /**
    * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
    *
-   * May be overriden by the TsSortable's disable clear input.
+   * May be overridden by the TsSortable's disable clear input.
    */
   @Input('tsSortDisableClear')
   public disableClear = false;

diff --git a/terminus-ui/sort/src/sort.module.ts b/terminus-ui/sort/src/sort.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { TsIconModule } from '@terminus/ui/icon';
 
 import { TS_SORT_HEADER_INTL_PROVIDER } from './sort-header-intl';
 import { TsSortHeaderComponent } from './sort-header.component';
@@ -19,6 +20,7 @@ export * from './sort.directive';
 @NgModule({
   imports: [
     CommonModule,
+    TsIconModule,
   ],
   providers: [
     TS_SORT_HEADER_INTL_PROVIDER,