Add basic configuration module, make it work for title and theme.

This commit is contained in:
Roger Braun 2017-02-14 22:21:23 +01:00
parent 340b21475d
commit 1d64b76211
6 changed files with 47 additions and 10 deletions
src
App.jsApp.vue
components/style_switcher
main.js
modules
static

View file

@ -16,7 +16,8 @@ export default {
}), }),
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
style () { return { 'background-image': `url(${this.currentUser.background_image})` } } style () { return { 'background-image': `url(${this.currentUser.background_image})` } },
sitename () { return this.$store.state.config.name }
}, },
methods: { methods: {
activatePanel (panelName) { activatePanel (panelName) {

View file

@ -3,7 +3,7 @@
<nav class='container base01-background base04'> <nav class='container base01-background base04'>
<div class='inner-nav'> <div class='inner-nav'>
<div class='item'> <div class='item'>
<a route-to='friends-timeline' href="#">Pleroma FE</a> <a route-to='friends-timeline' href="#">{{sitename}}</a>
</div> </div>
<style-switcher></style-switcher> <style-switcher></style-switcher>
</div> </div>

View file

@ -1,5 +1,3 @@
import StyleSetter from '../../services/style_setter/style_setter.js'
export default { export default {
data: () => ({ data: () => ({
availableStyles: [], availableStyles: [],
@ -13,8 +11,7 @@ export default {
}, },
watch: { watch: {
selected () { selected () {
const fullPath = `/static/css/${this.selected}` this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
StyleSetter.setStyle(fullPath)
} }
} }
} }

View file

@ -12,11 +12,10 @@ import UserProfile from './components/user_profile/user_profile.vue'
import statusesModule from './modules/statuses.js' import statusesModule from './modules/statuses.js'
import usersModule from './modules/users.js' import usersModule from './modules/users.js'
import apiModule from './modules/api.js' import apiModule from './modules/api.js'
import configModule from './modules/config.js'
import VueTimeago from 'vue-timeago' import VueTimeago from 'vue-timeago'
import StyleSetter from './services/style_setter/style_setter.js'
Vue.use(Vuex) Vue.use(Vuex)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(VueTimeago, { Vue.use(VueTimeago, {
@ -30,7 +29,8 @@ const store = new Vuex.Store({
modules: { modules: {
statuses: statusesModule, statuses: statusesModule,
users: usersModule, users: usersModule,
api: apiModule api: apiModule,
config: configModule
} }
}) })
@ -61,4 +61,9 @@ new Vue({
components: { App } components: { App }
}) })
StyleSetter.setStyle('/static/css/base16-solarized-light.css') window.fetch('/static/config.json')
.then((res) => res.json())
.then(({name, theme}) => {
store.dispatch('setOption', { name: 'name', value: name })
store.dispatch('setOption', { name: 'theme', value: theme })
})

30
src/modules/config.js Normal file
View file

@ -0,0 +1,30 @@
import { set } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = {
name: 'Pleroma FE'
}
const config = {
state: defaultState,
mutations: {
setOption (state, { name, value }) {
set(state, name, value)
}
},
actions: {
setOption ({ commit }, { name, value }) {
commit('setOption', {name, value})
switch (name) {
case 'name':
document.title = value
break
case 'theme':
const fullPath = `/static/css/${value}`
StyleSetter.setStyle(fullPath)
}
}
}
}
export default config

4
static/config.json Normal file
View file

@ -0,0 +1,4 @@
{
"name": "Pleroma FE",
"theme": "base16-ashes.css"
}