fix(sort): reverse directions and better animation (#6802)

Author: andrewseguin

src/lib/sort/sort-header.html

@@ -5,12 +5,13 @@
     <ng-content></ng-content>
   </button>
 
-  <div *ngIf="_isSorted()"
-       class="mat-sort-header-arrow"
-       [@indicatorRotate]="_sort.direction">
+  <div *ngIf="_isSorted()" class="mat-sort-header-arrow">
     <div class="mat-sort-header-stem"></div>
-    <div class="mat-sort-header-pointer-left"></div>
-    <div class="mat-sort-header-pointer-right"></div>
+    <div class="mat-sort-header-indicator" [@indicator]="_sort.direction" >
+      <div class="mat-sort-header-pointer-left" [@leftPointer]="_sort.direction"></div>
+      <div class="mat-sort-header-pointer-right" [@rightPointer]="_sort.direction"></div>
+      <div class="mat-sort-header-pointer-middle"></div>
+    </div>
   </div>
 </div>
 

src/lib/sort/sort-header.scss

@@ -1,7 +1,9 @@
 $mat-sort-header-arrow-margin: 6px;
-$mat-sort-header-arrow-container-size: 10px;
-$mat-sort-header-arrow-pointer-length: 8px;
+$mat-sort-header-arrow-container-size: 12px;
+$mat-sort-header-arrow-stem-size: 10px;
+$mat-sort-header-arrow-pointer-length: 6px;
 $mat-sort-header-arrow-thickness: 2px;
+$mat-sort-header-arrow-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);
 
 .mat-sort-header-container {
   display: flex;
@@ -27,9 +29,9 @@ $mat-sort-header-arrow-thickness: 2px;
 .mat-sort-header-arrow {
   height: $mat-sort-header-arrow-container-size;
   width: $mat-sort-header-arrow-container-size;
-  position: relative;
   margin: 0 0 0 $mat-sort-header-arrow-margin;
-  transform: rotate(45deg);
+  position: relative;
+  display: flex;
 
   .mat-sort-header-position-before & {
     margin: 0 $mat-sort-header-arrow-margin 0 0;
@@ -38,26 +40,46 @@ $mat-sort-header-arrow-thickness: 2px;
 
 .mat-sort-header-stem {
   background: currentColor;
-  transform: rotate(135deg);
-  height: $mat-sort-header-arrow-container-size;
+  height: $mat-sort-header-arrow-stem-size;
   width: $mat-sort-header-arrow-thickness;
   margin: auto;
+  display: flex;
+  align-items: center;
 }
 
-.mat-sort-header-pointer-left {
-  background: currentColor;
-  width: $mat-sort-header-arrow-thickness;
-  height: $mat-sort-header-arrow-pointer-length;
+.mat-sort-header-indicator {
+  width: 100%;
+  height: $mat-sort-header-arrow-thickness;
+  display: flex;
+  align-items: center;
   position: absolute;
-  bottom: 0;
-  right: 0;
+  top: 0;
+  transition: $mat-sort-header-arrow-transition;
 }
 
+.mat-sort-header-pointer-middle {
+  margin: auto;
+  height: $mat-sort-header-arrow-thickness;
+  width: $mat-sort-header-arrow-thickness;
+  background: currentColor;
+  transform: rotate(45deg);
+}
+
+.mat-sort-header-pointer-left,
 .mat-sort-header-pointer-right {
   background: currentColor;
   width: $mat-sort-header-arrow-pointer-length;
   height: $mat-sort-header-arrow-thickness;
+  transition: $mat-sort-header-arrow-transition;
   position: absolute;
-  bottom: 0;
+}
+
+.mat-sort-header-pointer-left {
+  transform-origin: right;
+  left: 0;
+}
+
+.mat-sort-header-pointer-right {
+  transform-origin: left;
   right: 0;
 }

src/lib/sort/sort-header.ts

@@ -28,7 +28,10 @@ import {merge} from 'rxjs/observable/merge';
 import {MdSort, MdSortable} from './sort';
 import {MdSortHeaderIntl} from './sort-header-intl';
 import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
+import {AnimationCurves, AnimationDurations} from '../core/animation/animation';
 
+const SORT_ANIMATION_TRANSITION =
+    AnimationDurations.ENTERING + ' ' + AnimationCurves.STANDARD_CURVE;
 
 /**
  * Applies sorting behavior (click to change sort) and styles to an element, including an
@@ -51,10 +54,21 @@ import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('indicatorRotate', [
+    trigger('indicator', [
+      state('asc', style({transform: 'translateY(0px)'})),
+      // 10px is the height of the sort indicator, minus the width of the pointers
+      state('desc', style({transform: 'translateY(10px)'})),
+      transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION))
+    ]),
+    trigger('leftPointer', [
+      state('asc', style({transform: 'rotate(-45deg)'})),
+      state('desc', style({transform: 'rotate(45deg)'})),
+      transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION))
+    ]),
+    trigger('rightPointer', [
       state('asc', style({transform: 'rotate(45deg)'})),
-      state('desc', style({transform: 'rotate(225deg)'})),
-      transition('asc <=> desc', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
+      state('desc', style({transform: 'rotate(-45deg)'})),
+      transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION))
     ])
   ]
 })