trying to fix transition
This commit is contained in:
Henry Jameson
parent
fb29e7c73d
commit
0a4b07652a
3 changed files with 98 additions and 31 deletions
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue