diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 107 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 40 |
2 files changed, 103 insertions, 44 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index a1c44be3..203ca18a 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -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, + link: this.linkColorLocal, + + 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, - link: this.linkColorLocal, - cRed: this.redColorLocal, - cBlue: this.blueColorLocal, - cGreen: this.greenColorLocal, - cOrange: this.orangeColorLocal + 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 === 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 + } + } + console.log('BENIS') + console.log(version) + // Stuff that differs between V1 and V2 if (version === 1) { - this.clearV1() + console.log(colors) + this.fgColorLocal = rgb2hex(colors.btn) + this.textColorLocal = rgb2hex(colors.fg) } - this.panelColorLocal = rgb2hex(colors.panel) - this.topBarColorLocal = rgb2hex(colors.topBar) - - 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] diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index cf1fac92..7ddc2d1c 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -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> |