Skip to content

Commit 77f9a50

Browse files
shadyvdshadyvd
committed
feat(mdc-circular-progress): to show progress in a circular path
1. Removed the "indeterminate" progress - doesn't seem to be working using the MDC HTML template 2. Added feature to make it any size 3. Palette-ization for changing the colour of the stroke Signed-off-by:Vish Desai <shadyvd@hotmail.com>
1 parent 4d63884 commit 77f9a50

File tree

4 files changed

+130
-264
lines changed

4 files changed

+130
-264
lines changed

‎packages/ember-mdc-web/addon/components/mdc-circular-progress/index.hbs

+30-149
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,43 @@
11
{{! template-lint-disable require-presentational-children}}
2-
{{! template-lint-disable simple-unless}}
2+
{{! template-lint-disable no-inline-styles}}
3+
{{! template-lint-disable style-concatenation}}
34
<div
4-
class='mdc-circular-progress {{this.size}}'
5-
{{has-class-if @indeterminate 'mdc-circular-progress--indeterminate'}}
5+
class='mdc-circular-progress'
66
role='progressbar'
7+
style='height:{{this.size}}px; width:{{this.size}}px;'
78
aria-label={{this.label}}
89
aria-valuemin='0'
910
aria-valuemax='1'
1011
aria-valuenow={{@value}}
12+
{{! Re-calculate colours as necessary }}
13+
{{on-args-change this.recalcStyles @palette}}
1114
{{! Store reference to the element for DOM manipulation }}
1215
{{store-element this.storeElement}}
1316
{{! HTML attributes added in the calling template }}
1417
...attributes
1518
>
16-
{{#unless @indeterminate}}
17-
<div class='mdc-circular-progress__determinate-container'>
18-
<svg
19-
class='mdc-circular-progress__determinate-circle-graphic'
20-
viewBox={{this.viewBox}}
21-
xmlns='http://www.w3.org/2000/svg'
22-
>
23-
<circle
24-
class='mdc-circular-progress__determinate-track'
25-
cx={{this.cxCy}}
26-
cy={{this.cxCy}}
27-
r={{this.r}}
28-
stroke-width={{this.majorStrokeWidth}}
29-
></circle>
30-
<circle
31-
class='mdc-circular-progress__determinate-circle'
32-
cx={{this.cxCy}}
33-
cy={{this.cxCy}}
34-
r={{this.r}}
35-
stroke-dasharray={{this.strokeDashArray}}
36-
stroke-dashoffset={{this.strokeDashArray}}
37-
stroke-width={{this.majorStrokeWidth}}
38-
></circle>
39-
</svg>
40-
</div>
41-
{{else}}
42-
<div class='mdc-circular-progress__indeterminate-container'>
43-
{{#unless @multicolor}}
44-
<div class='mdc-circular-progress__spinner-layer'>
45-
<div
46-
class='mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left'
47-
>
48-
<svg
49-
class='mdc-circular-progress__indeterminate-circle-graphic'
50-
viewBox={{this.viewBox}}
51-
xmlns='http://www.w3.org/2000/svg'
52-
>
53-
<circle
54-
cx={{this.cxCy}}
55-
cy={{this.cxCy}}
56-
r={{this.r}}
57-
stroke-dasharray={{this.strokeDashArray}}
58-
stroke-dashoffset={{this.strokeDashOffset}}
59-
stroke-width={{this.majorStrokeWidth}}
60-
></circle>
61-
</svg>
62-
</div>
63-
<div class='mdc-circular-progress__gap-patch'>
64-
<svg
65-
class='mdc-circular-progress__indeterminate-circle-graphic'
66-
viewBox={{this.viewBox}}
67-
xmlns='http://www.w3.org/2000/svg'
68-
>
69-
<circle
70-
cx={{this.cxCy}}
71-
cy={{this.cxCy}}
72-
r={{this.r}}
73-
stroke-dasharray={{this.strokeDashArray}}
74-
stroke-dashoffset={{this.strokeDashOffset}}
75-
stroke-width={{this.minorStrokeWidth}}
76-
></circle>
77-
</svg>
78-
</div>
79-
<div
80-
class='mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right'
81-
>
82-
<svg
83-
class='mdc-circular-progress__indeterminate-circle-graphic'
84-
viewBox={{this.viewBox}}
85-
xmlns='http://www.w3.org/2000/svg'
86-
>
87-
<circle
88-
cx={{this.cxCy}}
89-
cy={{this.cxCy}}
90-
r={{this.r}}
91-
stroke-dasharray={{this.strokeDashArray}}
92-
stroke-dashoffset={{this.strokeDashOffset}}
93-
stroke-width={{this.majorStrokeWidth}}
94-
></circle>
95-
</svg>
96-
</div>
97-
</div>
98-
{{else}}
99-
{{#let (array 1 2 3 4) as |colors|}}
100-
{{#each colors as |color|}}
101-
<div
102-
class='mdc-circular-progress__spinner-layer mdc-circular-progress__color-{{color}}'
103-
>
104-
<div
105-
class='mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left'
106-
>
107-
<svg
108-
class='mdc-circular-progress__indeterminate-circle-graphic'
109-
viewBox={{this.viewBox}}
110-
xmlns='http://www.w3.org/2000/svg'
111-
>
112-
<circle
113-
cx={{this.cxCy}}
114-
cy={{this.cxCy}}
115-
r={{this.r}}
116-
stroke-dasharray={{this.strokeDashArray}}
117-
stroke-dashoffset={{this.strokeDashOffset}}
118-
stroke-width={{this.majorStrokeWidth}}
119-
></circle>
120-
</svg>
121-
</div>
122-
<div class='mdc-circular-progress__gap-patch'>
123-
<svg
124-
class='mdc-circular-progress__indeterminate-circle-graphic'
125-
viewBox={{this.viewBox}}
126-
xmlns='http://www.w3.org/2000/svg'
127-
>
128-
<circle
129-
cx={{this.cxCy}}
130-
cy={{this.cxCy}}
131-
r={{this.r}}
132-
stroke-dasharray={{this.strokeDashArray}}
133-
stroke-dashoffset={{this.strokeDashOffset}}
134-
stroke-width={{this.minorStrokeWidth}}
135-
></circle>
136-
</svg>
137-
</div>
138-
<div
139-
class='mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right'
140-
>
141-
<svg
142-
class='mdc-circular-progress__indeterminate-circle-graphic'
143-
viewBox={{this.viewBox}}
144-
xmlns='http://www.w3.org/2000/svg'
145-
>
146-
<circle
147-
cx={{this.cxCy}}
148-
cy={{this.cxCy}}
149-
r={{this.r}}
150-
stroke-dasharray={{this.strokeDashArray}}
151-
stroke-dashoffset={{this.strokeDashOffset}}
152-
stroke-width={{this.majorStrokeWidth}}
153-
></circle>
154-
</svg>
155-
</div>
156-
</div>
157-
{{/each}}
158-
{{/let}}
159-
{{/unless}}
160-
</div>
161-
{{/unless}}
19+
<div class='mdc-circular-progress__determinate-container'>
20+
<svg
21+
class='mdc-circular-progress__determinate-circle-graphic'
22+
viewBox={{this.viewBox}}
23+
xmlns='http://www.w3.org/2000/svg'
24+
>
25+
<circle
26+
class='mdc-circular-progress__determinate-track'
27+
cx={{this.cxCy}}
28+
cy={{this.cxCy}}
29+
r={{this.radius}}
30+
stroke-width={{this.strokeWidth}}
31+
></circle>
32+
<circle
33+
class='mdc-circular-progress__determinate-circle'
34+
cx={{this.cxCy}}
35+
cy={{this.cxCy}}
36+
r={{this.radius}}
37+
stroke-dasharray={{this.strokeDashArray}}
38+
stroke-dashoffset={{this.strokeDashOffset}}
39+
stroke-width={{this.strokeWidth}}
40+
></circle>
41+
</svg>
42+
</div>
16243
</div>

0 commit comments

Comments
 (0)