Skip to content

Commit b288937

Browse files
marcosmouramarcosmoura
authored
Merge pull request #295 from marcosmoura/components/mdProgress
Components/md progress
2 parents 19dea22 + 4bdfcf9 commit b288937

File tree

10 files changed

+339
-9
lines changed

10 files changed

+339
-9
lines changed

‎docs/src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@
9595
<router-link exact to="/components/menu">Menu</router-link>
9696
</md-list-item>
9797

98+
<md-list-item class="md-inset">
99+
<router-link exact to="/components/progress">Progress</router-link>
100+
</md-list-item>
101+
98102
<md-list-item class="md-inset">
99103
<router-link exact to="/components/radio">Radio</router-link>
100104
</md-list-item>

‎docs/src/pages/components/Progress.vue‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<page-content page-title="Components - Progress">
3+
<docs-component>
4+
<div slot="description">
5+
<p>A linear progress indicator should always fill from 0% to 100% and never decrease in value. It should be represented by bars on the edge of a header or sheet that appear and disappear.</p>
6+
<p>The following classes can be applied to change the color palette:</p>
7+
<ul class="md-body-2">
8+
<li><code>md-accent</code></li>
9+
<li><code>md-warn</code></li>
10+
</ul>
11+
</div>
12+
13+
<div slot="api">
14+
<api-table name="md-progress">
15+
<md-table slot="properties">
16+
<md-table-header>
17+
<md-table-row>
18+
<md-table-head>Name</md-table-head>
19+
<md-table-head>Type</md-table-head>
20+
<md-table-head>Description</md-table-head>
21+
</md-table-row>
22+
</md-table-header>
23+
24+
<md-table-body>
25+
<md-table-row>
26+
<md-table-cell>md-indeterminate</md-table-cell>
27+
<md-table-cell><code>Boolean</code></md-table-cell>
28+
<md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
29+
</md-table-row>
30+
31+
<md-table-row>
32+
<md-table-cell>md-progress</md-table-cell>
33+
<md-table-cell><code>Number</code></md-table-cell>
34+
<md-table-cell>Define the current progress of the progress. Default <code>0</code></md-table-cell>
35+
</md-table-row>
36+
</md-table-body>
37+
</md-table>
38+
</api-table>
39+
</div>
40+
41+
<div slot="example">
42+
<example-box card-title="Determinate">
43+
<div class="progress-demo" slot="demo">
44+
<div class="progress-area">
45+
<md-progress :md-progress="progress" v-if="transition"></md-progress>
46+
<md-progress class="md-accent" :md-progress="progress" v-if="transition"></md-progress>
47+
<md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
48+
</div>
49+
50+
<md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
51+
</div>
52+
53+
<div slot="code">
54+
<code-block lang="xml">
55+
&lt;md-progress :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
56+
&lt;md-progress class=&quot;md-accent&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
57+
&lt;md-progress class=&quot;md-warn&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
58+
</code-block>
59+
</div>
60+
</example-box>
61+
62+
<example-box card-title="Indeterminate">
63+
<div class="progress-demo" slot="demo">
64+
<div class="progress-area">
65+
<md-progress md-indeterminate v-if="transition"></md-progress>
66+
<md-progress class="md-accent" md-indeterminate v-if="transition"></md-progress>
67+
<md-progress class="md-warn" md-indeterminate v-if="transition"></md-progress>
68+
</div>
69+
</div>
70+
71+
<div slot="code">
72+
<code-block lang="xml">
73+
&lt;md-progress md-indeterminate&gt;&lt;/md-progress&gt;
74+
&lt;md-progress class=&quot;md-accent&quot; md-indeterminate&gt;&lt;/md-progress&gt;
75+
&lt;md-progress class=&quot;md-warn&quot; md-indeterminate&gt;&lt;/md-progress&gt;
76+
</code-block>
77+
</div>
78+
</example-box>
79+
80+
<example-box card-title="Themes">
81+
<div class="progress-demo" slot="demo">
82+
<div class="progress-area">
83+
<md-progress md-theme="orange" md-indeterminate v-if="transition"></md-progress>
84+
<md-progress md-theme="green" :md-progress="progress" v-if="transition"></md-progress>
85+
<md-progress md-theme="purple" md-indeterminate v-if="transition"></md-progress>
86+
</div>
87+
</div>
88+
89+
<div slot="code">
90+
<code-block lang="xml">
91+
&lt;md-progress md-theme=&quot;orange&quot; md-indeterminate&gt;&lt;/md-progress&gt;
92+
&lt;md-progress md-theme=&quot;green&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
93+
&lt;md-progress md-theme=&quot;purple&quot; md-indeterminate&gt;&lt;/md-progress&gt;
94+
</code-block>
95+
</div>
96+
</example-box>
97+
</div>
98+
</docs-component>
99+
</page-content>
100+
</template>
101+
102+
<style lang="scss" scoped>
103+
.progress-area {
104+
height: 44px;
105+
106+
+ .md-button {
107+
margin: 16px 0 0;
108+
}
109+
}
110+
111+
.md-progress {
112+
margin-bottom: 16px;
113+
}
114+
</style>
115+
116+
<script>
117+
export default {
118+
data: () => ({
119+
progress: 0,
120+
progressInterval: null,
121+
transition: true
122+
}),
123+
methods: {
124+
startProgress() {
125+
this.progressInterval = window.setInterval(() => {
126+
this.progress += 3;
127+
128+
if (this.progress > 100) {
129+
window.clearInterval(this.progressInterval);
130+
}
131+
}, 100);
132+
},
133+
restartProgress() {
134+
this.progress = 0;
135+
this.transition = false;
136+
137+
window.clearInterval(this.progressInterval);
138+
window.setTimeout(() => {
139+
this.transition = true;
140+
this.startProgress();
141+
}, 600);
142+
}
143+
},
144+
mounted() {
145+
this.startProgress();
146+
}
147+
};
148+
</script>

‎docs/src/routes.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const InkRipple = (resolve) => require(['./pages/components/InkRipple'], resolve
2121
const Input = (resolve) => require(['./pages/components/Input'], resolve);
2222
const List = (resolve) => require(['./pages/components/List'], resolve);
2323
const Menu = (resolve) => require(['./pages/components/Menu'], resolve);
24+
const Progress = (resolve) => require(['./pages/components/Progress'], resolve);
2425
const Radio = (resolve) => require(['./pages/components/Radio'], resolve);
2526
const Select = (resolve) => require(['./pages/components/Select'], resolve);
2627
const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve);
@@ -146,6 +147,11 @@ const components = [
146147
name: 'components:menu',
147148
component: Menu
148149
},
150+
{
151+
path: '/components/progress',
152+
name: 'components:progress',
153+
component: Progress
154+
},
149155
{
150156
path: '/components/radio',
151157
name: 'components:radio',

‎src/components/mdProgress/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import mdProgress from './mdProgress.vue';
2+
import mdProgressTheme from './mdProgress.theme';
3+
4+
export default function install(Vue) {
5+
Vue.component('md-progress', Vue.extend(mdProgress));
6+
7+
Vue.material.styles.push(mdProgressTheme);
8+
}

‎src/components/mdProgress/mdProgress.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@import '../../core/stylesheets/variables.scss';
2+
3+
.md-progress {
4+
width: 100%;
5+
height: 4px;
6+
position: relative;
7+
overflow: hidden;
8+
transition: $swift-ease-out;
9+
10+
&.md-indeterminate .md-progress-track {
11+
right: 0;
12+
13+
&:before,
14+
&:after {
15+
position: absolute;
16+
top: 0;
17+
bottom: 0;
18+
left: 0;
19+
will-change: left, right;
20+
content: '';
21+
}
22+
23+
&:before {
24+
animation: progress-indeterminate 2.3s cubic-bezier(.65, .815, .735, .395) infinite;
25+
}
26+
27+
&:after {
28+
animation: progress-indeterminate-short 2.3s cubic-bezier(.165, .84, .44, 1) infinite;
29+
animation-delay: 1.15s;
30+
}
31+
}
32+
33+
&.md-progress-enter,
34+
&.md-progress-leave-active {
35+
opacity: 0;
36+
transform: scaleY(0) translateZ(0);
37+
}
38+
39+
&.md-progress-enter-active {
40+
transform: scaleY(1) translateZ(0);
41+
}
42+
}
43+
44+
.md-progress-track {
45+
position: absolute;
46+
top: 0;
47+
bottom: 0;
48+
left: 0;
49+
transition: $swift-ease-out;
50+
}
51+
52+
@keyframes progress-indeterminate {
53+
0% {
54+
right: 100%;
55+
left: -35%;
56+
}
57+
58+
60% {
59+
right: -100%;
60+
left: 100%;
61+
}
62+
63+
100% {
64+
right: -100%;
65+
left: 100%;
66+
}
67+
}
68+
69+
@keyframes progress-indeterminate-short {
70+
0% {
71+
right: 100%;
72+
left: -200%;
73+
}
74+
75+
60% {
76+
right: -8%;
77+
left: 107%;
78+
}
79+
80+
100% {
81+
right: -8%;
82+
left: 107%;
83+
}
84+
}

‎src/components/mdProgress/mdProgress.theme‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.THEME_NAME {
2+
&.md-progress {
3+
background-color: #{'PRIMARY-COLOR-0.38'};
4+
5+
&:not(.md-indeterminate) .md-progress-track {
6+
background-color: #{'PRIMARY-COLOR'};
7+
}
8+
9+
.md-progress-track {
10+
&:after,
11+
&:before {
12+
background-color: #{'PRIMARY-COLOR'};
13+
}
14+
}
15+
16+
&.md-accent {
17+
background-color: #{'ACCENT-COLOR-0.38'};
18+
19+
&:not(.md-indeterminate) .md-progress-track {
20+
background-color: #{'ACCENT-COLOR'};
21+
}
22+
23+
.md-progress-track {
24+
&:after,
25+
&:before {
26+
background-color: #{'ACCENT-COLOR'};
27+
}
28+
}
29+
}
30+
31+
&.md-warn {
32+
background-color: #{'WARN-COLOR-0.38'};
33+
34+
&:not(.md-indeterminate) .md-progress-track {
35+
background-color: #{'WARN-COLOR'};
36+
}
37+
38+
.md-progress-track {
39+
&:after,
40+
&:before {
41+
background-color: #{'WARN-COLOR'};
42+
}
43+
}
44+
}
45+
}
46+
}

‎src/components/mdProgress/mdProgress.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<transition name="md-progress" appear>
3+
<div class="md-progress" :class="[themeClass, classes]">
4+
<div class="md-progress-track" :style="styles"></div>
5+
</div>
6+
</transition>
7+
</template>
8+
9+
<style lang="scss" src="./mdProgress.scss"></style>
10+
11+
<script>
12+
import theme from '../../core/components/mdTheme/mixin';
13+
14+
export default {
15+
props: {
16+
mdIndeterminate: Boolean,
17+
mdProgress: {
18+
type: Number,
19+
default: 0
20+
}
21+
},
22+
mixins: [theme],
23+
computed: {
24+
classes() {
25+
return {
26+
'md-indeterminate': this.mdIndeterminate
27+
};
28+
},
29+
styles() {
30+
if (!this.mdIndeterminate) {
31+
return {
32+
width: this.mdProgress + '%'
33+
};
34+
}
35+
}
36+
}
37+
};
38+
</script>

‎src/components/mdSpinner/mdSpinner.theme‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
.THEME_NAME {
22
&.md-spinner {
33
.md-spinner-path {
4-
stroke: #{'PRIMARY-COLOR'}
4+
stroke: #{'PRIMARY-COLOR'};
55
}
66

77
&.md-accent {
88
.md-spinner-path {
9-
stroke: #{'ACCENT-COLOR'}
9+
stroke: #{'ACCENT-COLOR'};
1010
}
1111
}
1212

1313
&.md-warn {
1414
.md-spinner-path {
15-
stroke: #{'WARN-COLOR'}
15+
stroke: #{'WARN-COLOR'};
1616
}
1717
}
1818
}

‎src/components/mdSpinner/mdSpinner.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@
5757
5858
return `${progress}, 200`;
5959
}
60-
},
61-
data: () => ({
62-
63-
}),
64-
methods: {
65-
6660
}
6761
};
6862
</script>

0 commit comments

Comments
 (0)