Commit 9c5d96bb authored by Adrian's avatar Adrian
Browse files

Optimizando el tamaño

parent 11ea6528
...@@ -10,11 +10,8 @@ ...@@ -10,11 +10,8 @@
> >
{{ $store.state.snackbar.message }} {{ $store.state.snackbar.message }}
<template v-slot:action="{}"> <template v-slot:action="{}">
<v-btn <v-btn icon @click.native.prevent="remove">
icon <v-icon color="white">{{ icons.mdiClose }}</v-icon>
@click.native.prevent="remove"
>
<v-icon color="white">close</v-icon>
</v-btn> </v-btn>
</template> </template>
</v-snackbar> </v-snackbar>
...@@ -22,57 +19,64 @@ ...@@ -22,57 +19,64 @@
</template> </template>
<script> <script>
import { mdiClose } from '@mdi/js';
export default { export default {
data: () => ({
icons: {
mdiClose
}
}),
methods: { methods: {
remove () { remove() {
this.$store.commit('setSnackbar', false); this.$store.commit('setSnackbar', false);
} }
}, },
destroyed () { destroyed() {
this.$store.commit('setSnackbar', false); this.$store.commit('setSnackbar', false);
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../scss/variables.scss'; @import '../../scss/variables.scss';
.snackbar--icon { .snackbar--icon {
display: inline-flex; display: inline-flex;
color: $white !important;
i {
padding-left: 10px;
color: $white !important; color: $white !important;
i {
padding-left: 10px;
color: $white !important;
}
} }
.snackbar--success { }
.v-snack__wrapper { .snackbar--success {
border-radius: 7px; .v-snack__wrapper {
background: $success !important; border-radius: 7px;
font-size: .8rem; background: $success !important;
max-width: 400px; font-size: 0.8rem;
} max-width: 400px;
} }
.snackbar--info { }
.v-snack__wrapper { .snackbar--info {
border-radius: 7px; .v-snack__wrapper {
background: $info !important; border-radius: 7px;
font-size: .8rem; background: $info !important;
max-width: 400px; font-size: 0.8rem;
} max-width: 400px;
} }
.snackbar--error { }
.v-snack__wrapper { .snackbar--error {
border-radius: 7px; .v-snack__wrapper {
background: $error !important; border-radius: 7px;
font-size: .8rem; background: $error !important;
max-width: 400px; font-size: 0.8rem;
} max-width: 400px;
} }
.snackbar--warning { }
.v-snack__wrapper { .snackbar--warning {
border-radius: 7px; .v-snack__wrapper {
background: $warning !important; border-radius: 7px;
font-size: .8rem; background: $warning !important;
max-width: 400px; font-size: 0.8rem;
} max-width: 400px;
} }
}
</style> </style>
<template> <template>
<v-dialog v-model="show" persistent content-class="dialog--alert" :max-width="width"> <v-dialog v-model="show" persistent content-class="dialog--alert" :max-width="width">
<v-card> <v-card>
<v-card-title class="title--dialog"><v-icon size="20" color="warning">warning</v-icon> Confirmar</v-card-title> <v-card-title class="title--dialog"
><v-icon size="20" color="warning" class="mr-2">{{ icons.mdiAlertDecagram }}</v-icon>
Confirmar</v-card-title
>
<v-card-text v-html="text" class="pt-0"></v-card-text> <v-card-text v-html="text" class="pt-0"></v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click.native="cancel()" id="btn-confirm-selected-cancel">{{ textCancel }}</v-btn> <v-btn @click.native="cancel()" id="btn-confirm-selected-cancel">{{ textCancel }}</v-btn>
<v-btn color="primary" @click.native="ok()" id="btn-confirm-selected-ok">{{ textOk }}</v-btn> <v-btn color="primary" @click.native="ok()" id="btn-confirm-selected-ok">{{
textOk
}}</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
...@@ -14,16 +19,22 @@ ...@@ -14,16 +19,22 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import { mdiAlertDecagram } from '@mdi/js';
export default { export default {
mounted () { data: () => ({
icons: {
mdiAlertDecagram
}
}),
mounted() {
const el = document.querySelector('.dialog--alert'); const el = document.querySelector('.dialog--alert');
if (el) { if (el) {
el.parentNode.style.zIndex = 100; el.parentNode.style.zIndex = 100;
} }
}, },
methods: { methods: {
ok () { ok() {
const { confirm } = this.$store.state; const { confirm } = this.$store.state;
confirm.show = false; confirm.show = false;
this.$store.commit('CLOSE_CONFIRM'); this.$store.commit('CLOSE_CONFIRM');
...@@ -32,7 +43,7 @@ export default { ...@@ -32,7 +43,7 @@ export default {
confirm.callbackOk(); confirm.callbackOk();
} }
}, },
cancel () { cancel() {
const { confirm } = this.$store.state; const { confirm } = this.$store.state;
confirm.show = false; confirm.show = false;
this.$store.commit('CLOSE_CONFIRM'); this.$store.commit('CLOSE_CONFIRM');
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment