Skip to content

Commit

Permalink
feat(module:progress): support custom strokeColor and strokeLinecap (N…
Browse files Browse the repository at this point in the history 
…G-ZORRO#2404)

close NG-ZORRO#2378
  • Loading branch information
@hsuanxyz @vthinkxie
hsuanxyz authored and vthinkxie committed Nov 24, 2018
1 parent 2a7bd29 commit 6ac9a8c
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 22 deletions.
2 changes: 2 additions & 0 deletions components/progress/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - |
2 changes: 2 additions & 0 deletions components/progress/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | - |
16 changes: 12 additions & 4 deletions components/progress/nz-progress.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,16 @@
<div *ngIf="nzType=='line'">
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" [style.width.%]="nzPercent" [style.height.px]="nzStrokeWidth"></div>
<div class="ant-progress-success-bg" [style.width.%]="nzSuccessPercent" [style.height.px]="nzStrokeWidth"></div>
<div class="ant-progress-bg"
[style.width.%]="nzPercent"
[style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
[style.background]="nzStrokeColor"
[style.height.px]="nzStrokeWidth">
</div>
<div class="ant-progress-success-bg"
[style.width.%]="nzSuccessPercent"
[style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
[style.height.px]="nzStrokeWidth"></div>
</div>
</div>
<ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
Expand All @@ -41,9 +49,9 @@
<path
class="ant-progress-circle-path"
[attr.d]="pathString"
stroke-linecap="round"
[attr.stroke-linecap]="nzStrokeLinecap"
fill-opacity="0"
[attr.stroke]="statusColorMap[nzStatus]"
[attr.stroke]="nzStrokeColor || statusColorMap[nzStatus]"
[attr.stroke-width]="nzPercent?nzStrokeWidth:0"
[ngStyle]="strokePathStyle">
</path>
Expand Down
21 changes: 19 additions & 2 deletions components/progress/nz-progress.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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';
Expand All @@ -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) {
Expand Down Expand Up @@ -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';
}
Expand Down Expand Up @@ -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';
Expand Down
84 changes: 68 additions & 16 deletions components/progress/nz-progress.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand Down Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
});
});
});

Expand All @@ -203,7 +245,9 @@ describe('progress', () => {
[nzStatus]="status"
[nzShowInfo]="showInfo"
[nzStrokeWidth]="strokeWidth"
[nzPercent]="percent">
[nzPercent]="percent"
[nzStrokeColor]="strokeColor"
[nzStrokeLinecap]="strokeLinecap">
</nz-progress>
`
})
Expand All @@ -215,6 +259,8 @@ export class NzTestProgressLineComponent {
percent = 0;
successPercent = 0;
showInfo = true;
strokeLinecap = 'round';
strokeColor;
}

@Component({
Expand All @@ -227,7 +273,8 @@ export class NzTestProgressLineComponent {
[nzStatus]="status"
[nzShowInfo]="showInfo"
[nzStrokeWidth]="strokeWidth"
[nzPercent]="percent">
[nzPercent]="percent"
[nzStrokeLinecap]="strokeLinecap">
</nz-progress>
`
})
Expand All @@ -239,6 +286,7 @@ export class NzTestProgressDashBoardComponent {
successPercent = 0;
showInfo = true;
width = 132;
strokeLinecap = 'round';
}

@Component({
Expand All @@ -247,11 +295,15 @@ export class NzTestProgressDashBoardComponent {
<nz-progress
nzType="circle"
[nzGapDegree]="gapDegree"
[nzGapPosition]="gapPosition">
[nzGapPosition]="gapPosition"
[nzStrokeColor]="strokeColor"
[nzStrokeLinecap]="strokeLinecap">
</nz-progress>
`
})
export class NzTestProgressCircleComponent {
gapDegree;
gapPosition;
strokeLinecap = 'round';
strokeColor;
}

0 comments on commit 6ac9a8c

Please sign in to comment.