From 39882cfee21a7c99d1c66269fb145f1fd9c4503c Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 1 Sep 2017 15:14:26 -0700 Subject: [PATCH 1/4] fix(sort): directions are reversed --- src/lib/sort/sort-header.scss | 2 +- src/lib/sort/sort-header.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss index 466e3a1e9e95..6cebc2032d75 100644 --- a/src/lib/sort/sort-header.scss +++ b/src/lib/sort/sort-header.scss @@ -29,7 +29,7 @@ $mat-sort-header-arrow-thickness: 2px; width: $mat-sort-header-arrow-container-size; position: relative; margin: 0 0 0 $mat-sort-header-arrow-margin; - transform: rotate(45deg); + transform: rotate(135deg); .mat-sort-header-position-before & { margin: 0 $mat-sort-header-arrow-margin 0 0; diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts index fd78373b18c6..18e978cb9886 100644 --- a/src/lib/sort/sort-header.ts +++ b/src/lib/sort/sort-header.ts @@ -52,8 +52,8 @@ import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors'; changeDetection: ChangeDetectionStrategy.OnPush, animations: [ trigger('indicatorRotate', [ - state('asc', style({transform: 'rotate(45deg)'})), - state('desc', style({transform: 'rotate(225deg)'})), + state('asc', style({transform: 'rotate(225deg)', top: '2px'})), + state('desc', style({transform: 'rotate(45deg)'})), transition('asc <=> desc', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) ] From 6ca5376caeb16ab9c360d845af890c0da57d12ee Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 5 Sep 2017 14:33:39 -0700 Subject: [PATCH 2/4] different animation type, so material --- src/lib/sort/sort-header.html | 11 ++++---- src/lib/sort/sort-header.scss | 50 +++++++++++++++++++++++++---------- src/lib/sort/sort-header.ts | 20 +++++++++++--- 3 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/lib/sort/sort-header.html b/src/lib/sort/sort-header.html index 710ae6b519b6..bf16458d5038 100644 --- a/src/lib/sort/sort-header.html +++ b/src/lib/sort/sort-header.html @@ -5,12 +5,13 @@ -
+
-
-
+
+
+
+
+
diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss index 6cebc2032d75..0b962ef2ee21 100644 --- a/src/lib/sort/sort-header.scss +++ b/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, 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(135deg); + 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; - right: 0; } + +.mat-sort-header-pointer-left { + transform-origin: right; + left: 0; +} + +.mat-sort-header-pointer-right { + transform-origin: left; + right: 0; +} \ No newline at end of file diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts index 18e978cb9886..02a077e87193 100644 --- a/src/lib/sort/sort-header.ts +++ b/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', [ - state('asc', style({transform: 'rotate(225deg)', top: '2px'})), + 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('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) + transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION)) + ]), + trigger('rightPointer', [ + state('asc', style({transform: 'rotate(45deg)'})), + state('desc', style({transform: 'rotate(-45deg)'})), + transition('asc <=> desc', animate(SORT_ANIMATION_TRANSITION)) ]) ] }) From 3d44462038d26e2f23e2d02541dcce1a1b717ba2 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 5 Sep 2017 14:35:11 -0700 Subject: [PATCH 3/4] add newline --- src/lib/sort/sort-header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss index 0b962ef2ee21..03c39ed440a9 100644 --- a/src/lib/sort/sort-header.scss +++ b/src/lib/sort/sort-header.scss @@ -82,4 +82,4 @@ $mat-sort-header-arrow-transition: 225ms cubic-bezier(0.4, 0.0, 0.2, 1); .mat-sort-header-pointer-right { transform-origin: left; right: 0; -} \ No newline at end of file +} From f040a0e53a31d524a4012582787ed3302819824f Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 5 Sep 2017 14:37:46 -0700 Subject: [PATCH 4/4] make lint happy --- src/lib/sort/sort-header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/sort/sort-header.scss b/src/lib/sort/sort-header.scss index 03c39ed440a9..53d333132555 100644 --- a/src/lib/sort/sort-header.scss +++ b/src/lib/sort/sort-header.scss @@ -3,7 +3,7 @@ $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, 0.2, 1); +$mat-sort-header-arrow-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1); .mat-sort-header-container { display: flex;