more workings and even less explosions.
This commit is contained in:
Henry Jameson
parent
f78a5158e1
commit
fb29e7c73d
|
|
@ -9,17 +9,27 @@ export default {
|
|||
availableStyles: [],
|
||||
selected: this.$store.state.config.theme,
|
||||
invalidThemeImported: false,
|
||||
bgColorLocal: '',
|
||||
bgOpacityLocal: 0,
|
||||
btnColorLocal: '',
|
||||
btnOpacityLocal: '',
|
||||
|
||||
textColorLocal: '',
|
||||
linkColorLocal: '',
|
||||
|
||||
bgColorLocal: '',
|
||||
bgOpacityLocal: undefined,
|
||||
|
||||
btnColorLocal: '',
|
||||
btnTextColorLocal: undefined,
|
||||
btnOpacityLocal: undefined,
|
||||
|
||||
inputColorLocal: undefined,
|
||||
inputTextColorLocal: undefined,
|
||||
inputOpacityLocal: undefined,
|
||||
|
||||
panelColorLocal: undefined,
|
||||
panelTextColorLocal: undefined,
|
||||
panelOpacityLocal: undefined,
|
||||
|
||||
topBarColorLocal: undefined,
|
||||
topBarTextColorLocal: undefined,
|
||||
topBarOpacityLocal: undefined,
|
||||
|
||||
redColorLocal: '',
|
||||
|
|
@ -49,6 +59,9 @@ export default {
|
|||
this.normalizeLocalState(this.$store.state.config.customTheme)
|
||||
},
|
||||
computed: {
|
||||
selectedVersion () {
|
||||
return Array.isArray(this.selected) ? 1 : 2
|
||||
},
|
||||
currentTheme () {
|
||||
return {
|
||||
colors: {
|
||||
|
|
@ -76,8 +89,11 @@ export default {
|
|||
},
|
||||
previewRules () {
|
||||
try {
|
||||
const generated = StyleSetter.generatePreset(this.currentTheme.colors)
|
||||
return [generated.colorRules, generated.radiiRules].join(';')
|
||||
if (!this.currentTheme.colors.bg) {
|
||||
return ''
|
||||
}
|
||||
const generated = StyleSetter.generatePreset(this.currentTheme)
|
||||
return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';')
|
||||
} catch (e) {
|
||||
console.error('CATCH')
|
||||
console.error(e)
|
||||
|
|
@ -93,9 +109,8 @@ export default {
|
|||
exportCurrentTheme () {
|
||||
const stringified = JSON.stringify({
|
||||
// To separate from other random JSON files and possible future theme formats
|
||||
_pleroma_theme_version: 1,
|
||||
colors: this.$store.state.config.colors,
|
||||
radii: this.$store.state.config.radii
|
||||
_pleroma_theme_version: 2,
|
||||
theme: this.currentTheme
|
||||
}, null, 2) // Pretty-print and indent with 2 spaces
|
||||
|
||||
// Create an invisible link with a data url and simulate a click
|
||||
|
|
@ -123,7 +138,9 @@ export default {
|
|||
try {
|
||||
const parsed = JSON.parse(target.result)
|
||||
if (parsed._pleroma_theme_version === 1) {
|
||||
this.normalizeLocalState(parsed.colors, parsed.radii)
|
||||
this.normalizeLocalState(parsed, 1)
|
||||
} else if (parsed._pleroma_theme_version === 2) {
|
||||
this.normalizeLocalState(parsed.theme)
|
||||
} else {
|
||||
// A theme from the future, spooky
|
||||
this.invalidThemeImported = true
|
||||
|
|
@ -162,67 +179,68 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
normalizeLocalState (input) {
|
||||
clearV1 () {
|
||||
this.panelColorLocal = undefined
|
||||
this.topBarColorLocal = undefined
|
||||
this.btnTextColorLocal = undefined
|
||||
this.btnOpacityLocal = undefined
|
||||
|
||||
this.inputColorLocal = undefined
|
||||
this.inputTextColorLocal = undefined
|
||||
this.inputOpacityLocal = undefined
|
||||
|
||||
this.panelColorLocal = undefined
|
||||
this.panelTextColorLocal = undefined
|
||||
this.panelOpacityLocal = undefined
|
||||
|
||||
this.topBarColorLocal = undefined
|
||||
this.topBarTextColorLocal = undefined
|
||||
this.topBarOpacityLocal = undefined
|
||||
},
|
||||
|
||||
normalizeLocalState (input, version = 2) {
|
||||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
let i = 0
|
||||
console.log('BENIS')
|
||||
console.log(colors)
|
||||
|
||||
console.log(i++)
|
||||
this.bgColorLocal = rgb2hex(colors.bg)
|
||||
console.log(i++)
|
||||
this.btnColorLocal = rgb2hex(colors.btn)
|
||||
console.log(i++)
|
||||
this.textColorLocal = rgb2hex(colors.text || colors.fg)
|
||||
console.log(i++)
|
||||
this.linkColorLocal = rgb2hex(colors.link)
|
||||
console.log(i++)
|
||||
|
||||
this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined
|
||||
console.log(i++)
|
||||
this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined
|
||||
console.log(i++)
|
||||
if (version === 1) {
|
||||
this.clearV1()
|
||||
}
|
||||
|
||||
this.panelColorLocal = rgb2hex(colors.panel)
|
||||
this.topBarColorLocal = rgb2hex(colors.topBar)
|
||||
|
||||
this.redColorLocal = rgb2hex(colors.cRed)
|
||||
console.log(i++)
|
||||
console.log('red')
|
||||
console.log(colors.cRed)
|
||||
console.log(this.redColorLocal)
|
||||
this.blueColorLocal = rgb2hex(colors.cBlue)
|
||||
console.log(i++)
|
||||
console.log('blue', this.blueColorLocal, colors.cBlue)
|
||||
this.greenColorLocal = rgb2hex(colors.cGreen)
|
||||
console.log(i++)
|
||||
this.orangeColorLocal = rgb2hex(colors.cOrange)
|
||||
console.log(i++)
|
||||
|
||||
this.btnRadiusLocal = radii.btnRadius || 4
|
||||
console.log(i++)
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
console.log(i++)
|
||||
this.panelRadiusLocal = radii.panelRadius || 10
|
||||
console.log(i++)
|
||||
this.avatarRadiusLocal = radii.avatarRadius || 5
|
||||
console.log(i++)
|
||||
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
|
||||
console.log(i++)
|
||||
this.tooltipRadiusLocal = radii.tooltipRadius || 2
|
||||
console.log(i++)
|
||||
this.attachmentRadiusLocal = radii.attachmentRadius || 5
|
||||
console.log(i++)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected () {
|
||||
this.bgColorLocal = this.selected[1]
|
||||
this.btnColorLocal = this.selected[2]
|
||||
this.textColorLocal = this.selected[3]
|
||||
this.linkColorLocal = this.selected[4]
|
||||
this.redColorLocal = this.selected[5]
|
||||
this.greenColorLocal = this.selected[6]
|
||||
this.blueColorLocal = this.selected[7]
|
||||
this.orangeColorLocal = this.selected[8]
|
||||
if (this.selectedVersion === 1) {
|
||||
this.clearV1();
|
||||
this.bgColorLocal = this.selected[1]
|
||||
this.btnColorLocal = this.selected[2]
|
||||
this.textColorLocal = this.selected[3]
|
||||
this.linkColorLocal = this.selected[4]
|
||||
this.redColorLocal = this.selected[5]
|
||||
this.greenColorLocal = this.selected[6]
|
||||
this.blueColorLocal = this.selected[7]
|
||||
this.orangeColorLocal = this.selected[8]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,44 +52,65 @@
|
|||
<div class="color-item">
|
||||
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
|
||||
<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')"/>
|
||||
<OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
|
||||
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
|
||||
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="textColorLocal"/>
|
||||
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
</div>
|
||||
<div class="color-item wide">
|
||||
<h4>Alert opacity</h4>
|
||||
<OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>More customs!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/>
|
||||
<h4>Panel header</h4>
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
|
||||
<h4>Top bar</h4>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Rainbows!!!</h3>
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
<h4>Inputs</h4>
|
||||
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<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')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
<h4>Borders</h4>
|
||||
<ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/>
|
||||
<OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" 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"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -212,7 +233,10 @@
|
|||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
|
||||
&:nth-child(2n+1) {
|
||||
&.wide {
|
||||
min-width: 60%
|
||||
}
|
||||
&:not(.wide):nth-child(2n+1) {
|
||||
margin-right: 7px;
|
||||
|
||||
}
|
||||
|
|
@ -222,14 +246,16 @@
|
|||
align-items: baseline;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--faint, $fallback--faint);
|
||||
}
|
||||
.opacity-control {
|
||||
margin-top: 5px;
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@
|
|||
"follow_import_error": "Error importing followers",
|
||||
"follows_imported": "Follows imported! Processing them will take a while.",
|
||||
"foreground": "Foreground",
|
||||
"opacity": "Opacity",
|
||||
"general": "General",
|
||||
"hide_attachments_in_convo": "Hide attachments in conversations",
|
||||
"hide_attachments_in_tl": "Hide attachments in timeline",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
import { map } from 'lodash'
|
||||
|
||||
const rgb2hex = (r, g, b) => {
|
||||
console.log(r)
|
||||
if (r === null || typeof r === 'undefined') {
|
||||
return undefined
|
||||
}
|
||||
if (r[0] === '#') {
|
||||
return r
|
||||
}
|
||||
if (typeof r === 'object') {
|
||||
({ r, g, b } = r)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ const getTextColor = function (bg, text) {
|
|||
}
|
||||
|
||||
const setColors = (input, commit) => {
|
||||
const { colorRules, radiiRules, col } = generatePreset(input)
|
||||
const { colorRules, radiiRules } = generatePreset(input)
|
||||
const head = document.head
|
||||
const body = document.body
|
||||
body.style.display = 'none'
|
||||
|
|
@ -86,10 +86,11 @@ const setColors = (input, commit) => {
|
|||
|
||||
// commit('setOption', { name: 'colors', value: htmlColors })
|
||||
// commit('setOption', { name: 'radii', value: radii })
|
||||
commit('setOption', { name: 'customTheme', value: col })
|
||||
commit('setOption', { name: 'customTheme', value: input })
|
||||
}
|
||||
|
||||
const generatePreset = (input) => {
|
||||
console.log(input)
|
||||
const radii = input.radii || {
|
||||
btnRadius: input.btnRadius,
|
||||
inputRadius: input.inputRadius,
|
||||
|
|
@ -116,8 +117,6 @@ const generatePreset = (input) => {
|
|||
|
||||
colors.bg = col.bg // background
|
||||
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
|
||||
console.log(colors.bg)
|
||||
console.log(colors.lightBg)
|
||||
|
||||
colors.btn = col.btn || { r: 0, g: 0, b: 0 }
|
||||
colors.btnText = getTextColor(colors.btn, colors.text)
|
||||
|
|
@ -151,8 +150,7 @@ 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(';'),
|
||||
col
|
||||
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +160,7 @@ const setPreset = (val, commit) => {
|
|||
.then((themes) => {
|
||||
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
|
||||
const bgRgb = hex2rgb(theme[1])
|
||||
const fgRgb = hex2rgb(theme[2])
|
||||
const btnRgb = hex2rgb(theme[2])
|
||||
const textRgb = hex2rgb(theme[3])
|
||||
const linkRgb = hex2rgb(theme[4])
|
||||
|
||||
|
|
@ -171,9 +169,9 @@ const setPreset = (val, commit) => {
|
|||
const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
|
||||
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
|
||||
|
||||
const col = {
|
||||
const colors = {
|
||||
bg: bgRgb,
|
||||
fg: fgRgb,
|
||||
btn: btnRgb,
|
||||
text: textRgb,
|
||||
link: linkRgb,
|
||||
cRed: cRedRgb,
|
||||
|
|
@ -189,7 +187,7 @@ const setPreset = (val, commit) => {
|
|||
// load config -> set preset -> wait for styles.json to load ->
|
||||
// load persisted state -> set colors -> styles.json loaded -> set colors
|
||||
if (!window.themeLoaded) {
|
||||
setColors(col, commit)
|
||||
setColors({ colors }, commit)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue