custom footer links, colors, dark mode #82
This commit is contained in:
les
@@ -1,15 +1,14 @@
|
||||
<template lang="pug">
|
||||
v-card
|
||||
v-container
|
||||
v-card-title {{$t('common.theme')}}
|
||||
v-card-text
|
||||
p {{settings['theme.primary']}}
|
||||
//- LOGO
|
||||
v-file-input.mt-5(ref='upload'
|
||||
:label="$t('admin.favicon')"
|
||||
@change='uploadLogo'
|
||||
accept='image/*')
|
||||
template(slot='append-outer')
|
||||
v-btn(small @click='resetLogo') Reset
|
||||
v-btn(small text @click='resetLogo') Reset
|
||||
v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
|
||||
max-width="100px" max-height="80px" contain)
|
||||
|
||||
@@ -18,8 +17,8 @@
|
||||
:label="$t('admin.is_dark')")
|
||||
|
||||
v-row
|
||||
v-col
|
||||
v-menu(v-model='primaryMenu'
|
||||
v-col(v-for='(color, i) in colors' :key='i')
|
||||
v-menu(v-model='menu[i]'
|
||||
:close-on-content-click="false"
|
||||
transition="slide-x-transition"
|
||||
offset-y
|
||||
@@ -28,51 +27,103 @@
|
||||
max-width="290px"
|
||||
min-width="290px")
|
||||
template(v-slot:activator='{ on }')
|
||||
v-text-field(
|
||||
:label="$t('event.from')"
|
||||
:value='primary_color'
|
||||
v-on='on'
|
||||
clearable
|
||||
readonly)
|
||||
v-color-picker(
|
||||
mode='hexa'
|
||||
:label="$t('common.primary_color')"
|
||||
v-model='primary_color')
|
||||
v-text-field(:value='colors[i]'
|
||||
v-on='on' clearable readonly)
|
||||
v-color-picker(light @update:color='c => updateColor(i, c)')
|
||||
|
||||
v-dialog(v-model='linkModal' width='500')
|
||||
v-card
|
||||
v-card-title Add footer link
|
||||
v-card-text
|
||||
v-form(v-model='valid' ref='linkModalForm')
|
||||
v-text-field(v-model='link.label'
|
||||
:rules="[validators.required('label')]"
|
||||
label='Label')
|
||||
v-text-field(v-model='link.href'
|
||||
:rules="[validators.required('href')]"
|
||||
label='Href')
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn(link @click='linkModal=false' color='error') {{$t('common.cancel')}}
|
||||
v-btn(link @click='addFooterLink' color='primary' :disabled='!valid') {{$t('common.add')}}
|
||||
|
||||
label Footer links
|
||||
v-list
|
||||
v-list-item(link @click='linkModal = true')
|
||||
v-list-item-content
|
||||
v-list-item-title Add
|
||||
v-list-item-subtitle a new link
|
||||
v-list-item(v-for='link in settings.footerLinks'
|
||||
:key='`${link.label}`'
|
||||
:to='link.href')
|
||||
v-list-item-content
|
||||
v-list-item-title {{link.label}}
|
||||
v-list-item-subtitle {{link.href}}
|
||||
v-list-item-action
|
||||
v-btn(icon color='error' @click.prevent='removeFooterLink(link)')
|
||||
v-icon mdi-delete-forever
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { validators } from '../../plugins/helpers'
|
||||
|
||||
export default {
|
||||
name: 'Theme',
|
||||
data () {
|
||||
return {
|
||||
validators,
|
||||
valid: false,
|
||||
logoKey: 0,
|
||||
primaryMenu: false
|
||||
link: { href: '', label: '' },
|
||||
linkModal: false,
|
||||
menu: [false, false, false, false],
|
||||
colors: { primary: '', secondary: '', tertiary: '' }
|
||||
// primary: {},
|
||||
// secondary: {}
|
||||
// }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
// 'colors.primary': this.color('primary'),
|
||||
// 'colors.secondary': this.color('primary'),
|
||||
// 'colors.tertiary': this.color('primary'),
|
||||
is_dark: {
|
||||
get () { return this.settings['theme.is_dark'] },
|
||||
set (value) {
|
||||
this.$vuetify.theme.dark = value
|
||||
this.setSetting({ key: 'theme.is_dark', value })
|
||||
}
|
||||
},
|
||||
primary_color: {
|
||||
get () { return this.settings['theme.primary'] },
|
||||
set (value) {
|
||||
if (!value) { return }
|
||||
this.setSetting({ key: 'theme.primary', value })
|
||||
if (this.settings['theme.is_dark']) {
|
||||
this.$vuetify.theme.themes.dark.primary = value
|
||||
} else {
|
||||
this.$vuetify.theme.themes.light.primary = value
|
||||
}
|
||||
}
|
||||
}
|
||||
// 'colors[0]': {
|
||||
// get () {
|
||||
// return this.settings['theme.colors'] || [0, 0]
|
||||
// },
|
||||
// set (value) {
|
||||
// console.error(value)
|
||||
// if (!value) { return }
|
||||
// this.setSetting({ key: 'theme.primary', value })
|
||||
// if (this.settings['theme.is_dark']) {
|
||||
// this.$vuetify.theme.themes.dark.primary = value
|
||||
// } else {
|
||||
// this.$vuetify.theme.themes.light.primary = value
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
color (name) {
|
||||
return {
|
||||
get () {
|
||||
console.error('get ', name)
|
||||
},
|
||||
set (value) {
|
||||
console.error('set ', name, value)
|
||||
}
|
||||
}
|
||||
},
|
||||
forceLogoReload () {
|
||||
this.$refs.upload.reset()
|
||||
this.logoKey++
|
||||
@@ -82,6 +133,24 @@ export default {
|
||||
.then(this.forceLogoReload)
|
||||
e.stopPropagation()
|
||||
},
|
||||
updateColor (i, v) {
|
||||
this.colors[i] = v.hex
|
||||
this.$vuetify.theme.themes.dark[i] = v.hex
|
||||
},
|
||||
addFooterLink () {
|
||||
const link = Object.assign({}, this.link)
|
||||
this.setSetting({ key: 'footerLinks', value: this.settings.footerLinks.concat(link) })
|
||||
// this.link = { href: '', label: '' }
|
||||
// this.$refs.linkModalForm.clear()
|
||||
this.$refs.linkModalForm.reset()
|
||||
this.linkModal = false
|
||||
},
|
||||
async removeFooterLink (item) {
|
||||
const ret = await this.$root.$confirm(this.$t('common.confirm'), this.$t('admin.delete_footer_link_confirm'))
|
||||
if (!ret) { return }
|
||||
const footerLinks = this.settings.footerLinks.filter(l => l.label !== item.label)
|
||||
this.setSetting({ key: 'footerLinks', value: footerLinks })
|
||||
},
|
||||
async uploadLogo (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('logo', file)
|
||||
|
||||
Reference in New Issue
Block a user