NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

start with custom color

Browse source
This commit is contained in:
lesion 2023-03-10 21:58:02 +01:00
parent e2b07a06bd
commit 7e6130155a
No known key found for this signature in database
GPG key ID: 352918250B012177
1 changed files with 33 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
components/admin/Theme.vue
View file

@ -52,22 +52,22 @@ v-container
v-img.mt-2(:src='`/headerimage.png?${headerImageKey}`' max-height="150px" contain) v-img.mt-2(:src='`/headerimage.png?${headerImageKey}`' max-height="150px" contain)
v-card-title {{$t('admin.colors')}}
//- TODO choose theme colors v-card-text
//- v-row //- choose theme colors
//- v-col(v-for='(color, i) in colors' :key='i') v-row
//- v-menu(v-model='menu[i]' v-col(v-for='(color, i) in colors' :key='i')
//- :close-on-content-click="false" v-menu(v-model='menu[i]'
//- transition="slide-x-transition" :close-on-content-click="false"
//- offset-y transition="slide-x-transition"
//- absolute offset-y
//- bottom absolute
//- max-width="290px" bottom
//- min-width="290px") max-width="290px"
//- template(v-slot:activator='{ on }') min-width="290px")
//- v-btn(:color='i' small template(v-slot:activator='{ on }')
//- v-on='on') {{i}} v-btn(:color='i' small v-on='on') {{i}}
//- v-color-picker(light @update:color='c => updateColor(i, c)') v-color-picker(light :value='color' @update:color='c => updateColor(i, c)')
v-dialog(v-model='linkModal' width='500' :fullscreen='$vuetify.breakpoint.xsOnly') v-dialog(v-model='linkModal' width='500' :fullscreen='$vuetify.breakpoint.xsOnly')
v-card v-card
@ -106,10 +106,11 @@ v-container
<script> <script>
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
import { mdiDeleteForever, mdiRestore, mdiPlus, mdiChevronUp } from '@mdi/js' import { mdiDeleteForever, mdiRestore, mdiPlus, mdiChevronUp } from '@mdi/js'
import debounce from 'lodash/debounce'
export default { export default {
name: 'Theme', name: 'Theme',
data () { data ({ $store }) {
const t = new Date().getMilliseconds() const t = new Date().getMilliseconds()
return { return {
mdiDeleteForever, mdiRestore, mdiPlus, mdiChevronUp, mdiDeleteForever, mdiRestore, mdiPlus, mdiChevronUp,
@ -118,19 +119,19 @@ export default {
fallbackImageKey: t, fallbackImageKey: t,
headerImageKey: t, headerImageKey: t,
link: { href: '', label: '' }, link: { href: '', label: '' },
linkModal: false linkModal: false,
// menu: [false, false, false, false] menu: [false, false, false, false],
// colors: { primary: '', secondary: '', accent: '', error: '', info: '', success: '', warning: '' } colors: {
// primary: {}, primary: $store.state.settings['theme.primary'],
// secondary: {} secondary: $store.state.settings['theme.secondary'],
// } error: $store.state.settings['theme.error'],
warning: $store.state.settings['theme.warning'],
success: $store.state.settings['theme.success'],
}
} }
}, },
computed: { computed: {
...mapState(['settings']), ...mapState(['settings']),
// 'colors.primary': this.color('primary'),
// 'colors.secondary': this.color('primary'),
// 'colors.tertiary': this.color('primary'),
is_dark: { is_dark: {
get () { return this.settings['theme.is_dark'] }, get () { return this.settings['theme.is_dark'] },
set (value) { set (value) {
@ -145,22 +146,7 @@ export default {
hide_calendar: { hide_calendar: {
get () { return this.settings.hide_calendar }, get () { return this.settings.hide_calendar },
set (value) { this.setSetting({ key: 'hide_calendar', value }) } set (value) { this.setSetting({ key: 'hide_calendar', 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: { methods: {
...mapActions(['setSetting']), ...mapActions(['setSetting']),
@ -196,10 +182,11 @@ export default {
this.setSetting({ key: 'header_image', value: null }) this.setSetting({ key: 'header_image', value: null })
.then(this.forceHeaderImageReload) .then(this.forceHeaderImageReload)
e.stopPropagation() e.stopPropagation()
}, },
updateColor (i, v) { updateSettingColor: debounce( async function (i, value) { this.setSetting({ key: `theme.${i}`, value: value.hex }) }, 200),
this.colors[i] = v.hex updateColor (i, value) {
this.$vuetify.theme.themes.dark[i] = v.hex this.$vuetify.theme.themes.dark[i] = this.$vuetify.theme.themes.light[i] = value.hex
this.updateSettingColor(i, value)
}, },
openLinkModal () { openLinkModal () {
// this.link = { href: '', label: '' } // this.link = { href: '', label: '' }