Skip to content

Commit 19d742b

Browse files
marcosmouramarcosmoura
authored
comp(MdProgress): create progress bar and progress spinner (#34)
* comp(MdProgressBar): create progress bar with indeterminate state * comp(MdProgressBar): improve test execution * comp(MdProgressBar): remove example * comp(MdProgressBar): misc fixes * comp(MdProgressBar): improve test execution * comp(MdProgressSpinner): create progress spinner * comp(MdProgressSpinner): rename files to avoid name colision * docs(MdProgress): add api table * docs(MdProgress): add text descriptions * docs(MdProgress): small improvements
1 parent 587b5ba commit 19d742b

24 files changed

+1079
-4
lines changed

‎build/new-component.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,12 +188,12 @@ if (!test('-e', docsPath)) {
188188
writeToFile(getExampleFile(name), 'Example.vue')
189189

190190
cd(rootDir)
191-
sed('-i', 'export const routes = \\[', `export const routes = [
191+
sed("-i", "export const routes = \\[", `export const routes = [
192192
{
193193
path: '/components/${compName}',
194194
name: 'components/${compName}',
195-
component: () => import(/* webpackChunkName: "${compName}" */ './pages/Components/${singleName}/${singleName}.vue')
196-
},`, docsRoutePath)
195+
page: 'Components/singleName/singleName.vue'
196+
},`, docsRoutePath);
197197

198198
sed('-i', '<router-link to="/components/app">', `<router-link to="/components/${compName}">{{ $t('pages.${camelCasedName}.title') }}</router-link>\n <router-link to="/components/app">`, navPath)
199199
} else {

‎docs/app/components/CodeExample.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
$color: md-get-palette-color(grey, 700);
7575
7676
.code-example {
77-
margin: 24px 0;
77+
margin: 36px 0;
7878
}
7979
8080
.md-toolbar.md-primary {

‎docs/app/components/PageContainer.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,5 +75,9 @@
7575
line-height: 1.45em;
7676
}
7777
}
78+
79+
p + .code-example {
80+
margin-top: 1em;
81+
}
7882
}
7983
</style>

‎docs/app/i18n/en-US.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,17 @@ export default {
133133
pickers: {
134134
title: 'Pickers'
135135
},
136+
progress: {
137+
title: 'Progress'
138+
},
139+
progressBar: {
140+
title: 'Progress Bar',
141+
nav: 'Bar'
142+
},
143+
progressSpinner: {
144+
title: 'Progress Spinner',
145+
nav: 'Spinner'
146+
},
136147
datepicker: {
137148
title: 'Datepicker',
138149
nav: 'Date'

‎docs/app/pages/Components/ProgressBar/ProgressBar.vue

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<example src="./examples/ProgressBarIndeterminate.vue" />
2+
<example src="./examples/ProgressBarDeterminate.vue" />
3+
<example src="./examples/ProgressBarBuffer.vue" />
4+
<example src="./examples/ProgressBarQuery.vue" />
5+
6+
<template>
7+
<page-container centered :title="$t('pages.progressBar.title')">
8+
<div class="page-container-section">
9+
<p>Progress indicators are visual indications of an app loading content.</p>
10+
<p>Progress bars have 4 types for each operation that your application may need: Determinate, Indeterminate, Query or Buffer.</p>
11+
</div>
12+
13+
<div class="page-container-section">
14+
<h2>Progress Bar</h2>
15+
16+
<p>When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.</p>
17+
<code-example title="Determinate" :component="examples['progress-bar-determinate']" />
18+
</div>
19+
20+
<div class="page-container-section">
21+
<p>When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.</p>
22+
<code-example title="Indeterminate" :component="examples['progress-bar-indeterminate']" />
23+
</div>
24+
25+
<div class="page-container-section">
26+
<p>When dealing with media content like streaming videos we can use progress bars to show the buffering progress indicator on a video.</p>
27+
<code-example title="Buffer" :component="examples['progress-bar-buffer']" />
28+
</div>
29+
30+
<div class="page-container-section">
31+
<p>When searching or filtering a large amount of data, we can show a query progress bar. This will tell the user that some content is being retrieved.</p>
32+
<code-example title="Query" :component="examples['progress-bar-query']" />
33+
34+
<api-item title="API - md-progress-bar">
35+
<p>The following options can be applied to all progress bars:</p>
36+
37+
<api-table :headings="props.headings" :props="props.props" slot="props" />
38+
</api-item>
39+
</div>
40+
</page-container>
41+
</template>
42+
43+
<script>
44+
import examples from 'docs-mixins/docsExample'
45+
46+
export default {
47+
name: 'ProgressBar',
48+
mixins: [examples],
49+
data: () => ({
50+
props: {
51+
headings: ['Name', 'Description', 'Default'],
52+
props: [
53+
{
54+
name: 'md-mode',
55+
type: 'String',
56+
description: 'Set the mode the progress. See below the detailed description of each mode.',
57+
defaults: 'determinate'
58+
},
59+
{
60+
offset: true,
61+
name: 'md-mode="determinate"',
62+
type: 'String',
63+
description: 'The default mode. Works along with <code>md-value</code> prop. Apply a 0% to 100% loading bar.',
64+
defaults: '-'
65+
},
66+
{
67+
offset: true,
68+
name: 'md-mode="indeterminate"',
69+
type: 'String',
70+
description: 'Create a indeterminate loading bar',
71+
defaults: '-'
72+
},
73+
{
74+
offset: true,
75+
name: 'md-mode="query"',
76+
type: 'String',
77+
description: 'Create a loading bar for queries. Useful when retrieving a lot of contents.',
78+
defaults: '-'
79+
},
80+
{
81+
offset: true,
82+
name: 'md-mode="buffer"',
83+
type: 'String',
84+
description: 'Create a loading bar with a buffer. Commonly used in videos.',
85+
defaults: '-'
86+
},
87+
{
88+
name: 'md-value',
89+
type: 'Number',
90+
description: 'The current progress amount. From 0 to 100.',
91+
defaults: 'null'
92+
},
93+
{
94+
name: 'md-buffer',
95+
type: 'Number',
96+
description: 'The current buffer amount. From 0 to 100.',
97+
defaults: 'null'
98+
}
99+
]
100+
}
101+
})
102+
}
103+
</script>

‎docs/app/pages/Components/ProgressBar/examples/ProgressBarBuffer.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div>
3+
<md-progress-bar md-mode="buffer" :md-value="amount" :md-buffer="buffer"></md-progress-bar>
4+
<md-progress-bar class="md-accent" md-mode="buffer" :md-value="amount" :md-buffer="buffer"></md-progress-bar>
5+
<div>
6+
Progress <br>
7+
<input type="range" v-model.number="amount"> {{ amount }}%
8+
</div>
9+
10+
<div>
11+
Buffer <br>
12+
<input type="range" v-model.number="buffer"> {{ buffer }}%
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'ProgressBarBuffer',
20+
data: () => ({
21+
amount: 25,
22+
buffer: 40
23+
})
24+
}
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
.md-progress-bar {
29+
margin: 24px;
30+
}
31+
</style>

‎docs/app/pages/Components/ProgressBar/examples/ProgressBarDeterminate.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<md-progress-bar md-mode="determinate" :md-value="amount"></md-progress-bar>
4+
<md-progress-bar class="md-accent" md-mode="determinate" :md-value="amount"></md-progress-bar>
5+
<input type="range" v-model.number="amount"> {{ amount }}%
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'ProgressBarDeterminate',
12+
data: () => ({
13+
amount: 0
14+
})
15+
}
16+
</script>
17+
18+
<style lang="scss" scoped>
19+
.md-progress-bar {
20+
margin: 24px;
21+
}
22+
</style>

‎docs/app/pages/Components/ProgressBar/examples/ProgressBarIndeterminate.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<md-progress-bar md-mode="indeterminate"></md-progress-bar>
4+
<md-progress-bar class="md-accent" md-mode="indeterminate"></md-progress-bar>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'ProgressBarIndeterminate'
11+
}
12+
</script>
13+
14+
<style lang="scss" scoped>
15+
.md-progress-bar {
16+
margin: 24px;
17+
}
18+
</style>

‎docs/app/pages/Components/ProgressBar/examples/ProgressBarQuery.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<md-progress-bar md-mode="query"></md-progress-bar>
4+
<md-progress-bar class="md-accent" md-mode="query"></md-progress-bar>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'ProgressBarQuery'
11+
}
12+
</script>
13+
14+
<style lang="scss" scoped>
15+
.md-progress-bar {
16+
margin: 24px;
17+
}
18+
</style>

‎docs/app/pages/Components/ProgressSpinner/ProgressSpinner.vue

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<example src="./examples/ProgressSpinnerIndeterminate.vue" />
2+
<example src="./examples/ProgressSpinnerDeterminate.vue" />
3+
<example src="./examples/ProgressSpinnerSizes.vue" />
4+
5+
<template>
6+
<page-container centered :title="$t('pages.progressSpinner.title')">
7+
<div class="page-container-section">
8+
<p>Progress indicators are visual indications of an app loading content.</p>
9+
<p>Progress spinners have 2 types for each operation that your application may need: Determinate or Indeterminate.</p>
10+
</div>
11+
12+
<div class="page-container-section">
13+
<h2>Progress Spinner</h2>
14+
15+
<p>When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.</p>
16+
<code-example title="Determinate" :component="examples['progress-spinner-determinate']" />
17+
</div>
18+
19+
<div class="page-container-section">
20+
<p>When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.</p>
21+
<code-example title="Indeterminate" :component="examples['progress-spinner-indeterminate']" />
22+
</div>
23+
24+
<div class="page-container-section">
25+
<p>You can always change the sizes and stroke with of a spinner to suit your needs:</p>
26+
<code-example title="Sizes" :component="examples['progress-spinner-sizes']" />
27+
28+
<api-item title="API - md-progress-spinner">
29+
<p>The following options can be applied to all progress spinners:</p>
30+
31+
<api-table :headings="props.headings" :props="props.props" slot="props" />
32+
</api-item>
33+
</div>
34+
</page-container>
35+
</template>
36+
37+
<script>
38+
import examples from 'docs-mixins/docsExample'
39+
40+
export default {
41+
name: 'ProgressSpinner',
42+
mixins: [examples],
43+
data: () => ({
44+
props: {
45+
headings: ['Name', 'Description', 'Default'],
46+
props: [
47+
{
48+
name: 'md-mode',
49+
type: 'String',
50+
description: 'Set the mode the progress. See below the detailed description of each mode.',
51+
defaults: 'determinate'
52+
},
53+
{
54+
offset: true,
55+
name: 'md-mode="determinate"',
56+
type: 'String',
57+
description: 'The default mode. Works along with <code>md-value</code> prop. Apply a 0% to 100% loading spinner.',
58+
defaults: '-'
59+
},
60+
{
61+
offset: true,
62+
name: 'md-mode="indeterminate"',
63+
type: 'String',
64+
description: 'Create a indeterminate loading spinner',
65+
defaults: '-'
66+
},
67+
{
68+
name: 'md-value',
69+
type: 'Number',
70+
description: 'The current progress amount. From 0 to 100.',
71+
defaults: 'null'
72+
},
73+
{
74+
name: 'md-diameter',
75+
type: 'Number',
76+
description: 'The diameter of the spinner in px.',
77+
defaults: '60'
78+
},
79+
{
80+
name: 'md-stroke',
81+
type: 'Number',
82+
description: 'The stroke size.',
83+
defaults: '6'
84+
}
85+
]
86+
}
87+
})
88+
}
89+
</script>

0 commit comments

Comments
 (0)