Skip to content
Permalink
Browse files

feat(module:timeline): add gray as a default color (#3922)

  • Loading branch information...
wendzhue committed Aug 9, 2019
1 parent 6b13faf commit f889f348a74d2f79bb24bf3e7a36adbdd9674972
@@ -1,3 +1,11 @@
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/

export * from './dispatch-events';
export * from './event-objects';
export * from './type-in-element';
@@ -1,15 +1,15 @@
---
order: 1
title:
title:
zh-CN: 圆圈颜色
en-US: Color
---

## zh-CN

圆圈颜色,绿色用于已完成、成功状态,红色表示告警或错误状态,蓝色可表示正在进行或其他默认状态。
圆圈颜色,绿色用于已完成、成功状态,红色表示告警或错误状态,蓝色可表示正在进行或其他默认状态,灰色表示未完成或失效状态。

## en-US
## en-US

Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.

@@ -16,6 +16,16 @@ import { Component } from '@angular/core';
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</nz-timeline-item>
<nz-timeline-item nzColor="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</nz-timeline-item>
<nz-timeline-item nzColor="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</nz-timeline-item>
</nz-timeline>
`
})
@@ -47,5 +47,5 @@ Node of timeline

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| `[nzColor]` | Set the circle's color to `blue`, `red`, `green` or other custom colors (css color) | `string` | `blue` |
| `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` or other custom colors (css color) | `string` | `blue` |
| `[nzDot]` | Customize timeline dot | `string \| TemplateRef<void>` | - |
@@ -48,5 +48,5 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[nzColor]` | 指定圆圈颜色 `blue, red, green`,或自定义的色值(CSS 颜色) | `string` | blue |
| `[nzColor]` | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'`,或自定义的色值 (CSS 颜色) | `string` | blue |
| `[nzDot]` | 自定义时间轴点 | `string \| TemplateRef<void>` | - |
@@ -10,10 +10,11 @@
[class.ant-timeline-item-head-red]="nzColor === 'red'"
[class.ant-timeline-item-head-blue]="nzColor === 'blue'"
[class.ant-timeline-item-head-green]="nzColor === 'green'"
[class.ant-timeline-item-head-gray]="nzColor === 'gray'"
[class.ant-timeline-item-head-custom]="!!nzDot">
<ng-container *nzStringTemplateOutlet="nzDot">{{ nzDot }}</ng-container>
</div>
<div class="ant-timeline-item-content">
<ng-content></ng-content>
</div>
</li>
</li>
@@ -23,6 +23,8 @@ import {

import { NzTimelineMode } from './nz-timeline.component';

export type NzTimelineItemColor = 'red' | 'blue' | 'green' | 'gray' | string;

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
@@ -33,7 +35,7 @@ import { NzTimelineMode } from './nz-timeline.component';
})
export class NzTimelineItemComponent implements OnInit, OnChanges {
@ViewChild('liTemplate', { static: true }) liTemplate: ElementRef;
@Input() nzColor: string = 'blue';
@Input() nzColor: NzTimelineItemColor = 'blue';
@Input() nzDot: string | TemplateRef<void>;

isLast = false;
@@ -56,7 +58,7 @@ export class NzTimelineItemComponent implements OnInit, OnChanges {
}

private tryUpdateCustomColor(): void {
const defaultColors = ['blue', 'red', 'green'];
const defaultColors = ['blue', 'red', 'green', 'gray'];
const circle = this.liTemplate.nativeElement.querySelector('.ant-timeline-item-head');
if (defaultColors.indexOf(this.nzColor) === -1) {
this.renderer.setStyle(circle, 'border-color', this.nzColor);
@@ -121,7 +121,7 @@ describe('timeline', () => {

it('should support custom color', () => {
fixture.detectChanges();
expect(items[0].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('grey');
expect(items[0].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('cyan');
expect(items[1].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('rgb(200, 0, 0)');
expect(items[2].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe(
'rgb(120, 18, 65)'
@@ -168,7 +168,7 @@ export class NzTestTimelineBasicComponent {
@Component({
template: `
<nz-timeline>
<nz-timeline-item [nzColor]="'grey'">Create a services site 2015-09-01</nz-timeline-item>
<nz-timeline-item [nzColor]="'cyan'">Create a services site 2015-09-01</nz-timeline-item>
<nz-timeline-item [nzColor]="'rgb(200, 0, 0)'">Solve initial network problems 2015-09-01</nz-timeline-item>
<nz-timeline-item [nzColor]="'#781241'">Technical testing 2015-09-01</nz-timeline-item>
<nz-timeline-item [nzColor]="'red'">Network problems being solved 2015-09-01</nz-timeline-item>
@@ -19,14 +19,15 @@

&-tail {
position: absolute;
top: 0.75em;
top: 10px;
left: 4px;
height: 100%;
height: calc(100% - 10px);
border-left: @timeline-width solid @timeline-color;
}

&-pending &-head {
font-size: @font-size-sm;
background-color: transparent;
}

&-pending &-tail {
@@ -55,6 +56,11 @@
color: @success-color;
border-color: @success-color;
}

&-gray {
color: @disabled-color;
border-color: @disabled-color;
}
}

&-head-custom {
@@ -141,6 +147,7 @@

&&-pending &-item-last &-item-tail {
display: block;
height: calc(100% - 14px);
border-left: 2px dotted @timeline-color;
}

@@ -150,11 +157,13 @@

&&-reverse &-item-pending {
.@{timeline-prefix-cls}-item-tail {
top: 15px;
display: block;
height: calc(100% - 15px);
border-left: 2px dotted @timeline-color;
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
}
}
}
}

0 comments on commit f889f34

Please sign in to comment.
You can’t perform that action at this time.