feat(module:timeline): custom circle color (NG-ZORRO#1959)

close NG-ZORRO#1956
hsuanxyz · Aug 19, 2018 · e9f7c47 · e9f7c47
1 parent cca19f5
commit e9f7c47
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/components/timeline/doc/index.en-US.md b/components/timeline/doc/index.en-US.md
@@ -36,5 +36,5 @@ Node of timeline
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[nzColor]` | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
+| `[nzColor]` | Set the circle's color to `blue`, `red`, `green` or other custom colors (css color) | string | `blue` |
 | `[nzDot]` | Customize timeline dot | string｜`TemplateRef<void>` | - |
diff --git a/components/timeline/doc/index.zh-CN.md b/components/timeline/doc/index.zh-CN.md
@@ -37,5 +37,5 @@ title: Timeline
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| `[nzColor]` | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
+| `[nzColor]` | 指定圆圈颜色 `blue, red, green`，或自定义的色值(CSS 颜色) | string | blue |
 | `[nzDot]` | 自定义时间轴点 | string｜`TemplateRef<void>` | - |
diff --git a/components/timeline/nz-timeline-item.component.ts b/components/timeline/nz-timeline-item.component.ts
@@ -55,6 +55,15 @@ export class NzTimelineItemComponent implements OnInit {
   }
 
   updateClassMap(): void {
+    // Support custom color
+    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);
+    } 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',

diff --git a/components/timeline/nz-timeline.spec.ts b/components/timeline/nz-timeline.spec.ts
@@ -10,7 +10,7 @@ describe('timeline', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTimelineModule ],
-      declarations: [ NzTestTimelineBasicComponent, NzTestTimelinePendingComponent ]
+      declarations: [ NzTestTimelineBasicComponent, NzTestTimelinePendingComponent, NzTestTimelineCustomColorComponent ]
     });
     TestBed.compileComponents();
   }));
@@ -67,6 +67,25 @@ describe('timeline', () => {
       expect(timeline.nativeElement.querySelector('.ant-timeline-item-pending').innerText).toBe('pending');
     });
   });
+  describe('custom color timeline', () => {
+    let fixture;
+    let testComponent;
+    let timeline;
+    let items;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestTimelineCustomColorComponent);
+      testComponent = fixture.debugElement.componentInstance;
+      timeline = fixture.debugElement.query(By.directive(NzTimelineComponent));
+      items = fixture.debugElement.queryAll(By.directive(NzTimelineItemComponent));
+    });
+    it('should support custom color', () => {
+      fixture.detectChanges();
+      expect(items[0].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('grey');
+      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)'); // hex would be converted to rgb()
+      expect(items[3].nativeElement.querySelector('.ant-timeline-item-head').style.borderColor).toBe('');
+    });
+  });
   describe('pending timeline', () => {
     let fixture;
     let testComponent;
@@ -104,6 +123,19 @@ export class NzTestTimelineBasicComponent {
   last = false;
 }
 
+@Component({
+  selector: 'nz-test-timeline-custom-color',
+  template: `
+    <nz-timeline>
+      <nz-timeline-item [nzColor]="'grey'">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>
+    </nz-timeline>`
+})
+export class NzTestTimelineCustomColorComponent {
+}
+
 @Component({
   selector: 'nz-test-timeline-pending',
   template: `