aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/style_switcher/style_switcher.js67
-rw-r--r--src/components/style_switcher/style_switcher.vue18
2 files changed, 64 insertions, 21 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>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 19:45:30 +0000