skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrew Seguin
2017-09-18 10:28:10 -07:00
committed by Jeremy Elbourn
parent 86ec493c00
commit 6fa9e6f88b
3 changed files with 58 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/sort/sort-header.html
+6 -5
View File
@@ -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
+35 -13
View File
@@ -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
+17 -3
View File
@@ -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))
])
]
})