Skip to content

Commit bcac8f0

Browse files
annieywannieyw
committed
copy over existing demo to MDC-based demo
1 parent d5548d3 commit bcac8f0

15 files changed

+273
-42
lines changed

‎rollup-globals.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ ROLLUP_GLOBALS = {
4141
"@material/auto-init": "mdc.autoInit",
4242
"@material/base": "mdc.base",
4343
"@material/checkbox": "mdc.checkbox",
44+
"@material/circular-progress": "mdc.circularProgress",
4445
"@material/chips": "mdc.chips",
4546
"@material/dialog": "mdc.dialog",
4647
"@material/dom": "mdc.dom",

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ filegroup(
129129
"@npm//:node_modules/@material/base/dist/mdc.base.js",
130130
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
131131
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
132+
"@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
132133
"@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
133134
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
134135
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",

‎src/dev-app/mdc-progress-spinner/BUILD.bazel

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ ng_module(
1212
deps = [
1313
"//src/material-experimental/mdc-progress-spinner",
1414
"@npm//@angular/router",
15+
"//src/material/button",
16+
"//src/material/button-toggle",
17+
"//src/material/checkbox",
18+
"@npm//@angular/forms",
1519
],
1620
)
1721

‎src/dev-app/mdc-progress-spinner/mdc-progress-spinner-demo-module.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,17 @@ import {NgModule} from '@angular/core';
1010
import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
1111
import {RouterModule} from '@angular/router';
1212
import {MdcProgressSpinnerDemo} from './mdc-progress-spinner-demo';
13+
import {MatButtonModule} from '@angular/material/button';
14+
import {MatCheckboxModule} from '@angular/material/checkbox';
15+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
16+
import {FormsModule} from '@angular/forms';
1317

1418
@NgModule({
1519
imports: [
20+
MatButtonModule,
21+
MatCheckboxModule,
22+
MatButtonToggleModule,
23+
FormsModule,
1624
MatProgressSpinnerModule,
1725
RouterModule.forChild([{path: '', component: MdcProgressSpinnerDemo}]),
1826
],

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,32 @@
1-
<mat-progress-spinner></mat-progress-spinner>
1+
<h1>Determinate</h1>
2+
3+
<div class="demo-progress-spinner-controls">
4+
<p>Value: {{progressValue}}</p>
5+
<button mat-raised-button (click)="step(10)">Increase</button>
6+
<button mat-raised-button (click)="step(-10)">Decrease</button>
7+
<mat-checkbox [(ngModel)]="isDeterminate">Is determinate</mat-checkbox>
8+
</div>
9+
10+
<div class="demo-progress-spinner">
11+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
12+
[value]="progressValue" color="warn" [strokeWidth]="1.6" [diameter]="16"></mat-progress-spinner>
13+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
14+
[value]="progressValue" color="accent" [strokeWidth]="1" [diameter]="32"></mat-progress-spinner>
15+
<mat-progress-spinner [mode]="isDeterminate ? 'determinate' : 'indeterminate'"
16+
[value]="progressValue" color="primary" [diameter]="50"></mat-progress-spinner>
17+
</div>
18+
19+
<h1>Indeterminate</h1>
20+
21+
<mat-button-toggle-group class="demo-progress-spinner-controls" [(ngModel)]="color">
22+
<mat-button-toggle value="primary">Primary Color</mat-button-toggle>
23+
<mat-button-toggle value="accent">Accent Color</mat-button-toggle>
24+
<mat-button-toggle value="warn">Warn Color</mat-button-toggle>
25+
</mat-button-toggle-group>
26+
27+
<div class="demo-progress-spinner">
28+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
29+
<mat-progress-spinner mode="indeterminate" [color]="color"></mat-progress-spinner>
30+
<mat-spinner [color]="color"></mat-spinner>
31+
</div>
32+

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.demo-progress-spinner {
2+
width: 100%;
3+
4+
.mat-mdc-progress-spinner,
5+
.mat-mdc-spinner {
6+
display: inline-block;
7+
}
8+
9+
}
10+
11+
.demo-progress-spinner-controls {
12+
margin: 10px 0;
13+
}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,20 @@
77
*/
88

99
import {Component} from '@angular/core';
10+
import {ThemePalette} from '@angular/material/core';
11+
1012

1113
@Component({
1214
selector: 'mdc-progress-spinner-demo',
1315
templateUrl: 'mdc-progress-spinner-demo.html',
1416
styleUrls: ['mdc-progress-spinner-demo.css'],
1517
})
16-
export class MdcProgressSpinnerDemo {}
18+
export class MdcProgressSpinnerDemo {
19+
progressValue = 60;
20+
color: ThemePalette = 'primary';
21+
isDeterminate = true;
22+
23+
step(val: number) {
24+
this.progressValue = Math.max(0, Math.min(100, val + this.progressValue));
25+
}
26+
}

‎src/material-experimental/mdc-progress-spinner/_progress-spinner-theme.scss

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1-
@import '@material/linear-progress/mixins.import';
1+
@import '@material/circular-progress/mixins.import';
22
@import '@material/theme/functions.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5+
@mixin _mat-mdc-progress-spinner-color($color) {
6+
@include mdc-circular-progress-color($color, $query: $mat-theme-styles-query);
7+
}
8+
59
@mixin mat-mdc-progress-spinner-color($config-or-theme) {
610
$config: mat-get-color-config($config-or-theme);
711
@include mat-using-mdc-theme($config) {
8-
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
12+
.mat-mdc-progress-spinner {
13+
@include _mat-mdc-progress-spinner-color(primary);
14+
15+
&.mat-accent {
16+
@include _mat-mdc-progress-spinner-color(secondary);
17+
}
18+
19+
&.mat-warn {
20+
@include _mat-mdc-progress-spinner-color(error);
21+
}
22+
}
923
}
1024
}
1125

‎src/material-experimental/mdc-progress-spinner/module.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatCommonModule} from '@angular/material/core';
11-
import {MatProgressSpinner} from './progress-spinner';
11+
import {MatProgressSpinner, MatSpinner} from './progress-spinner';
1212

1313
@NgModule({
14-
exports: [MatProgressSpinner, MatCommonModule],
15-
declarations: [MatProgressSpinner],
14+
exports: [MatProgressSpinner, MatSpinner, MatCommonModule],
15+
declarations: [MatProgressSpinner, MatSpinner],
1616
})
1717
export class MatProgressSpinnerModule {
1818
}

‎src/material-experimental/mdc-progress-spinner/progress-spinner.html

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,47 @@
1-
<div class="mdc-circular-progress" style="width:48px;height:48px;" role="progressbar" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1">
1+
<div class="mdc-circular-progress" role="progressbar">
22
<div class="mdc-circular-progress__determinate-container">
3-
<svg class="mdc-circular-progress__determinate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4-
<circle class="mdc-circular-progress__determinate-circle" cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="113.097" stroke-width="4"/>
3+
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__determinate-circle-graphic"
4+
xmlns="http://www.w3.org/2000/svg">
5+
<circle [attr.r]="_circleRadius"
6+
[style.stroke-dasharray.px]="_strokeCircumference"
7+
[style.stroke-dashoffset.px]="_strokeDashOffset"
8+
[style.stroke-width.%]="_circleStrokeWidth"
9+
class="mdc-circular-progress__determinate-circle"
10+
cx="50%" cy="50%"/>
511
</svg>
612
</div>
713
<div class="mdc-circular-progress__indeterminate-container">
814
<div class="mdc-circular-progress__spinner-layer">
915
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
10-
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
11-
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
16+
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
17+
xmlns="http://www.w3.org/2000/svg">
18+
<circle [attr.r]="_circleRadius"
19+
[style.stroke-dasharray.px]="_strokeCircumference"
20+
[style.stroke-dashoffset.px]="_strokeCircumference/2"
21+
[style.stroke-width.%]="_circleStrokeWidth"
22+
cx="50%" cy="50%"/>
1223
</svg>
13-
</div><div class="mdc-circular-progress__gap-patch">
14-
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
15-
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.2"/>
16-
</svg>
17-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
18-
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
19-
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
20-
</svg>
21-
</div>
24+
</div>
25+
<div class="mdc-circular-progress__gap-patch">
26+
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
27+
xmlns="http://www.w3.org/2000/svg">
28+
<circle [attr.r]="_circleRadius"
29+
[style.stroke-dasharray.px]="_strokeCircumference"
30+
[style.stroke-dashoffset.px]="_strokeCircumference/2"
31+
[style.stroke-width.%]="_circleStrokeWidth"
32+
cx="50%" cy="50%"/>
33+
</svg>
34+
</div>
35+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
36+
<svg [attr.viewBox]="_viewBox" class="mdc-circular-progress__indeterminate-circle-graphic"
37+
xmlns="http://www.w3.org/2000/svg">
38+
<circle [attr.r]="_circleRadius"
39+
[style.stroke-dasharray.px]="_strokeCircumference"
40+
[style.stroke-dashoffset.px]="_strokeCircumference/2"
41+
[style.stroke-width.%]="_circleStrokeWidth"
42+
cx="50%" cy="50%"/>
43+
</svg>
44+
</div>
2245
</div>
2346
</div>
2447
</div>

‎src/material-experimental/mdc-progress-spinner/progress-spinner.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,21 @@
33

44

55
@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
6+
7+
.mdc-circular-progress {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
12+
.mat-mdc-progress-spinner {
13+
display: block;
14+
15+
.mdc-circular-progress--indeterminate {
16+
width: 100%;
17+
height: 100%;
18+
}
19+
20+
&:not(._mat-animation-noopable) {
21+
@include mdc-circular-progress-core-styles($query: animation);
22+
}
23+
}

0 commit comments

Comments
 (0)