Skip to content

Commit 7473ce9

Browse files
andrewseguinandrewseguin
committed
needs review by Matias
1 parent 82bf9ce commit 7473ce9

File tree

3 files changed

+55
-97
lines changed

3 files changed

+55
-97
lines changed

‎src/demo-app/table/table-demo.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,17 @@ <h3>CdkTable Example</h3>
6464

6565
<!-- Column Definition: ID -->
6666
<ng-container cdkColumnDef="userId">
67-
<cdk-header-cell *cdkHeaderCellDef>
67+
<cdk-header-cell *cdkHeaderCellDef
68+
mat-sort-header arrowPosition="before">
6869
ID
6970
</cdk-header-cell>
7071
<cdk-cell *cdkCellDef="let row"> {{row.id}} </cdk-cell>
7172
</ng-container>
7273

7374
<!-- Column Definition: Progress -->
7475
<ng-container cdkColumnDef="progress">
75-
<cdk-header-cell *cdkHeaderCellDef>
76+
<cdk-header-cell *cdkHeaderCellDef
77+
mat-sort-header start="desc">
7678
Progress
7779
</cdk-header-cell>
7880
<cdk-cell *cdkCellDef="let row">
@@ -88,15 +90,16 @@ <h3>CdkTable Example</h3>
8890

8991
<!-- Column Definition: Name -->
9092
<ng-container cdkColumnDef="userName">
91-
<cdk-header-cell *cdkHeaderCellDef>
93+
<cdk-header-cell *cdkHeaderCellDef mat-sort-header>
9294
Name
9395
</cdk-header-cell>
9496
<cdk-cell *cdkCellDef="let row"> {{row.name}} </cdk-cell>
9597
</ng-container>
9698

9799
<!-- Column Definition: Color -->
98100
<ng-container cdkColumnDef="color">
99-
<cdk-header-cell *cdkHeaderCellDef mat-sort-header start="asc">
101+
<cdk-header-cell *cdkHeaderCellDef
102+
mat-sort-header disableClear>
100103
Color
101104
</cdk-header-cell>
102105
<cdk-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </cdk-cell>
@@ -163,8 +166,8 @@ <h3>MatTable Example</h3>
163166
</mat-table>
164167

165168
<mat-paginator #paginator
166-
[length]="_peopleDatabase.data.length"
167-
[pageSize]="10"
169+
[length]="_peopleDatabase.data.length"
170+
[pageSize]="10"
168171
[pageSizeOptions]="[5, 10, 25, 100]">
169172
</mat-paginator>
170173
</div>
@@ -248,13 +251,13 @@ <h3>MatTable With MatTableDataSource Example</h3>
248251

249252
<!-- Column Definition: ID -->
250253
<ng-container cdkColumnDef="userId">
251-
<mat-header-cell *matHeaderCellDef > ID </mat-header-cell>
254+
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
252255
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
253256
</ng-container>
254257

255258
<!-- Column Definition: Progress -->
256259
<ng-container matColumnDef="progress">
257-
<mat-header-cell *matHeaderCellDef > Progress </mat-header-cell>
260+
<mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
258261
<mat-cell *matCellDef="let row">
259262
<div class="demo-progress-stat">{{row.progress}}%</div>
260263
<div class="demo-progress-indicator-container">
@@ -268,13 +271,13 @@ <h3>MatTable With MatTableDataSource Example</h3>
268271

269272
<!-- Column Definition: Name -->
270273
<ng-container matColumnDef="userName">
271-
<mat-header-cell *matHeaderCellDef > Name </mat-header-cell>
274+
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
272275
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
273276
</ng-container>
274277

275278
<!-- Column Definition: Color -->
276279
<ng-container matColumnDef="color">
277-
<mat-header-cell *matHeaderCellDef >Color</mat-header-cell>
280+
<mat-header-cell *matHeaderCellDef mat-sort-header>Color</mat-header-cell>
278281
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
279282
</ng-container>
280283

‎src/lib/sort/sort-header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
[@arrowPosition]="trigger"
1313
(@arrowPosition.start)="animating = true"
1414
(@arrowPosition.done)="animating = false"
15-
[attr.direction]="_getArrowPosition2()">
15+
[@arrowOpacity]="trigger">
1616
<div class="mat-sort-header-stem"></div>
1717
<div class="mat-sort-header-indicator" [@indicator]="_getArrowDirection()" >
1818
<div class="mat-sort-header-pointer-left" [@leftPointer]="_getArrowDirection()"></div>

‎src/lib/sort/sort-header.ts‎

Lines changed: 41 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -72,65 +72,40 @@ const SORT_ANIMATION_TRANSITION =
7272
transition('active-asc <=> active-desc', animate(SORT_ANIMATION_TRANSITION))
7373
]),
7474

75+
// Arrow opacity
76+
trigger('arrowOpacity', [
77+
state('desc-to-active, asc-to-active, active', style({opacity: 1})),
78+
state('desc-to-peek, asc-to-peek, peek', style({opacity: .54})),
79+
state('peek-to-desc, active-to-desc, desc, peek-to-asc, active-to-asc, asc', style({opacity: 0})),
80+
transition('* => asc, * => desc, * => active, * => peek', animate('0ms')),
81+
transition('* <=> *', animate(SORT_ANIMATION_TRANSITION))
82+
]),
83+
7584
// Arrow position (translation)
7685
trigger('arrowPosition', [
7786
// Hidden Above => Peek Center
78-
transition('* => desc-to-peek', animate(SORT_ANIMATION_TRANSITION, keyframes([
79-
style({transform: 'translateY(-25%)', opacity: 0}),
80-
style({transform: 'translateY(0)', opacity: .54})
87+
transition('* => desc-to-peek, * => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
88+
style({transform: 'translateY(-25%)'}),
89+
style({transform: 'translateY(0)'})
8190
]))),
8291
// Peek Center => Hidden Below
83-
transition('* => peek-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([
84-
style({transform: 'translateY(0)', opacity: .54}),
85-
style({transform: 'translateY(25%)', opacity: 0})
92+
transition('* => peek-to-desc, * => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([
93+
style({transform: 'translateY(0)'}),
94+
style({transform: 'translateY(25%)'})
8695
]))),
8796
// Hidden Below => Peek Center
88-
transition('* => asc-to-peek', animate(SORT_ANIMATION_TRANSITION, keyframes([
89-
style({transform: 'translateY(25%)', opacity: 0}),
90-
style({transform: 'translateY(0)', opacity: .54})
97+
transition('* => asc-to-peek, * => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
98+
style({transform: 'translateY(25%)'}),
99+
style({transform: 'translateY(0)'})
91100
]))),
92101
// Peek Center => Hidden Above
93-
transition('active-to-desc => peek-to-asc', animate('0ms')),
94-
transition('* => peek-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([
95-
style({transform: 'translateY(0)', opacity: .54}),
96-
style({transform: 'translateY(-25%)', opacity: 0})
97-
]))),
98-
state('desc-to-peek, asc-to-peek, peek', style({transform: 'translateY(0)', opacity: .54})),
99-
state('peek-to-desc, active-to-desc, desc', style({transform: 'translateY(-25%)', opacity: 0})),
100-
state('peek-to-asc, active-to-asc, asc', style({transform: 'translateY(25%)', opacity: 0})),
101-
102-
// Hidden Above => Active Center
103-
transition('peek => desc-to-active', animate('0ms')),
104-
transition('active => desc-to-active', animate('0ms')),
105-
transition('asc-to-peek => desc-to-active', animate('0ms')),
106-
transition('desc-to-peek => desc-to-active', animate('0ms')),
107-
transition('asc-to-active => desc-to-active', animate('0ms')),
108-
transition('* => desc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
109-
style({transform: 'translateY(-25%)', opacity: 0}),
110-
style({transform: 'translateY(0)', opacity: 1})
111-
]))),
112-
// Active Center => Hidden Below
113-
transition('desc => active-to-desc', animate('0ms')),
114-
transition('peek-to-desc => active-to-desc', animate('0ms')),
115-
transition('* => active-to-desc', animate(SORT_ANIMATION_TRANSITION, keyframes([
116-
style({transform: 'translateY(0)', opacity: 1}),
117-
style({transform: 'translateY(25%)', opacity: 0})
102+
transition('* => peek-to-asc, * => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([
103+
style({transform: 'translateY(0)'}),
104+
style({transform: 'translateY(-25%)'})
118105
]))),
119-
// Hidden Below => Active Center
120-
transition('peek => asc-to-active', animate('0ms')),
121-
transition('active => asc-to-active', animate('0ms')),
122-
transition('asc-to-peek => asc-to-active', animate('0ms')),
123-
transition('desc-to-peek => asc-to-active', animate('0ms')),
124-
transition('* => asc-to-active', animate(SORT_ANIMATION_TRANSITION, keyframes([
125-
style({transform: 'translateY(25%)', opacity: 0}),
126-
style({transform: 'translateY(0)', opacity: 1})
127-
]))),
128-
// Active Center => Hidden Above
129-
transition('* => active-to-asc', animate(SORT_ANIMATION_TRANSITION, keyframes([
130-
style({transform: 'translateY(0)', opacity: 1}),
131-
style({transform: 'translateY(-25%)', opacity: 0})
132-
]))),
133-
state('desc-to-active, asc-to-active, active', style({transform: 'translateY(0)', opacity: 1})),
106+
state('desc-to-peek, asc-to-peek, peek, desc-to-active, asc-to-active, active', style({transform: 'translateY(0)'})),
107+
state('peek-to-desc, active-to-desc, desc', style({transform: 'translateY(-25%)'})),
108+
state('peek-to-asc, active-to-asc, asc', style({transform: 'translateY(25%)'})),
134109
])
135110
]
136111
})
@@ -189,16 +164,26 @@ export class MatSortHeader implements MatSortable {
189164
this._rerenderSubscription = merge(_sort.sortChange, _intl.changes).subscribe(() => {
190165
if (this._isSorted()) {
191166
this._updateArrowDirection();
167+
} if (!this._isSorted()) {
168+
const activeStates = ['active', 'asc-to-active', 'desc-to-active'];
169+
const isActive = activeStates.indexOf(this.trigger) != -1;
170+
if (isActive) {
171+
this._updateTrigger(false, 'active');
172+
}
192173
}
193174

175+
194176
changeDetectorRef.markForCheck();
195177
});
196178
}
197179

198-
_updateTrigger(enter: boolean, source: string) {
199-
const startState = enter ? this._arrowDirection : source;
200-
const endState = enter ? source : this._arrowDirection;
201-
this.trigger = this.animating ? endState : `${startState}-to-${endState}`;
180+
_updateTrigger(enter: boolean, source: string, disableAnimation?: boolean) {
181+
const states = enter ?
182+
[this._arrowDirection, source] :
183+
[source, this._arrowDirection];
184+
185+
disableAnimation = disableAnimation || this.animating;
186+
this.trigger = disableAnimation ? states[1] : `${states[0]}-to-${states[1]}`;
202187
console.log(this.trigger);
203188
}
204189

@@ -231,42 +216,10 @@ export class MatSortHeader implements MatSortable {
231216
this._rerenderSubscription.unsubscribe();
232217
}
233218

234-
_getArrowDisplayState() {
235-
let displayState = 'hidden';
236-
237-
if (this._showIndicatorHint) {
238-
displayState = 'hint';
239-
}
240-
241-
if (this._isSorted()) {
242-
displayState = 'active';
243-
}
244-
245-
return displayState;
246-
}
247-
248-
/**
249-
* Returns the direction that the indicator should be pointing. If it is sorted, then it should
250-
* point in the direction of the current sort. Otherwise it should point towards the first sort
251-
* direction.
252-
*/
253-
_getArrowPosition() {
254-
return `${this._getArrowDisplayState()}-${this._arrowDirection}`;
255-
}
256-
257219
_getArrowDirection() {
258220
return `${this._isSorted() ? 'active-' : ''}${this._arrowDirection}`;
259221
}
260222

261-
/**
262-
* Returns the direction that the indicator should be pointing. If it is sorted, then it should
263-
* point in the direction of the current sort. Otherwise it should point towards the first sort
264-
* direction.
265-
*/
266-
_getArrowPosition2() {
267-
return (this.showIndicatorHint || this._isSorted()) ? 'center' : this._arrowDirection;
268-
}
269-
270223
_updateArrowDirection() {
271224
this._arrowDirection = this.start || this._sort.start;
272225

@@ -278,9 +231,11 @@ export class MatSortHeader implements MatSortable {
278231

279232
/** Triggers the sort on this sort header and removes the indicator hint. */
280233
_handleClick() {
234+
let arrowDisplayed = this.showIndicatorHint || this._isSorted();
235+
281236
this._sort.sort(this);
282237

283-
this._updateTrigger(this._isSorted(), 'active');
238+
this._updateTrigger(this._isSorted(), 'active', arrowDisplayed && this._isSorted());
284239

285240
this._showIndicatorHint = false;
286241
}

0 commit comments

Comments
 (0)