trying to fix transition

This commit is contained in:
Henry Jameson 2018-10-04 18:16:14 +03:00
parent fb29e7c73d
commit 0a4b07652a
3 changed files with 98 additions and 31 deletions

View file

@ -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]

View file

@ -56,9 +56,9 @@
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/> <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
</div> </div>
<div class="color-item"> <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"/> <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"/> <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
</div> </div>
<div class="color-item"> <div class="color-item">
@ -98,19 +98,19 @@
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>Buttons</h4> <h4>Buttons</h4>
<ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/> <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
<OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
<ColorInput name="buttonTextColor" v-model="buttonTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/> <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>Borders</h4> <h4>Borders</h4>
<ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/> <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
<OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>Faint text</h4> <h4>Faint text</h4>
<ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/> <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
<OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/> <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
</div> </div>
</div> </div>
</div> </div>

View file

@ -101,7 +101,6 @@ const generatePreset = (input) => {
attachmentRadius: input.attachmentRadius attachmentRadius: input.attachmentRadius
} }
const colors = {} const colors = {}
const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => { const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
if (typeof v === 'object') { if (typeof v === 'object') {
acc[k] = v acc[k] = v
@ -111,12 +110,32 @@ const generatePreset = (input) => {
return acc return acc
}, {}) }, {})
colors.fg = col.fg || col.text // text let version = 0
colors.text = col.fg || col.text // text
colors.lightFg = col.fg || col.text // text
colors.bg = col.bg // background if (input.version) {
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg 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
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.btn = col.btn || { r: 0, g: 0, b: 0 }
colors.btnText = getTextColor(colors.btn, colors.text) colors.btnText = getTextColor(colors.btn, colors.text)
@ -128,11 +147,11 @@ const generatePreset = (input) => {
colors.topBarText = getTextColor(colors.topBar, colors.text) colors.topBarText = getTextColor(colors.topBar, colors.text)
colors.input = col.input || Object.assign({ a: 0.5 }, col.btn) 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.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
colors.link = col.link // links colors.link = col.link
colors.icon = mixrgb(colors.bg, colors.text) // icons colors.icon = mixrgb(colors.bg, colors.text)
colors.cBlue = col.cBlue colors.cBlue = col.cBlue
colors.cRed = col.cRed colors.cRed = col.cRed
@ -150,7 +169,11 @@ const generatePreset = (input) => {
return { return {
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'), 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, setStyle,
setPreset, setPreset,
setColors, setColors,
getTextColor,
generatePreset generatePreset
} }