Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Set colors into config so they can be used for more dynamic styles.

Browse source
This commit is contained in:
Roger Braun 2017-02-22 21:14:55 +01:00
parent 935c0e09c6
commit ec5d8b9833
2 changed files with 22 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/modules/config.js
View file

@ -2,7 +2,8 @@ import { set } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js' import StyleSetter from '../services/style_setter/style_setter.js'
const defaultState = { const defaultState = {
name: 'Pleroma FE' name: 'Pleroma FE',
colors: {}
} }
const config = { const config = {
@ -24,7 +25,7 @@ const config = {
break break
case 'theme': case 'theme':
const fullPath = `/static/css/${value}` const fullPath = `/static/css/${value}`
StyleSetter.setStyle(fullPath) StyleSetter.setStyle(fullPath, commit)
} }
} }
} }

28
src/services/style_setter/style_setter.js
View file

@ -1,4 +1,6 @@
const setStyle = (href) => { import { times } from 'lodash'
const setStyle = (href, commit) => {
/*** /***
What's going on here? What's going on here?
I want to make it easy for admins to style this application. To have I want to make it easy for admins to style this application. To have
@ -23,18 +25,26 @@ const setStyle = (href) => {
const setDynamic = () => { const setDynamic = () => {
const baseEl = document.createElement('div') const baseEl = document.createElement('div')
body.appendChild(baseEl) body.appendChild(baseEl)
baseEl.setAttribute('class', 'base05')
const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color') let colors = {}
baseEl.setAttribute('class', 'base08') times(16, (n) => {
const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color') const name = `base0${n.toString(16).toUpperCase()}`
baseEl.setAttribute('class', name)
const color = window.getComputedStyle(baseEl).getPropertyValue('color')
colors[name] = color
})
commit('setOption', { name: 'colors', value: colors })
body.removeChild(baseEl)
const styleEl = document.createElement('style') const styleEl = document.createElement('style')
head.appendChild(styleEl) head.appendChild(styleEl)
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
body.removeChild(baseEl)
styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max') styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max') styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max') styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
body.style.display = 'initial' body.style.display = 'initial'
} }
cssEl.addEventListener('load', setDynamic) cssEl.addEventListener('load', setDynamic)