forked from NG-ZORRO/ng-zorro-antd
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(module:timeline): refactor timeline (NG-ZORRO#2515)
close NG-ZORRO#2379 * support alternate positions, alternate and right alternate * support reversing
- Loading branch information
Showing
15 changed files
with
252 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export function reverseChildNodes(parent: HTMLElement): void { | ||
| const children = parent.childNodes; | ||
| let length = children.length; | ||
| if (length) { | ||
| const nodes: Node[] = []; | ||
| children.forEach((node, i) => nodes[ i ] = node); | ||
| while (length--) { | ||
| parent.appendChild(nodes[ length ]); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| order: 3 | ||
| title: | ||
| zh-CN: 交替展现 | ||
| en-US: Alternate | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 内容在时间轴两侧交替出现。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Alternate timeline. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-timeline-alternate', | ||
| template: ` | ||
| <nz-timeline nzMode="alternate"> | ||
| <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item nzColor="green">Solve initial network problems 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item [nzDot]="dotTemplate">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</nz-timeline-item> | ||
| <nz-timeline-item nzColor="red">Network problems being solved 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item> | ||
| </nz-timeline> | ||
| <ng-template #dotTemplate> | ||
| <i nz-icon type="clock-circle-o" style="font-size: 16px;"></i> | ||
| </ng-template> | ||
| ` | ||
| }) | ||
| export class NzDemoTimelineAlternateComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| --- | ||
| order: 5 | ||
| title: | ||
| zh-CN: 右侧时间轴点 | ||
| en-US: Right alternate | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 时间轴可以在内容的右边。 | ||
|
|
||
| ## en-US | ||
|
|
||
| Right alternate timeline. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-timeline-right', | ||
| template: ` | ||
| <nz-timeline nzMode="right"> | ||
| <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item [nzDot]="dotTemplate" nzColor="red">Technical testing 2015-09-01</nz-timeline-item> | ||
| <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item> | ||
| </nz-timeline> | ||
| <ng-template #dotTemplate> | ||
| <i nz-icon type="clock-circle-o" style="font-size: 16px;"></i> | ||
| </ng-template> | ||
| ` | ||
| }) | ||
| export class NzDemoTimelineRightComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,81 +1,57 @@ | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| ChangeDetectorRef, | ||
| Component, | ||
| ElementRef, | ||
| Input, | ||
| Input, OnChanges, | ||
| OnInit, | ||
| Renderer2, | ||
| SimpleChanges, | ||
| TemplateRef, | ||
| ViewChild | ||
| ViewChild, | ||
| ViewEncapsulation | ||
| } from '@angular/core'; | ||
|
|
||
| import { NzTimelineMode } from './nz-timeline.component'; | ||
|
|
||
| @Component({ | ||
| selector : 'nz-timeline-item', | ||
| changeDetection : ChangeDetectionStrategy.OnPush, | ||
| encapsulation : ViewEncapsulation.None, | ||
| preserveWhitespaces: false, | ||
| selector : 'nz-timeline-item, [nz-timeline-item]', | ||
| templateUrl : './nz-timeline-item.component.html' | ||
| }) | ||
| export class NzTimelineItemComponent implements OnInit { | ||
| private _dot: string | TemplateRef<void>; | ||
| private _color: string = 'blue'; | ||
| private _isLast = false; | ||
| export class NzTimelineItemComponent implements OnInit, OnChanges { | ||
| @ViewChild('liTemplate') liTemplate: ElementRef; | ||
| isDotString: boolean; | ||
| classMap; | ||
|
|
||
| set isLast(value: boolean) { | ||
| this._isLast = value; | ||
| if (this.isLast) { | ||
| this.renderer.addClass(this.liTemplate.nativeElement, 'ant-timeline-item-last'); | ||
| } else { | ||
| this.renderer.removeClass(this.liTemplate.nativeElement, 'ant-timeline-item-last'); | ||
| } | ||
| } | ||
| @Input() nzColor: string = 'blue'; | ||
| @Input() nzDot: string | TemplateRef<void>; | ||
|
|
||
| get isLast(): boolean { | ||
| return this._isLast; | ||
| } | ||
| isLast = false; | ||
| position: NzTimelineMode | undefined; | ||
|
|
||
| @Input() | ||
| set nzDot(value: string | TemplateRef<void>) { | ||
| this.isDotString = !(value instanceof TemplateRef); | ||
| this._dot = value; | ||
| } | ||
| constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) {} | ||
|
|
||
| get nzDot(): string | TemplateRef<void> { | ||
| return this._dot; | ||
| ngOnInit(): void { | ||
| this.tryUpdateCustomColor(); | ||
| } | ||
|
|
||
| @Input() | ||
| set nzColor(color: string) { | ||
| this._color = color; | ||
| this.updateClassMap(); | ||
| ngOnChanges(changes: SimpleChanges): void { | ||
| if (changes.nzColor) { | ||
| this.tryUpdateCustomColor(); | ||
| } | ||
| } | ||
|
|
||
| get nzColor(): string { | ||
| return this._color; | ||
| detectChanges(): void { | ||
| this.cdr.detectChanges(); | ||
| } | ||
|
|
||
| updateClassMap(): void { | ||
| // Support custom color | ||
| private tryUpdateCustomColor(): void { | ||
| const defaultColors = [ 'blue', 'red', 'green' ]; | ||
| const circle = this.liTemplate.nativeElement.querySelector('.ant-timeline-item-head'); | ||
| if (defaultColors.indexOf(this._color) === -1) { | ||
| this.renderer.setStyle(circle, 'border-color', this._color); | ||
| if (defaultColors.indexOf(this.nzColor) === -1) { | ||
| this.renderer.setStyle(circle, 'border-color', this.nzColor); | ||
| } else { | ||
| this.renderer.removeStyle(circle, 'border-color'); | ||
| } | ||
|
|
||
| this.classMap = { | ||
| [ 'ant-timeline-item-head-green' ]: this.nzColor === 'green', | ||
| [ 'ant-timeline-item-head-red' ] : this.nzColor === 'red', | ||
| [ 'ant-timeline-item-head-blue' ] : this.nzColor === 'blue' | ||
| }; | ||
| } | ||
|
|
||
| constructor(private renderer: Renderer2) { | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.updateClassMap(); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,24 @@ | ||
| <ul class="ant-timeline" [class.ant-timeline-pending]="nzPending"> | ||
| <ul | ||
| class="ant-timeline" | ||
| [class.ant-timeline-right]="nzMode === 'right'" | ||
| [class.ant-timeline-alternate]="nzMode === 'alternate'" | ||
| [class.ant-timeline-pending]="!!nzPending" | ||
| [class.ant-timeline-reverse]="nzReverse" | ||
| #timeline> | ||
| <!-- User inserted timeline dots. --> | ||
| <ng-content></ng-content> | ||
| <!-- Pending dot. --> | ||
| <li *ngIf="nzPending" class="ant-timeline-item ant-timeline-item-pending"> | ||
| <div class="ant-timeline-item-tail"></div> | ||
| <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-blue"> | ||
| <i nz-icon type="loading"></i> | ||
| <ng-container *nzStringTemplateOutlet="nzPendingDot"> | ||
| {{ nzPendingDot }}<i *ngIf="!nzPendingDot" nz-icon type="loading"></i> | ||
| </ng-container> | ||
| </div> | ||
| <div class="ant-timeline-item-content"> | ||
| <ng-container *ngIf="isPendingString; else pendingTemplate">{{ isPendingBoolean ? '' : nzPending }}</ng-container> | ||
| <ng-template #pendingTemplate> | ||
| <ng-template [ngTemplateOutlet]="nzPending"></ng-template> | ||
| </ng-template> | ||
| <ng-container *nzStringTemplateOutlet="nzPending"> | ||
| {{ isPendingBoolean ? '' : nzPending }} | ||
| </ng-container> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </ul> |
Oops, something went wrong.