diff options
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 67 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 18 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 44 |
3 files changed, 98 insertions, 31 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index f74337fd..7c204bdb 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -16,7 +16,12 @@ export default { bgColorLocal: '', bgOpacityLocal: undefined, - btnColorLocal: '', + fgColorLocal: '', + fgOpacityLocal: undefined, + fgTextColorLocal: undefined, + fgLinkColorLocal: undefined, + + btnColorLocal: undefined, btnTextColorLocal: undefined, btnOpacityLocal: undefined, @@ -30,8 +35,11 @@ export default { topBarColorLocal: undefined, topBarTextColorLocal: undefined, + topBarLinkColorLocal: undefined, topBarOpacityLocal: undefined, + alertOpacityLocal: undefined, + redColorLocal: '', blueColorLocal: '', greenColorLocal: '', @@ -66,7 +74,8 @@ export default { return { colors: { bg: this.bgColorLocal, - fg: this.textColorLocal, + fg: this.fgColorLocal, + text: this.textColorLocal, panel: this.panelColorLocal, topBar: this.topBarColorLocal, btn: this.btnColorLocal, @@ -87,18 +96,26 @@ export default { } } }, - previewRules () { + preview () { try { if (!this.currentTheme.colors.bg) { - return '' + return {} } - const generated = StyleSetter.generatePreset(this.currentTheme) - return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';') + return StyleSetter.generatePreset(this.currentTheme) } catch (e) { console.error('CATCH') console.error(e) - return '' + return {} } + }, + previewTheme () { + if (!this.preview.theme) return { colors: {}, radii: {} } + console.log(this.preview.theme) + return this.preview.theme + }, + previewRules () { + if (!this.preview.colorRules) return '' + return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';') } }, components: { @@ -140,7 +157,7 @@ export default { if (parsed._pleroma_theme_version === 1) { this.normalizeLocalState(parsed, 1) } else if (parsed._pleroma_theme_version === 2) { - this.normalizeLocalState(parsed.theme) + this.normalizeLocalState(parsed.theme, 2) } else { // A theme from the future, spooky this.invalidThemeImported = true @@ -180,6 +197,10 @@ export default { }, clearV1 () { + this.fgOpacityLocal = undefined + this.fgTextColorLocal = undefined + this.fgLinkColorLocal = undefined + this.panelColorLocal = undefined this.topBarColorLocal = undefined this.btnTextColorLocal = undefined @@ -198,13 +219,35 @@ export default { this.topBarOpacityLocal = undefined }, - normalizeLocalState (input, version = 2) { + /** + * This applies stored theme data onto form. + * @param {Object} input - input data + * @param {Number} version - version of data. 0 means try to guess based on data. + */ + normalizeLocalState (input, version = 0) { const colors = input.colors || input const radii = input.radii || input + if (version === 0) { + if (input.version) version = input.version + // Old v1 naming: fg is text, btn is foreground + if (typeof input.text === 'undefined' && typeof input.fg !== 'undefined') { + version = 1 + } + // New v2 naming: text is text, fg is foreground + if (typeof input.text !== 'undefined' && typeof input.fg !== 'undefined') { + version = 2 + } + } + this.bgColorLocal = rgb2hex(colors.bg) - this.btnColorLocal = rgb2hex(colors.btn) - this.textColorLocal = rgb2hex(colors.text || colors.fg) + if (version === 1) { + this.fgColorLocal = rgb2hex(colors.btn) + this.textColorLocal = rgb2hex(colors.fg) + } else { + this.fgColorLocal = rgb2hex(colors.fg) + this.textColorLocal = rgb2hex(colors.text) + } this.linkColorLocal = rgb2hex(colors.link) if (version === 1) { @@ -231,7 +274,7 @@ export default { watch: { selected () { if (this.selectedVersion === 1) { - this.clearV1(); + this.clearV1() this.bgColorLocal = this.selected[1] this.btnColorLocal = this.selected[2] this.textColorLocal = this.selected[3] diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 521683be..cf1fac92 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -56,9 +56,9 @@ <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')"/> + <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="textColorLocal"/> + <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"/> </div> <div class="color-item"> @@ -98,19 +98,19 @@ </div> <div class="color-item"> <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')"/> + <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :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')"/> </div> <div class="color-item"> <h4>Borders</h4> - <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/> - <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> + <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/> + <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/> </div> <div class="color-item"> <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"/> + <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/> + <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/> </div> </div> </div> diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 2a803a4f..54f54b4e 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -101,7 +101,6 @@ const generatePreset = (input) => { attachmentRadius: input.attachmentRadius } const colors = {} - const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => { if (typeof v === 'object') { acc[k] = v @@ -111,12 +110,32 @@ const generatePreset = (input) => { return acc }, {}) - colors.fg = col.fg || col.text // text - colors.text = col.fg || col.text // text - colors.lightFg = col.fg || col.text // text + let version = 0 + + if (input.version) { + version = input.version + } + // Old v1 naming: fg is text, btn is foreground + if (typeof col.text === 'undefined' && typeof col.fg !== 'undefined') { + version = 1 + } + // New v2 naming: text is text, fg is foreground + if (typeof col.text !== 'undefined' && typeof col.fg !== 'undefined') { + version = 2 + } + + colors.text = version === 1 ? col.fg : col.text + colors.lightText = colors.text - colors.bg = col.bg // background - colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg + colors.bg = col.bg + colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb + + colors.fg = version === 1 ? col.btn : col.fg + console.log('BENIN') + console.log(version) + console.log(col) + console.log(colors.text) + colors.fgText = getTextColor(colors.fg, colors.text) colors.btn = col.btn || { r: 0, g: 0, b: 0 } colors.btnText = getTextColor(colors.btn, colors.text) @@ -128,11 +147,11 @@ const generatePreset = (input) => { colors.topBarText = getTextColor(colors.topBar, colors.text) colors.input = col.input || Object.assign({ a: 0.5 }, col.btn) - colors.border = col.btn // borders + colors.border = col.btn colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text) - colors.link = col.link // links - colors.icon = mixrgb(colors.bg, colors.text) // icons + colors.link = col.link + colors.icon = mixrgb(colors.bg, colors.text) colors.cBlue = col.cBlue colors.cRed = col.cRed @@ -150,7 +169,11 @@ const generatePreset = (input) => { return { colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), - radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';') + radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'), + theme: { + colors, + radii + } } } @@ -196,6 +219,7 @@ const StyleSetter = { setStyle, setPreset, setColors, + getTextColor, generatePreset } |