Skip to content

Commit 58564e4

Browse files
marcosmouramarcosmoura
committed
Merge remote-tracking branch 'origin/components/mdSnackbar'
* origin/components/mdSnackbar: disable unfinished snackbar code rewrite snackbar add ES2017 polyfill fix md-tabs with v-if and fix whiteframe start creation of snackbars
2 parents 0494164 + b9ecbf8 commit 58564e4

File tree

17 files changed

+546
-242
lines changed

17 files changed

+546
-242
lines changed

‎.babelrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
{
22
"presets": [
33
"es2015",
4+
"es2017",
45
"stage-0"
56
],
67
"plugins": [
8+
"transform-runtime",
79
"add-module-exports"
810
]
911
}

‎docs/src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@
9999
<router-link exact to="/components/sidenav">Sidenav</router-link>
100100
</md-list-item>
101101

102+
<!-- <md-list-item class="md-inset">
103+
<router-link exact to="/components/snackbar">Snackbar</router-link>
104+
</md-list-item> -->
105+
102106
<md-list-item class="md-inset">
103107
<router-link exact to="/components/spinner">Spinner</router-link>
104108
</md-list-item>

‎docs/src/components/ExampleBox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<md-card-area>
99
<md-tabs md-right :md-dynamic-height="false" class="md-transparent example-tabs">
10-
<md-tab class="example-content" md-label="Demo">
10+
<md-tab class="example-content" md-label="Demo" md-active>
1111
<slot name="demo"></slot>
1212
</md-tab>
1313

‎docs/src/components/PageContent.vue‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
<template>
22
<div class="page-content">
3-
<md-whiteframe md-elevation="1" class="main-header">
4-
<md-toolbar>
5-
<md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
6-
<md-icon>menu</md-icon>
7-
</md-button>
8-
9-
<div class="md-title">{{ pageTitle }}</div>
10-
11-
<div class="release-version" v-if="availableDocs.length > 1">
12-
<span>Version:</span>
13-
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
14-
<md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
15-
</md-select>
16-
</div>
17-
18-
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
19-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
20-
</md-button>
21-
</md-toolbar>
3+
<md-whiteframe md-tag="md-toolbar" md-elevation="1" class="main-header">
4+
<md-button class="md-icon-button nav-trigger" @click="toggleSidenav">
5+
<md-icon>menu</md-icon>
6+
</md-button>
7+
8+
<div class="md-title">{{ pageTitle }}</div>
9+
10+
<div class="release-version">
11+
<span>Version:</span>
12+
<md-select id="docs-select" v-model="currentDocs" @change="changeDocs">
13+
<md-option v-for="doc in availableDocs" :value="doc" v-once>{{ doc }}</md-option>
14+
</md-select>
15+
</div>
16+
17+
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github">
18+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></path></svg>
19+
</md-button>
2220
</md-whiteframe>
2321

2422
<slot></slot>
@@ -35,12 +33,8 @@
3533
}
3634
3735
.main-header {
38-
position: relative;
3936
z-index: 2;
40-
41-
.md-toolbar {
42-
color: #fff !important;
43-
}
37+
color: #fff !important;
4438
}
4539
4640
.nav-trigger {

‎docs/src/config.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,7 @@ Vue.material.registerTheme({
3434
},
3535
'light-blue': {
3636
primary: 'light-blue',
37-
accent: {
38-
color: 'cyan',
39-
hue: 'A200'
40-
}
37+
accent: 'yellow'
4138
},
4239
teal: {
4340
primary: 'teal',

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<page-content page-title="Components - Snackbar">
3+
<docs-component>
4+
<div slot="description">
5+
<p>Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.</p>
6+
</div>
7+
8+
<div slot="api">
9+
<api-table name="md-snackbar">
10+
11+
</api-table>
12+
</div>
13+
14+
<div slot="example">
15+
<example-box card-title="Default">
16+
<div slot="demo">
17+
<div>
18+
<md-button class="md-primary md-raised" @click="$refs.snackbar1.open()">Open bottom center</md-button>
19+
<md-button class="md-primary md-raised" @click="$refs.snackbar2.open()">Open bottom left</md-button>
20+
<md-button class="md-primary md-raised" @click="$refs.snackbar3.open()">Open bottom right</md-button>
21+
</div>
22+
23+
<div>
24+
<md-button class="md-primary md-raised" @click="$refs.snackbar4.open()">Open top center</md-button>
25+
<md-button class="md-primary md-raised" @click="$refs.snackbar5.open()">Open top left</md-button>
26+
<md-button class="md-primary md-raised" @click="$refs.snackbar6.open()">Open top right</md-button>
27+
</div>
28+
29+
<md-snackbar md-position="bottom center" ref="snackbar1">
30+
<span>Connection timeout. Showing limited messages.</span>
31+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar1.close()">Retry</md-button>
32+
</md-snackbar>
33+
34+
<md-snackbar md-position="bottom left" ref="snackbar2">
35+
<span>Connection timeout. Showing limited messages.</span>
36+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar2.close()">Retry</md-button>
37+
</md-snackbar>
38+
39+
<md-snackbar md-position="bottom right" ref="snackbar3">
40+
<span>Connection timeout. Showing limited messages.</span>
41+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar3.close()">Retry</md-button>
42+
</md-snackbar>
43+
44+
<md-snackbar md-position="top center" ref="snackbar4">
45+
<span>Connection timeout. Showing limited messages.</span>
46+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar4.close()">Retry</md-button>
47+
</md-snackbar>
48+
49+
<md-snackbar md-position="top left" ref="snackbar5">
50+
<span>Connection timeout. Showing limited messages.</span>
51+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar5.close()">Retry</md-button>
52+
</md-snackbar>
53+
54+
<md-snackbar md-position="top right" ref="snackbar6">
55+
<span>Connection timeout. Showing limited messages.</span>
56+
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar6.close()">Retry</md-button>
57+
</md-snackbar>
58+
</div>
59+
60+
<div slot="code">
61+
<code-block lang="xml">
62+
63+
</code-block>
64+
</div>
65+
</example-box>
66+
</div>
67+
</docs-component>
68+
</page-content>
69+
</template>
70+
71+
<style lang="scss" scoped>
72+
73+
</style>
74+
75+
<script>
76+
export default {
77+
78+
};
79+
</script>

‎docs/src/routes.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ import Card from './pages/components/Card';
1414
import Checkbox from './pages/components/Checkbox';
1515
import Dialog from './pages/components/Dialog';
1616
import Icon from './pages/components/Icon';
17+
import InkRipple from './pages/components/InkRipple';
1718
import Input from './pages/components/Input';
1819
import List from './pages/components/List';
1920
import Menu from './pages/components/Menu';
2021
import Radio from './pages/components/Radio';
21-
import InkRipple from './pages/components/InkRipple';
2222
import Select from './pages/components/Select';
2323
import Sidenav from './pages/components/Sidenav';
24+
/*import Snackbar from './pages/components/Snackbar';*/
2425
import Spinner from './pages/components/Spinner';
2526
import Subheader from './pages/components/Subheader';
2627
import Switch from './pages/components/Switch';
@@ -107,6 +108,11 @@ const components = [
107108
name: 'components:icon',
108109
component: Icon
109110
},
111+
{
112+
path: '/components/ink-ripple',
113+
name: 'components:ink-ripple',
114+
component: InkRipple
115+
},
110116
{
111117
path: '/components/input',
112118
name: 'components:input',
@@ -127,11 +133,6 @@ const components = [
127133
name: 'components:radio',
128134
component: Radio
129135
},
130-
{
131-
path: '/components/ink-ripple',
132-
name: 'components:ink-ripple',
133-
component: InkRipple
134-
},
135136
{
136137
path: '/components/select',
137138
name: 'components:select',
@@ -142,6 +143,11 @@ const components = [
142143
name: 'components:sidenav',
143144
component: Sidenav
144145
},
146+
/* {
147+
path: '/components/snackbar',
148+
name: 'components:snackbar',
149+
component: Snackbar
150+
}, */
145151
{
146152
path: '/components/spinner',
147153
name: 'components:spinner',
@@ -157,6 +163,11 @@ const components = [
157163
name: 'components:subheader',
158164
component: Subheader
159165
},
166+
{
167+
path: '/components/switch',
168+
name: 'components:switch',
169+
component: Switch
170+
},
160171
{
161172
path: '/components/table',
162173
name: 'components:table',

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"babel-plugin-add-module-exports": "^0.2.1",
5454
"babel-plugin-transform-runtime": "^6.15.0",
5555
"babel-preset-es2015": "^6.18.0",
56+
"babel-preset-es2017": "^6.16.0",
5657
"babel-preset-stage-0": "^6.16.0",
5758
"chalk": "^1.1.3",
5859
"chokidar": "^1.6.1",

‎src/components/mdButton/mdButton.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ $button-icon-size: 40px;
135135
border-radius: $button-fab-size;
136136
line-height: $button-fab-size;
137137
background-clip: padding-box;
138-
transition: $swift-ease-in;
138+
transition: $swift-ease-out;
139139
transition-property: background-color,
140140
box-shadow,
141141
transform;

‎src/components/mdSnackbar/index.js‎

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

0 commit comments

Comments
 (0)