diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 110 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 60 |
2 files changed, 107 insertions, 63 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 5f76c038..f74337fd 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -9,17 +9,27 @@ export default { availableStyles: [], selected: this.$store.state.config.theme, invalidThemeImported: false, - bgColorLocal: '', - bgOpacityLocal: 0, - btnColorLocal: '', - btnOpacityLocal: '', textColorLocal: '', linkColorLocal: '', + bgColorLocal: '', + bgOpacityLocal: undefined, + + btnColorLocal: '', + btnTextColorLocal: undefined, + btnOpacityLocal: undefined, + + inputColorLocal: undefined, + inputTextColorLocal: undefined, + inputOpacityLocal: undefined, + panelColorLocal: undefined, + panelTextColorLocal: undefined, panelOpacityLocal: undefined, + topBarColorLocal: undefined, + topBarTextColorLocal: undefined, topBarOpacityLocal: undefined, redColorLocal: '', @@ -49,6 +59,9 @@ export default { this.normalizeLocalState(this.$store.state.config.customTheme) }, computed: { + selectedVersion () { + return Array.isArray(this.selected) ? 1 : 2 + }, currentTheme () { return { colors: { @@ -76,8 +89,11 @@ export default { }, previewRules () { try { - const generated = StyleSetter.generatePreset(this.currentTheme.colors) - return [generated.colorRules, generated.radiiRules].join(';') + if (!this.currentTheme.colors.bg) { + return '' + } + const generated = StyleSetter.generatePreset(this.currentTheme) + return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';') } catch (e) { console.error('CATCH') console.error(e) @@ -93,9 +109,8 @@ export default { exportCurrentTheme () { const stringified = JSON.stringify({ // To separate from other random JSON files and possible future theme formats - _pleroma_theme_version: 1, - colors: this.$store.state.config.colors, - radii: this.$store.state.config.radii + _pleroma_theme_version: 2, + theme: this.currentTheme }, null, 2) // Pretty-print and indent with 2 spaces // Create an invisible link with a data url and simulate a click @@ -123,7 +138,9 @@ export default { try { const parsed = JSON.parse(target.result) if (parsed._pleroma_theme_version === 1) { - this.normalizeLocalState(parsed.colors, parsed.radii) + this.normalizeLocalState(parsed, 1) + } else if (parsed._pleroma_theme_version === 2) { + this.normalizeLocalState(parsed.theme) } else { // A theme from the future, spooky this.invalidThemeImported = true @@ -162,67 +179,68 @@ export default { }) }, - normalizeLocalState (input) { + clearV1 () { + this.panelColorLocal = undefined + this.topBarColorLocal = undefined + this.btnTextColorLocal = undefined + this.btnOpacityLocal = undefined + + this.inputColorLocal = undefined + this.inputTextColorLocal = undefined + this.inputOpacityLocal = undefined + + this.panelColorLocal = undefined + this.panelTextColorLocal = undefined + this.panelOpacityLocal = undefined + + this.topBarColorLocal = undefined + this.topBarTextColorLocal = undefined + this.topBarOpacityLocal = undefined + }, + + normalizeLocalState (input, version = 2) { const colors = input.colors || input const radii = input.radii || input - let i = 0 - console.log('BENIS') - console.log(colors) - console.log(i++) this.bgColorLocal = rgb2hex(colors.bg) - console.log(i++) this.btnColorLocal = rgb2hex(colors.btn) - console.log(i++) this.textColorLocal = rgb2hex(colors.text || colors.fg) - console.log(i++) this.linkColorLocal = rgb2hex(colors.link) - console.log(i++) - this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined - console.log(i++) - this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined - console.log(i++) + if (version === 1) { + this.clearV1() + } + + this.panelColorLocal = rgb2hex(colors.panel) + this.topBarColorLocal = rgb2hex(colors.topBar) this.redColorLocal = rgb2hex(colors.cRed) - console.log(i++) - console.log('red') - console.log(colors.cRed) - console.log(this.redColorLocal) this.blueColorLocal = rgb2hex(colors.cBlue) - console.log(i++) - console.log('blue', this.blueColorLocal, colors.cBlue) this.greenColorLocal = rgb2hex(colors.cGreen) - console.log(i++) this.orangeColorLocal = rgb2hex(colors.cOrange) - console.log(i++) this.btnRadiusLocal = radii.btnRadius || 4 - console.log(i++) this.inputRadiusLocal = radii.inputRadius || 4 - console.log(i++) this.panelRadiusLocal = radii.panelRadius || 10 - console.log(i++) this.avatarRadiusLocal = radii.avatarRadius || 5 - console.log(i++) this.avatarAltRadiusLocal = radii.avatarAltRadius || 50 - console.log(i++) this.tooltipRadiusLocal = radii.tooltipRadius || 2 - console.log(i++) this.attachmentRadiusLocal = radii.attachmentRadius || 5 - console.log(i++) } }, watch: { selected () { - this.bgColorLocal = this.selected[1] - this.btnColorLocal = this.selected[2] - this.textColorLocal = this.selected[3] - this.linkColorLocal = this.selected[4] - this.redColorLocal = this.selected[5] - this.greenColorLocal = this.selected[6] - this.blueColorLocal = this.selected[7] - this.orangeColorLocal = this.selected[8] + if (this.selectedVersion === 1) { + this.clearV1(); + this.bgColorLocal = this.selected[1] + this.btnColorLocal = this.selected[2] + this.textColorLocal = this.selected[3] + this.linkColorLocal = this.selected[4] + this.redColorLocal = this.selected[5] + this.greenColorLocal = this.selected[6] + this.blueColorLocal = this.selected[7] + this.orangeColorLocal = this.selected[8] + } } } } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 339d7c3d..521683be 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -52,44 +52,65 @@ <div class="color-item"> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/> <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/> + <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/> + <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/> </div> <div class="color-item"> <ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/> - <OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/> + <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/> + <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="textColorLocal"/> + <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/> </div> <div class="color-item"> - <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/> + <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/> + <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/> </div> <div class="color-item"> - <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/> + <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/> + <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/> + </div> + <div class="color-item wide"> + <h4>Alert opacity</h4> + <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/> </div> </div> <h3>More customs!</h3> <div> <div class="color-item"> - <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/> + <h4>Panel header</h4> + <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/> <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/> + <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/> </div> <div class="color-item"> - <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/> + <h4>Top bar</h4> + <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :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')"/> </div> - </div> - - <h3>Rainbows!!!</h3> - <div> <div class="color-item"> - <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/> + <h4>Inputs</h4> + <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :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')"/> </div> <div class="color-item"> - <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/> + <h4>Buttons</h4> + <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/> + <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> + <ColorInput name="buttonTextColor" v-model="buttonTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/> </div> <div class="color-item"> - <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/> + <h4>Borders</h4> + <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/> + <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> </div> <div class="color-item"> - <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/> + <h4>Faint text</h4> + <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/> + <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> </div> </div> </div> @@ -212,7 +233,10 @@ flex-direction: column; flex: 1 1 0; - &:nth-child(2n+1) { + &.wide { + min-width: 60% + } + &:not(.wide):nth-child(2n+1) { margin-right: 7px; } @@ -222,14 +246,16 @@ align-items: baseline; } + h4 { + margin-top: 1em; + } + label { color: var(--faint, $fallback--faint); } .opacity-control { margin-top: 5px; - height: 12px; - line-height: 12px; - font-size: 12px; + margin-bottom: 5px; } } |