Skip to content

Commit 9b2ed30

Browse files
devversionandrewseguin
devversion
authored and
andrewseguin
committed
docs: test colors for progress components in demo-app (#2841)
* Refactors the progress-bar and progress-spinner demos to have a dynamic `color` binding in the demo. This is useful to test if the colors are properly applied to the progress-bar and `progress-spinner` components. * Also clamps the values in the `progress-bar` and `progress-spinner` demos to make the demo feel better.
1 parent c638e20 commit 9b2ed30

File tree

6 files changed

+70
-43
lines changed

6 files changed

+70
-43
lines changed

‎src/demo-app/progress-bar/progress-bar-demo.html

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
1+
<md-button-toggle-group class="demo-progress-bar-controls" [(ngModel)]="color">
2+
<md-button-toggle value="primary">Primary Color</md-button-toggle>
3+
<md-button-toggle value="accent">Accent Color</md-button-toggle>
4+
<md-button-toggle value="warn">Warn Color</md-button-toggle>
5+
</md-button-toggle-group>
6+
17
<h1>Determinate</h1>
8+
9+
<div class="demo-progress-bar-controls">
10+
<span>Value: {{determinateProgressValue}}</span>
11+
<button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
12+
<button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
13+
</div>
14+
215
<div class="demo-progress-bar-container">
3-
<md-progress-bar mode="determinate"
4-
[value]="determinateProgressValue"
5-
color="primary"
6-
class="demo-progress-bar-margins"></md-progress-bar>
16+
<md-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color">
17+
</md-progress-bar>
718
</div>
8-
<span>Value: {{determinateProgressValue}}</span>
9-
<button md-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
10-
<button md-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
19+
1120
<h1>Buffer</h1>
21+
22+
<div class="demo-progress-bar-controls">
23+
<span>Value: {{bufferProgressValue}}</span>
24+
<button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
25+
<button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
26+
<span class="demo-progress-bar-spacer"></span>
27+
<span>Buffer Value: {{bufferBufferValue}}</span>
28+
<button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
29+
<button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
30+
</div>
31+
1232
<div class="demo-progress-bar-container">
13-
<md-progress-bar [value]="bufferProgressValue"
14-
[bufferValue]="bufferBufferValue"
15-
mode="buffer"
16-
color="warn"
17-
class="demo-progress-bar-margins"></md-progress-bar>
33+
<md-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
34+
[color]="color"></md-progress-bar>
1835
</div>
19-
<span>Value: {{bufferProgressValue}}</span>
20-
<button md-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
21-
<button md-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
22-
<span class="demo-progress-bar-spacer"></span>
23-
<span>Buffer Value: {{bufferBufferValue}}</span>
24-
<button md-raised-button (click)="stepBufferBufferVal(10)">Increase</button>
25-
<button md-raised-button (click)="stepBufferBufferVal(-10)">Decrease</button>
2636

2737
<h1>Indeterminate</h1>
2838
<div class="demo-progress-bar-container">
29-
<md-progress-bar mode="indeterminate"
30-
class="demo-progress-bar-margins"></md-progress-bar>
39+
<md-progress-bar mode="indeterminate" [color]="color"></md-progress-bar>
3140
</div>
3241

3342
<h1>Query</h1>
3443
<div class="demo-progress-bar-container">
35-
<md-progress-bar mode="query"
36-
class="demo-progress-bar-margins"></md-progress-bar>
44+
<md-progress-bar mode="query" [color]="color"></md-progress-bar>
3745
</div>

‎src/demo-app/progress-bar/progress-bar-demo.scss

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
.demo-progress-bar-container {
22
width: 100%;
3-
}
43

5-
.demo-progress-bar-margins {
6-
margin: 20px 0;
4+
md-progress-bar {
5+
margin: 20px 0;
6+
}
77
}
88

99
.demo-progress-bar-spacer {
1010
display: inline-block;
1111
width: 50px;
12+
}
13+
14+
.demo-progress-bar-controls {
15+
margin: 10px 0;
1216
}

‎src/demo-app/progress-bar/progress-bar-demo.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,24 @@ import {Component} from '@angular/core';
1010
styleUrls: ['progress-bar-demo.css'],
1111
})
1212
export class ProgressBarDemo {
13+
color: string = 'primary';
1314
determinateProgressValue: number = 30;
1415
bufferProgressValue: number = 30;
1516
bufferBufferValue: number = 40;
1617

1718
stepDeterminateProgressVal(val: number) {
18-
this.determinateProgressValue += val;
19+
this.determinateProgressValue = this.clampValue(val + this.determinateProgressValue);
1920
}
2021

2122
stepBufferProgressVal(val: number) {
22-
this.bufferProgressValue += val;
23+
this.bufferProgressValue = this.clampValue(val + this.bufferProgressValue);
2324
}
2425

2526
stepBufferBufferVal(val: number) {
26-
this.bufferBufferValue += val;
27+
this.bufferBufferValue = this.clampValue(val + this.bufferBufferValue);
28+
}
29+
30+
private clampValue(value: number) {
31+
return Math.max(0, Math.min(100, value));
2732
}
2833
}

‎src/demo-app/progress-spinner/progress-spinner-demo.html

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
<h1>Determinate</h1>
2+
3+
<div class="demo-progress-spinner-controls">
4+
<p>Value: {{progressValue}}</p>
5+
<button md-raised-button (click)="step(10)">Increase</button>
6+
<button md-raised-button (click)="step(-10)">Decrease</button>
7+
</div>
8+
29
<div class="demo-progress-spinner">
3-
<md-progress-spinner mode="determinate"
4-
[value]="progressValue"
5-
class="mat-primary"></md-progress-spinner>
6-
<md-progress-spinner [value]="progressValue"
7-
color="accent"></md-progress-spinner>
10+
<md-progress-spinner mode="determinate" [value]="progressValue" color="primary"></md-progress-spinner>
11+
<md-progress-spinner [value]="progressValue" color="accent"></md-progress-spinner>
812
</div>
9-
<span>Value: {{progressValue}}</span>
10-
<button md-raised-button (click)="step(10)">Increase</button>
11-
<button md-raised-button (click)="step(-10)">Decrease</button>
1213

14+
<h1>Indeterminate</h1>
1315

16+
<md-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
17+
<md-button-toggle value="primary">Primary Color</md-button-toggle>
18+
<md-button-toggle value="accent">Accent Color</md-button-toggle>
19+
<md-button-toggle value="warn">Warn Color</md-button-toggle>
20+
</md-button-toggle-group>
1421

15-
<h1>Indeterminate</h1>
1622
<div class="demo-progress-spinner">
17-
<md-progress-spinner mode="indeterminate"></md-progress-spinner>
18-
<md-progress-spinner mode="indeterminate"
19-
color="accent"></md-progress-spinner>
20-
<md-spinner></md-spinner>
23+
<md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
24+
<md-progress-spinner mode="indeterminate" [color]="color"></md-progress-spinner>
25+
<md-spinner [color]="color"></md-spinner>
2126
</div>

‎src/demo-app/progress-spinner/progress-spinner-demo.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@
77
}
88

99
}
10+
11+
.demo-progress-spinner-controls {
12+
margin: 10px 0;
13+
}

‎src/demo-app/progress-spinner/progress-spinner-demo.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {Component} from '@angular/core';
99
})
1010
export class ProgressSpinnerDemo {
1111
progressValue: number = 40;
12+
color: string = 'primary';
1213

1314
step(val: number) {
14-
this.progressValue += val;
15+
this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
1516
}
1617

1718
}

0 commit comments

Comments
 (0)