Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-01 12:04:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

rewrite snackbar

Browse source
This commit is contained in:
Marcos Moura 2016-12-12 00:15:27 -02:00
parent da61f6df6d
commit 8a72eddf3c
3 changed files with 30 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/components/Snackbar.vue
View file

@ -27,32 +27,32 @@
</div>
<md-snackbar md-position="bottom center" ref="snackbar1">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar1.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="bottom left" ref="snackbar2">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar2.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="bottom right" ref="snackbar3">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar3.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="top center" ref="snackbar4">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar4.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="top left" ref="snackbar5">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar5.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="top right" ref="snackbar6">
Connection timeout. Showing limited messages.
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar6.close()">Retry</md-button>
</md-snackbar>
</div>

36
src/components/mdSnackbar/mdSnackbar.scss
View file

@ -17,62 +17,62 @@
&.md-position-bottom-center {
bottom: 0;
left: 50%;
transform: translate(-50%, 100%, 0);
transform: translate3D(-50%, 100%, 0);
}
&.md-position-bottom-right {
bottom: 8px;
right: 8px;
transform: translate(0, 100%, 0);
transform: translate3D(0, calc(100% + 8px), 0);
}
&.md-position-bottom-left {
bottom: 8px;
left: 8px;
transform: translate(0, 100%, 0);
transform: translate3D(0, calc(100% + 8px), 0);
}
&.md-position-top-center {
top: 0;
left: 50%;
transform: translate(-50%, -100%, 0);
transform: translate3D(-50%, -100%, 0);
}
&.md-position-top-right {
top: 8px;
right: 8px;
transform: translate(0, -100%, 0);
transform: translate3D(0, calc(-100% - 8px), 0);
}
&.md-position-top-left {
top: 8px;
left: 8px;
transform: translate(0, -100%, 0);
transform: translate3D(0, calc(-100% - 8px), 0);
}
&.md-active {
&.md-position-bottom-center {
transform: translate(-50%, 0, 0);
transform: translate3D(-50%, 0, 0);
}
&.md-position-bottom-right {
transform: translate(0, 0, 0);
transform: translate3D(0, 0, 0);
}
&.md-position-bottom-left {
transform: translate(0, 0, 0);
transform: translate3D(0, 0, 0);
}
&.md-position-top-center {
transform: translate(-50%, 0, 0);
transform: translate3D(-50%, 0, 0);
}
&.md-position-top-right {
transform: translate(0, 0, 0);
transform: translate3D(0, 0, 0);
}
&.md-position-top-left {
transform: translate(0, 0, 0);
transform: translate3D(0, 0, 0);
}
.md-snackbar-content {
@ -102,36 +102,36 @@
.md-has-toast-top-right {
.md-fab.md-fab-top-right {
transform: translate(0, 48px, 0);
transform: translate3D(0, 48px, 0);
}
}
.md-has-toast-top-center {
.md-fab.md-fab-top-center {
transform: translate(-50%, 48px, 0);
transform: translate3D(-50%, 48px, 0);
}
}
.md-has-toast-top-left {
.md-fab.md-fab-top-left {
transform: translate(0, 48px, 0);
transform: translate3D(0, 48px, 0);
}
}
.md-has-toast-bottom-right {
.md-fab.md-fab-bottom-right {
transform: translate(0, -48px, 0);
transform: translate3D(0, -48px, 0);
}
}
.md-has-toast-bottom-center {
.md-fab.md-fab-bottom-center {
transform: translate(-50%, -48px, 0);
transform: translate3D(-50%, -48px, 0);
}
}
.md-has-toast-bottom-left {
.md-fab.md-fab-bottom-left {
transform: translate(0, -48px, 0);
transform: translate3D(0, -48px, 0);
}
}

41
src/components/mdSnackbar/mdSnackbar.vue
View file

@ -9,8 +9,6 @@
<style lang="scss" src="./mdSnackbar.scss"></style>
<script>
import transitionEndEventName from '../../core/utils/transitionEndEventName';
export default {
props: {
mdPosition: {
@ -25,8 +23,8 @@
data() {
return {
active: false,
closeTimeout: null,
positionClass: this.mdPosition.replace(/ /g, '-')
rootElement: {},
snackbarElement: {}
};
},
computed: {
@ -35,56 +33,29 @@
'md-active': this.active
};
cssClasses['md-position-' + this.positionClass] = true;
cssClasses['md-position-' + this.mdPosition.replace(/ /g, '-')] = true;
return cssClasses;
}
},
methods: {
removeSnackbar() {
const snackbars = [...document.querySelectorAll('.md-snackbar')];
const activeRipple = this.snackbarElement.querySelector('.md-ripple.md-active');
snackbars.forEach((snackbar) => {
if (snackbar.parentNode) {
snackbar.parentNode.removeChild(snackbar);
}
});
if (activeRipple) {
activeRipple.classList.remove('md-active');
}
},
open() {
this.removeSnackbar();
this.rootElement.appendChild(this.snackbarElement);
this.rootElement.classList.add('md-has-toast-' + this.positionClass);
window.getComputedStyle(this.snackbarElement).transition;
this.closeTimeout = window.setTimeout(this.close, this.mdDuration);
this.active = true;
this.$emit('open');
},
close() {
if (this.rootElement.contains(this.snackbarElement)) {
window.clearTimeout(this.closeTimeout);
this.active = false;
this.rootElement.classList.remove('md-has-toast-' + this.positionClass);
this.snackbarElement.removeEventListener(transitionEndEventName, this.removeSnackbar);
this.snackbarElement.addEventListener(transitionEndEventName, this.removeSnackbar);
this.$emit('close');
}
this.active = false;
this.$emit('close');
}
},
mounted() {
this.$nextTick(() => {
this.rootElement = this.$root.$el;
this.snackbarElement = this.$el;
this.removeSnackbar();
});
},
beforeDestroy() {
this.removeSnackbar();
}
};
</script>