From 6ac9a8c84cc47819b4252aa7b0497ff0b25fae62 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Sat, 24 Nov 2018 20:08:05 +0800 Subject: [PATCH] feat(module:progress): support custom strokeColor and strokeLinecap (#2404) close #2378 --- components/progress/doc/index.en-US.md | 2 + components/progress/doc/index.zh-CN.md | 2 + .../progress/nz-progress.component.html | 16 +++- components/progress/nz-progress.component.ts | 21 ++++- components/progress/nz-progress.spec.ts | 84 +++++++++++++++---- 5 files changed, 103 insertions(+), 22 deletions(-) diff --git a/components/progress/doc/index.en-US.md b/components/progress/doc/index.en-US.md index 804540bdde0..46f01d02d85 100644 --- a/components/progress/doc/index.en-US.md +++ b/components/progress/doc/index.en-US.md @@ -29,3 +29,5 @@ If it will take a long time to complete an operation, you can use `Progress` to | `[nzStrokeWidth]` `(nzType=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 | | `[nzType]` | to set the type, options: `line` `circle` `dashboard` | string | `line` | | `[nzWidth]` `(nzType=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 | +| `[nzStrokeLinecap]` | to set the style of the progress linecap | `round` `square` | `round` | +| `[nzStrokeColor]` | color of progress bar | string | - | \ No newline at end of file diff --git a/components/progress/doc/index.zh-CN.md b/components/progress/doc/index.zh-CN.md index ed31fc16f97..d14abdba1ea 100644 --- a/components/progress/doc/index.zh-CN.md +++ b/components/progress/doc/index.zh-CN.md @@ -30,3 +30,5 @@ title: Progress | `[nzStrokeWidth]` `(nzType=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | | `[nzType]` | 类型，可选 `line` `circle` `dashboard` | string | line | | `[nzWidth]` `(nzType=circle)` | 圆形进度条画布宽度，单位 px | number | 132 | +| `[nzStrokeLinecap]` | 进度条端点形状 | `round` `square` | `round` | +| `[nzStrokeColor]` | 进度条颜色 | string | - | \ No newline at end of file diff --git a/components/progress/nz-progress.component.html b/components/progress/nz-progress.component.html index ed9468bf5cd..3c99c43fac5 100644 --- a/components/progress/nz-progress.component.html +++ b/components/progress/nz-progress.component.html @@ -17,8 +17,16 @@
-
-
+
+
+
@@ -41,9 +49,9 @@ diff --git a/components/progress/nz-progress.component.ts b/components/progress/nz-progress.component.ts index 27189772c0f..bf290026491 100644 --- a/components/progress/nz-progress.component.ts +++ b/components/progress/nz-progress.component.ts @@ -7,6 +7,7 @@ import { export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right'; export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal'; export type NzProgressTypeType = 'line' | 'circle' | 'dashboard'; +export type NzProgressStrokeLinecapType = 'round' | 'square'; import { isNotNil } from '../core/util/check'; @Component({ @@ -20,6 +21,7 @@ export class NzProgressComponent implements OnInit { private _percent = 0; private _status: NzProgressStatusType = 'normal'; private _cacheStatus: NzProgressStatusType = 'normal'; + private _strokeLinecap: NzProgressStrokeLinecapType = 'round'; private _strokeWidth = 8; private _size = 'default'; private _type: NzProgressTypeType = 'line'; @@ -42,6 +44,7 @@ export class NzProgressComponent implements OnInit { @Input() nzShowInfo = true; @Input() nzWidth = 132; @Input() nzSuccessPercent = 0; + @Input() nzStrokeColor: string; @Input() set nzSize(value: string) { @@ -164,6 +167,16 @@ export class NzProgressComponent implements OnInit { return this._gapPosition; } + @Input() + set nzStrokeLinecap(value: NzProgressStrokeLinecapType) { + this._strokeLinecap = value; + this.updatePathStyles(); + } + + get nzStrokeLinecap(): NzProgressStrokeLinecapType { + return this._strokeLinecap; + } + get isCirCleStyle(): boolean { return this.nzType === 'circle' || this.nzType === 'dashboard'; } @@ -212,8 +225,12 @@ export class NzProgressComponent implements OnInit { updateIcon(): void { const isCircle = (this.nzType === 'circle' || this.nzType === 'dashboard'); let ret = ''; - if (this.nzStatus === 'success') { ret = 'check'; } - if (this.nzStatus === 'exception') { ret = 'close'; } + if (this.nzStatus === 'success') { + ret = 'check'; + } + if (this.nzStatus === 'exception') { + ret = 'close'; + } if (ret) { if (!isCircle) { ret += '-circle'; diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts index 59919108cb0..ef05769ae0e 100644 --- a/components/progress/nz-progress.spec.ts +++ b/components/progress/nz-progress.spec.ts @@ -29,24 +29,29 @@ describe('progress', () => { }); it('should percent work', () => { fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.width).toBe('0%'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('8px'); expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0%'); testComponent.percent = 50; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 50%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.width).toBe('50%'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('8px'); expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('50%'); testComponent.percent = 100; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 100%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.width).toBe('100%'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('8px'); expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe(''); expect(progress.nativeElement.querySelector('.anticon-check-circle')).toBeDefined(); }); it('should successPercent', () => { fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 0%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.width).toBe('0%'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('8px'); testComponent.successPercent = 50; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 50%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.width).toBe('50%'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('8px'); }); it('should format work', () => { testComponent.format = (percent) => `${percent} percent`; @@ -78,22 +83,38 @@ describe('progress', () => { }); it('should strokeWidth work', () => { fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 8px;'); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 0%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('8px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('8px'); testComponent.strokeWidth = 6; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 6px;'); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 0%; height: 6px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('6px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('6px'); }); it('should size work', () => { fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 8px;'); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 0%; height: 8px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('8px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('8px'); testComponent.size = 'small'; fixture.detectChanges(); expect(progress.nativeElement.firstElementChild.classList).toContain('ant-progress-small'); - expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 6px;'); - expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.cssText).toBe('width: 0%; height: 6px;'); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.height).toBe('6px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.height).toBe('6px'); + }); + it('should strokeLinecap work', () => { + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.borderRadius).toBe('100px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.borderRadius).toBe('100px'); + testComponent.strokeLinecap = 'square'; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.borderRadius).toBe('0px'); + expect(progress.nativeElement.querySelector('.ant-progress-success-bg').style.borderRadius).toBe('0px'); + }); + it('should strokeColor work', () => { + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.background).toBe(''); + testComponent.strokeColor = 'blue'; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-bg').style.background).toBe('blue'); }); }); describe('progress dashboard', () => { @@ -152,6 +173,13 @@ describe('progress', () => { fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-circle-trail').attributes.getNamedItem('stroke-width').value).toBe('10'); }); + it('should strokeLinecap work', () => { + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke-linecap').value).toBe('round'); + testComponent.strokeLinecap = 'square'; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke-linecap').value).toBe('square'); + }); }); describe('progress circle', () => { let fixture; @@ -190,6 +218,20 @@ describe('progress', () => { fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('d').value).toBe(`M 50,50 m 0,-47\n a 47,47 0 1 1 0,94\n a 47,47 0 1 1 0,-94`); }); + it('should strokeLinecap work', () => { + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke-linecap').value).toBe('round'); + testComponent.strokeLinecap = 'square'; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke-linecap').value).toBe('square'); + }); + it('should strokeColor work', () => { + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke').value).toBe('#108ee9'); + testComponent.strokeColor = 'blue'; + fixture.detectChanges(); + expect(progress.nativeElement.querySelector('.ant-progress-circle-path').attributes.getNamedItem('stroke').value).toBe('blue'); + }); }); }); @@ -203,7 +245,9 @@ describe('progress', () => { [nzStatus]="status" [nzShowInfo]="showInfo" [nzStrokeWidth]="strokeWidth" - [nzPercent]="percent"> + [nzPercent]="percent" + [nzStrokeColor]="strokeColor" + [nzStrokeLinecap]="strokeLinecap"> ` }) @@ -215,6 +259,8 @@ export class NzTestProgressLineComponent { percent = 0; successPercent = 0; showInfo = true; + strokeLinecap = 'round'; + strokeColor; } @Component({ @@ -227,7 +273,8 @@ export class NzTestProgressLineComponent { [nzStatus]="status" [nzShowInfo]="showInfo" [nzStrokeWidth]="strokeWidth" - [nzPercent]="percent"> + [nzPercent]="percent" + [nzStrokeLinecap]="strokeLinecap"> ` }) @@ -239,6 +286,7 @@ export class NzTestProgressDashBoardComponent { successPercent = 0; showInfo = true; width = 132; + strokeLinecap = 'round'; } @Component({ @@ -247,11 +295,15 @@ export class NzTestProgressDashBoardComponent { + [nzGapPosition]="gapPosition" + [nzStrokeColor]="strokeColor" + [nzStrokeLinecap]="strokeLinecap"> ` }) export class NzTestProgressCircleComponent { gapDegree; gapPosition; + strokeLinecap = 'round'; + strokeColor; }