|
|
@ -16,7 +16,12 @@ export default {
|
|
|
|
bgColorLocal: '',
|
|
|
|
bgColorLocal: '',
|
|
|
|
bgOpacityLocal: undefined,
|
|
|
|
bgOpacityLocal: undefined,
|
|
|
|
|
|
|
|
|
|
|
|
btnColorLocal: '',
|
|
|
|
fgColorLocal: '',
|
|
|
|
|
|
|
|
fgOpacityLocal: undefined,
|
|
|
|
|
|
|
|
fgTextColorLocal: undefined,
|
|
|
|
|
|
|
|
fgLinkColorLocal: undefined,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
btnColorLocal: undefined,
|
|
|
|
btnTextColorLocal: undefined,
|
|
|
|
btnTextColorLocal: undefined,
|
|
|
|
btnOpacityLocal: undefined,
|
|
|
|
btnOpacityLocal: undefined,
|
|
|
|
|
|
|
|
|
|
|
@ -30,8 +35,11 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
topBarColorLocal: undefined,
|
|
|
|
topBarColorLocal: undefined,
|
|
|
|
topBarTextColorLocal: undefined,
|
|
|
|
topBarTextColorLocal: undefined,
|
|
|
|
|
|
|
|
topBarLinkColorLocal: undefined,
|
|
|
|
topBarOpacityLocal: undefined,
|
|
|
|
topBarOpacityLocal: undefined,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
alertOpacityLocal: undefined,
|
|
|
|
|
|
|
|
|
|
|
|
redColorLocal: '',
|
|
|
|
redColorLocal: '',
|
|
|
|
blueColorLocal: '',
|
|
|
|
blueColorLocal: '',
|
|
|
|
greenColorLocal: '',
|
|
|
|
greenColorLocal: '',
|
|
|
@ -66,7 +74,8 @@ export default {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
colors: {
|
|
|
|
colors: {
|
|
|
|
bg: this.bgColorLocal,
|
|
|
|
bg: this.bgColorLocal,
|
|
|
|
fg: this.textColorLocal,
|
|
|
|
fg: this.fgColorLocal,
|
|
|
|
|
|
|
|
text: this.textColorLocal,
|
|
|
|
panel: this.panelColorLocal,
|
|
|
|
panel: this.panelColorLocal,
|
|
|
|
topBar: this.topBarColorLocal,
|
|
|
|
topBar: this.topBarColorLocal,
|
|
|
|
btn: this.btnColorLocal,
|
|
|
|
btn: this.btnColorLocal,
|
|
|
@ -87,18 +96,26 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
previewRules () {
|
|
|
|
preview () {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
if (!this.currentTheme.colors.bg) {
|
|
|
|
if (!this.currentTheme.colors.bg) {
|
|
|
|
return ''
|
|
|
|
return {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const generated = StyleSetter.generatePreset(this.currentTheme)
|
|
|
|
return StyleSetter.generatePreset(this.currentTheme)
|
|
|
|
return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';')
|
|
|
|
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
console.error('CATCH')
|
|
|
|
console.error('CATCH')
|
|
|
|
console.error(e)
|
|
|
|
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: {
|
|
|
|
components: {
|
|
|
@ -140,7 +157,7 @@ export default {
|
|
|
|
if (parsed._pleroma_theme_version === 1) {
|
|
|
|
if (parsed._pleroma_theme_version === 1) {
|
|
|
|
this.normalizeLocalState(parsed, 1)
|
|
|
|
this.normalizeLocalState(parsed, 1)
|
|
|
|
} else if (parsed._pleroma_theme_version === 2) {
|
|
|
|
} else if (parsed._pleroma_theme_version === 2) {
|
|
|
|
this.normalizeLocalState(parsed.theme)
|
|
|
|
this.normalizeLocalState(parsed.theme, 2)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
// A theme from the future, spooky
|
|
|
|
// A theme from the future, spooky
|
|
|
|
this.invalidThemeImported = true
|
|
|
|
this.invalidThemeImported = true
|
|
|
@ -180,6 +197,10 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
clearV1 () {
|
|
|
|
clearV1 () {
|
|
|
|
|
|
|
|
this.fgOpacityLocal = undefined
|
|
|
|
|
|
|
|
this.fgTextColorLocal = undefined
|
|
|
|
|
|
|
|
this.fgLinkColorLocal = undefined
|
|
|
|
|
|
|
|
|
|
|
|
this.panelColorLocal = undefined
|
|
|
|
this.panelColorLocal = undefined
|
|
|
|
this.topBarColorLocal = undefined
|
|
|
|
this.topBarColorLocal = undefined
|
|
|
|
this.btnTextColorLocal = undefined
|
|
|
|
this.btnTextColorLocal = undefined
|
|
|
@ -198,13 +219,35 @@ export default {
|
|
|
|
this.topBarOpacityLocal = undefined
|
|
|
|
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 colors = input.colors || input
|
|
|
|
const radii = input.radii || 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.bgColorLocal = rgb2hex(colors.bg)
|
|
|
|
this.btnColorLocal = rgb2hex(colors.btn)
|
|
|
|
if (version === 1) {
|
|
|
|
this.textColorLocal = rgb2hex(colors.text || colors.fg)
|
|
|
|
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)
|
|
|
|
this.linkColorLocal = rgb2hex(colors.link)
|
|
|
|
|
|
|
|
|
|
|
|
if (version === 1) {
|
|
|
|
if (version === 1) {
|
|
|
@ -231,7 +274,7 @@ export default {
|
|
|
|
watch: {
|
|
|
|
watch: {
|
|
|
|
selected () {
|
|
|
|
selected () {
|
|
|
|
if (this.selectedVersion === 1) {
|
|
|
|
if (this.selectedVersion === 1) {
|
|
|
|
this.clearV1();
|
|
|
|
this.clearV1()
|
|
|
|
this.bgColorLocal = this.selected[1]
|
|
|
|
this.bgColorLocal = this.selected[1]
|
|
|
|
this.btnColorLocal = this.selected[2]
|
|
|
|
this.btnColorLocal = this.selected[2]
|
|
|
|
this.textColorLocal = this.selected[3]
|
|
|
|
this.textColorLocal = this.selected[3]
|
|
|
|