Some themeing is working!!
This commit is contained in:
Henry Jameson
parent
5441766c3c
commit
96804d42f0
15 changed files with 346 additions and 120 deletions
|
|
@ -31,6 +31,7 @@ export default {
|
|||
|
||||
panelColorLocal: undefined,
|
||||
panelTextColorLocal: undefined,
|
||||
panelFaintColorLocal: undefined,
|
||||
panelOpacityLocal: undefined,
|
||||
|
||||
topBarColorLocal: undefined,
|
||||
|
|
@ -40,10 +41,17 @@ export default {
|
|||
|
||||
alertOpacityLocal: undefined,
|
||||
|
||||
redColorLocal: '',
|
||||
blueColorLocal: '',
|
||||
greenColorLocal: '',
|
||||
orangeColorLocal: '',
|
||||
borderColorLocal: undefined,
|
||||
borderOpacityLocal: undefined,
|
||||
|
||||
faintColorLocal: undefined,
|
||||
faintOpacityLocal: undefined,
|
||||
faintLinkColorLocal: undefined,
|
||||
|
||||
cRedColorLocal: '',
|
||||
cBlueColorLocal: '',
|
||||
cGreenColorLocal: '',
|
||||
cOrangeColorLocal: '',
|
||||
|
||||
btnRadiusLocal: '',
|
||||
inputRadiusLocal: '',
|
||||
|
|
@ -74,16 +82,35 @@ export default {
|
|||
return {
|
||||
colors: {
|
||||
bg: this.bgColorLocal,
|
||||
fg: this.fgColorLocal,
|
||||
text: this.textColorLocal,
|
||||
panel: this.panelColorLocal,
|
||||
topBar: this.topBarColorLocal,
|
||||
btn: this.btnColorLocal,
|
||||
link: this.linkColorLocal,
|
||||
cRed: this.redColorLocal,
|
||||
cBlue: this.blueColorLocal,
|
||||
cGreen: this.greenColorLocal,
|
||||
cOrange: this.orangeColorLocal
|
||||
|
||||
fg: this.fgColorLocal,
|
||||
fgText: this.fgTextColorLocal,
|
||||
fgLink: this.fgLinkColorLocal,
|
||||
|
||||
panel: this.panelColorLocal,
|
||||
panelText: this.panelTextColorLocal,
|
||||
panelFaint: this.panelFaintColorLocal,
|
||||
|
||||
input: this.inputColorLocal,
|
||||
inputText: this.inputTextColorLocal,
|
||||
|
||||
topBar: this.topBarColorLocal,
|
||||
topBarText: this.topBarTextColorLocal,
|
||||
topBarLink: this.topBarLinkColorLocal,
|
||||
|
||||
btn: this.btnColorLocal,
|
||||
btnText: this.btnTextColorLocal,
|
||||
|
||||
faint: this.faintColorLocal,
|
||||
faintLink: this.faintLinkColorLocal,
|
||||
border: this.borderColorLocal,
|
||||
|
||||
cRed: this.cRedColorLocal,
|
||||
cBlue: this.cBlueColorLocal,
|
||||
cGreen: this.cGreenColorLocal,
|
||||
cOrange: this.cOrangeColorLocal
|
||||
},
|
||||
radii: {
|
||||
btnRadius: this.btnRadiusLocal,
|
||||
|
|
@ -197,12 +224,12 @@ export default {
|
|||
},
|
||||
|
||||
clearV1 () {
|
||||
this.bgOpacityLocal = undefined
|
||||
this.fgOpacityLocal = undefined
|
||||
this.fgTextColorLocal = undefined
|
||||
this.fgLinkColorLocal = undefined
|
||||
|
||||
this.panelColorLocal = undefined
|
||||
this.topBarColorLocal = undefined
|
||||
this.btnColorLocal = undefined
|
||||
this.btnTextColorLocal = undefined
|
||||
this.btnOpacityLocal = undefined
|
||||
|
||||
|
|
@ -216,7 +243,17 @@ export default {
|
|||
|
||||
this.topBarColorLocal = undefined
|
||||
this.topBarTextColorLocal = undefined
|
||||
this.topBarLinkColorLocal = undefined
|
||||
this.topBarOpacityLocal = undefined
|
||||
|
||||
this.alertOpacityLocal = undefined
|
||||
|
||||
this.borderColorLocal = undefined
|
||||
this.borderOpacityLocal = undefined
|
||||
|
||||
this.faintColorLocal = undefined
|
||||
this.faintOpacityLocal = undefined
|
||||
this.faintLinkColorLocal = undefined
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -228,22 +265,42 @@ export default {
|
|||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
|
||||
this.bgColorLocal = rgb2hex(colors.bg)
|
||||
this.fgColorLocal = rgb2hex(colors.fg)
|
||||
this.textColorLocal = rgb2hex(colors.text)
|
||||
this.linkColorLocal = rgb2hex(colors.link)
|
||||
|
||||
if (version === 1) {
|
||||
this.clearV1()
|
||||
if (version === 0) {
|
||||
if (input.version) version = input.version
|
||||
// Old v1 naming: fg is text, btn is foreground
|
||||
if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
|
||||
version = 1
|
||||
}
|
||||
// New v2 naming: text is text, fg is foreground
|
||||
if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
|
||||
version = 2
|
||||
}
|
||||
}
|
||||
|
||||
this.panelColorLocal = rgb2hex(colors.panel)
|
||||
this.topBarColorLocal = rgb2hex(colors.topBar)
|
||||
console.log('BENIS')
|
||||
console.log(version)
|
||||
// Stuff that differs between V1 and V2
|
||||
if (version === 1) {
|
||||
console.log(colors)
|
||||
this.fgColorLocal = rgb2hex(colors.btn)
|
||||
this.textColorLocal = rgb2hex(colors.fg)
|
||||
}
|
||||
|
||||
this.redColorLocal = rgb2hex(colors.cRed)
|
||||
this.blueColorLocal = rgb2hex(colors.cBlue)
|
||||
this.greenColorLocal = rgb2hex(colors.cGreen)
|
||||
this.orangeColorLocal = rgb2hex(colors.cOrange)
|
||||
const keys = new Set(version !== 1 ? Object.keys(colors) : [])
|
||||
if (version === 1) {
|
||||
// V1 ignores the rest
|
||||
this.clearV1()
|
||||
keys
|
||||
.add('bg')
|
||||
.add('link')
|
||||
.add('cRed')
|
||||
.add('cBlue')
|
||||
.add('cGreen')
|
||||
.add('cOrange')
|
||||
}
|
||||
keys.forEach(key => {
|
||||
this[key + 'ColorLocal'] = rgb2hex(colors[key])
|
||||
})
|
||||
|
||||
this.btnRadiusLocal = radii.btnRadius || 4
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
|
|
@ -259,7 +316,7 @@ export default {
|
|||
if (this.selectedVersion === 1) {
|
||||
this.clearV1()
|
||||
this.bgColorLocal = this.selected[1]
|
||||
this.btnColorLocal = this.selected[2]
|
||||
this.fgColorLocal = this.selected[2]
|
||||
this.textColorLocal = this.selected[3]
|
||||
this.linkColorLocal = this.selected[4]
|
||||
this.redColorLocal = this.selected[5]
|
||||
|
|
|
|||
|
|
@ -58,16 +58,16 @@
|
|||
<div class="color-item">
|
||||
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
|
||||
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
|
||||
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
|
||||
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
|
||||
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
|
||||
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
<ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
</div>
|
||||
<div class="color-item wide">
|
||||
<h4>Alert opacity</h4>
|
||||
|
|
@ -79,38 +79,40 @@
|
|||
<div>
|
||||
<div class="color-item">
|
||||
<h4>Panel header</h4>
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
|
||||
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Top bar</h4>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Inputs</h4>
|
||||
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Buttons</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Borders</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
|
||||
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Faint text</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
|
||||
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue