forked from AkkomaGang/akkoma-fe
added "keep opacity" option, fixed opacity loading, fixed missing shadows not
affecting the preview (i.e. previewing pleroma-dark when redmond is applied)
This commit is contained in:
parent
652b98b13c
commit
26b9f787bb
4 changed files with 36 additions and 7 deletions
|
@ -28,6 +28,7 @@ export default {
|
||||||
invalidThemeImported: false,
|
invalidThemeImported: false,
|
||||||
|
|
||||||
keepShadows: false,
|
keepShadows: false,
|
||||||
|
keepOpacity: false,
|
||||||
keepRoundness: false,
|
keepRoundness: false,
|
||||||
|
|
||||||
textColorLocal: '',
|
textColorLocal: '',
|
||||||
|
@ -386,6 +387,14 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
clearOpacity () {
|
||||||
|
Object.keys(this.$data)
|
||||||
|
.filter(_ => _.endsWith('OpacityLocal'))
|
||||||
|
.forEach(key => {
|
||||||
|
set(this.$data, key, undefined)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
clearShadows () {
|
clearShadows () {
|
||||||
this.shadowsLocal = {}
|
this.shadowsLocal = {}
|
||||||
console.log(this.shadowsLocal)
|
console.log(this.shadowsLocal)
|
||||||
|
@ -397,9 +406,10 @@ export default {
|
||||||
* @param {Number} version - version of data. 0 means try to guess based on data.
|
* @param {Number} version - version of data. 0 means try to guess based on data.
|
||||||
*/
|
*/
|
||||||
normalizeLocalState (input, version = 0) {
|
normalizeLocalState (input, version = 0) {
|
||||||
|
console.log(input.opacity)
|
||||||
const colors = input.colors || input
|
const colors = input.colors || input
|
||||||
const radii = input.radii || input
|
const radii = input.radii || input
|
||||||
const opacity = input.opacity || input
|
const opacity = input.opacity
|
||||||
const shadows = input.shadows || {}
|
const shadows = input.shadows || {}
|
||||||
|
|
||||||
if (version === 0) {
|
if (version === 0) {
|
||||||
|
@ -451,10 +461,13 @@ export default {
|
||||||
this.shadowSelected = this.shadowsAvailable[0]
|
this.shadowSelected = this.shadowsAvailable[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
Object.entries(opacity).forEach(([k, v]) => {
|
if (opacity && !this.keepOpacity) {
|
||||||
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
|
this.clearOpacity()
|
||||||
this[k + 'OpacityLocal'] = v
|
Object.entries(opacity).forEach(([k, v]) => {
|
||||||
})
|
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
|
||||||
|
this[k + 'OpacityLocal'] = v
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -468,6 +481,10 @@ export default {
|
||||||
this.clearShadows()
|
this.clearShadows()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!this.keepOpacity) {
|
||||||
|
this.clearOpacity()
|
||||||
|
}
|
||||||
|
|
||||||
this.clearV1()
|
this.clearV1()
|
||||||
|
|
||||||
this.bgColorLocal = this.selected[1]
|
this.bgColorLocal = this.selected[1]
|
||||||
|
|
|
@ -32,6 +32,13 @@
|
||||||
v-model="keepShadows">
|
v-model="keepShadows">
|
||||||
<label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
|
<label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
|
||||||
</span>
|
</span>
|
||||||
|
<span>
|
||||||
|
<input
|
||||||
|
id="keep-opacity"
|
||||||
|
type="checkbox"
|
||||||
|
v-model="keepOpacity">
|
||||||
|
<label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<input
|
<input
|
||||||
id="keep-roundness"
|
id="keep-roundness"
|
||||||
|
|
|
@ -166,6 +166,7 @@
|
||||||
"style": {
|
"style": {
|
||||||
"switcher": {
|
"switcher": {
|
||||||
"keep_shadows": "Keep shadows",
|
"keep_shadows": "Keep shadows",
|
||||||
|
"keep_opacity": "Keep opacity",
|
||||||
"keep_roundness": "Keep roundness",
|
"keep_roundness": "Keep roundness",
|
||||||
"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme."
|
"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme."
|
||||||
},
|
},
|
||||||
|
|
|
@ -94,7 +94,10 @@ const setColors = (input, commit) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const getCssShadow = (input) => {
|
const getCssShadow = (input) => {
|
||||||
// >shad
|
if (input.length === 0) {
|
||||||
|
return 'none'
|
||||||
|
}
|
||||||
|
|
||||||
return input.map((shad) => [
|
return input.map((shad) => [
|
||||||
shad.x,
|
shad.x,
|
||||||
shad.y,
|
shad.y,
|
||||||
|
@ -340,9 +343,10 @@ const generateShadows = (input) => {
|
||||||
...(input.shadows || {})
|
...(input.shadows || {})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';'))
|
||||||
return {
|
return {
|
||||||
rules: {
|
rules: {
|
||||||
shadows: Object.entries(shadows).filter(([k, v]) => v).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
|
shadows: Object.entries(shadows).map(([k, v]) => `--${k}Shadow: ${getCssShadow(v)}`).join(';')
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
shadows
|
shadows
|
||||||
|
|
Loading…
Reference in a new issue