Commit fbdbce8b authored by les's avatar les
Browse files

custom footer links, colors, dark mode #82

parent 4f035a3d
<template lang="pug">
v-footer(app absolute)
v-btn(text href='https://gancio.org') Gancio {{settings.version}}
v-btn(v-if='settings.enable_federation' text rel='me' @click.prevent='showFollowMe=true') follow me
v-btn(nuxt to='/about' text) about
v-btn(href='https://blog.gancio.org' text) blog
v-btn(href='https://framagit.org/les/gancio' text) source
v-footer(app absolute color='secondary')
v-btn(color='primary' text href='https://gancio.org') Gancio {{settings.version}}
v-btn(v-for='link in settings.footerLinks'
:key='link.label' color='primary' text :href='link.href') {{link.label}}
//- v-btn(v-if='settings.enable_federation' text rel='me' @click.prevent='showFollowMe=true') follow me
//- v-btn(nuxt to='/about' text) about
//- v-btn(href='https://blog.gancio.org' text) blog
//- v-btn(href='https://framagit.org/les/gancio' text) source
</template>
<script>
import { mapState } from 'vuex'
......
......@@ -51,4 +51,5 @@ export default {
#list {
max-width: 500px;
margin: 0 auto;
}
</style>
<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)
......
......@@ -26,7 +26,12 @@ const defaultSettings = {
enable_resources: false,
hide_boosts: true,
enable_trusted_instances: true,
trusted_instances: []
trusted_instances: [],
'theme.is_dark': true,
'theme.primary': '#FF4500',
footerLinks: [
{ href: '/about', label: 'about' }
]
}
/**
......
Supports Markdown
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