Commit 6e1f7131 authored by Adrian's avatar Adrian

Optimizando el tamaño

parent 065b0fc7
......@@ -12,7 +12,7 @@
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on" @click.native.stop="oModal" slot="activator"
><v-icon dark>account_balance</v-icon> Agregar
><v-icon dark>{{ icons.mdiBank }}</v-icon> Agregar
</v-btn>
</template>
<span> Agregar entidad </span>
......@@ -29,14 +29,14 @@
:cols="11"
class="d-flex flex-row align-center text-sm primary--tex primary--text"
>
<v-icon class="mr-2" color="primary">business</v-icon>
<v-icon class="mr-2" color="primary">{{ icons.mdiBank }}</v-icon>
{{ form.id ? 'Editar entidad' : 'Adicionar entidad' }}
</v-col>
<v-col :cols="1">
<v-tooltip bottom color="primary">
<template v-slot:activator="{ on }">
<v-btn icon color="primary" v-on="on" @click.stop="closeModal">
<v-icon>close</v-icon>
<v-icon>{{ icons.mdiClose }}</v-icon>
</v-btn>
</template>
<span>Cerrar ventana emergente</span>
......@@ -140,11 +140,13 @@
<small class="error--text text-required">* Los campos son obligatorios</small>
</v-col>
<v-col sm="12" xs="12" md="4" lg="4" cols="12">
<v-btn block @click.stop="closeModal"><v-icon>cancel</v-icon> Cancelar </v-btn>
<v-btn block @click.stop="closeModal"
><v-icon>{{ icons.mdiCancel }}</v-icon> Cancelar
</v-btn>
</v-col>
<v-col sm="12" xs="12" md="4" lg="4" cols="12">
<v-btn block color="primary" type="submit" :disabled="!valid">
<v-icon dark>check</v-icon> Enviar
<v-icon dark>{{ icons.mdiCheck }}</v-icon> Enviar
</v-btn>
</v-col>
</v-row>
......@@ -171,7 +173,7 @@
<v-tooltip bottom color="success">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" @click.stop="oModal(items)">
<v-icon color="success">edit</v-icon>
<v-icon color="success">{{ icons.mdiClipboardEdit }}</v-icon>
</v-btn>
</template>
<span>Editar registro</span>
......@@ -179,7 +181,7 @@
<v-tooltip bottom color="error">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" @click.prevent="itemDelete(items)">
<v-icon color="red">delete</v-icon>
<v-icon color="red">{{ icons.mdiDelete }}</v-icon>
</v-btn>
</template>
<span>Eliminar registro</span>
......@@ -187,7 +189,7 @@
<v-tooltip bottom color="info">
<template v-slot:activator="{ on }">
<v-btn v-generate icon v-on="on" @click.prevent="generatePDF(items)">
<v-icon color="info">picture_as_pdf</v-icon>
<v-icon color="info">{{ icons.mdiFilePdf }}</v-icon>
</v-btn>
</template>
<span>Generar reporte</span>
......@@ -214,6 +216,15 @@ import { mapState } from 'vuex';
import validate from 'validate.js';
import CrudTable from '@/plugins/crud-table/CrudTable.vue';
import actions from '@/plugins/crud-table/mixins/crud-table';
import {
mdiBank,
mdiClose,
mdiFilePdf,
mdiDelete,
mdiClipboardEdit,
mdiCheck,
mdiCancel
} from '@mdi/js';
export default {
mixins: [actions],
......@@ -221,6 +232,15 @@ export default {
...mapState(['modal2'])
},
data: () => ({
icons: {
mdiBank,
mdiClose,
mdiFilePdf,
mdiDelete,
mdiClipboardEdit,
mdiCheck,
mdiCancel
},
rules: {
razonSocial: [
val => {
......
......@@ -33,21 +33,21 @@
<v-btn-toggle v-model="layout" tile color="info" group>
<v-btn icon value="left">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>view_list</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewList
}}</v-icon>
</v-btn>
<v-btn icon value="right">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>vertical_split</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewSplitVertical
}}</v-icon>
</v-btn>
<v-btn icon value="top" v-if="!['xs'].includes($vuetify.breakpoint.name)">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>view_stream</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewStream
}}</v-icon>
</v-btn>
</v-btn-toggle>
</v-card>
......@@ -190,21 +190,21 @@
<v-btn-toggle v-model="layout" tile color="info" group>
<v-btn icon value="left">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>view_list</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewList
}}</v-icon>
</v-btn>
<v-btn icon value="right">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>vertical_split</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewSplitVertical
}}</v-icon>
</v-btn>
<v-btn icon value="top" v-if="!['xs'].includes($vuetify.breakpoint.name)">
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'"
>view_stream</v-icon
>
<v-icon size="40" :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiViewStream
}}</v-icon>
</v-btn>
</v-btn-toggle>
</v-card>
......@@ -287,7 +287,7 @@
Cerrar sessión
</template>
<template v-else>
<v-icon>close</v-icon>
<v-icon>{{ icons.mdiClose }}</v-icon>
</template>
</v-btn>
</div>
......@@ -299,6 +299,14 @@
<script>
import { mapState } from 'vuex';
import {
mdiViewList,
mdiArrowRight,
mdiArrowLeft,
mdiClose,
mdiViewStream,
mdiViewSplitVertical
} from '@mdi/js';
import Auth from '@/components/auth/mixins/auth';
export default {
......@@ -329,7 +337,15 @@ export default {
layout: null,
viewLayout: {},
sitename: 'Frontend Base',
mRol: null
mRol: null,
icons: {
mdiViewList,
mdiArrowRight,
mdiArrowLeft,
mdiClose,
mdiViewStream,
mdiViewSplitVertical
}
};
},
watch: {
......@@ -376,9 +392,9 @@ export default {
getIcon() {
let icon;
if (this.initialViewLayout === 'left') {
icon = this.mini ? 'arrow_forward' : 'arrow_back';
icon = this.mini ? this.icons.mdiArrowRight : this.icons.mdiArrowLeft;
} else if (this.initialViewLayout === 'right') {
icon = this.mini ? 'arrow_back' : 'arrow_forward';
icon = this.mini ? this.icons.mdiArrowLeft : this.icons.mdiArrowRight;
}
return icon;
},
......
......@@ -13,7 +13,9 @@
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn @click.native="filtrar()" :id="idFilter" text class="btn-filter" v-on="on"
><v-icon :color="$vuetify.theme.dark ? 'white' : 'primary'">search</v-icon>
><v-icon :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiTableSearch
}}</v-icon>
</v-btn>
</template>
<span> Buscar </span>
......@@ -22,7 +24,9 @@
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn text @click.native="getData(true)" :class="`btn-refresh ${idRefresh}`" v-on="on"
><v-icon :color="$vuetify.theme.dark ? 'white' : 'primary'">refresh</v-icon>
><v-icon :color="$vuetify.theme.dark ? 'white' : 'primary'">{{
icons.mdiTableRefresh
}}</v-icon>
</v-btn>
</template>
<span> Actualizar listado </span>
......@@ -79,7 +83,7 @@
right
fab
>
<v-icon>close</v-icon>
<v-icon>{{ icons.mdiClose }}</v-icon>
</v-btn>
</template>
<span>Cerrar filtro/búsqueda</span>
......@@ -145,6 +149,7 @@
</template>
<script>
import { mapState } from 'vuex';
import { mdiTableSearch, mdiTableRefresh, mdiClose } from '@mdi/js';
export default {
props: {
......@@ -203,6 +208,11 @@ export default {
},
data() {
return {
icons: {
mdiTableSearch,
mdiTableRefresh,
mdiClose
},
showFilter: false,
search: {},
activeSearch: false,
......
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