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:
Henry Jameson 2018-11-23 10:17:01 +03:00
parent 652b98b13c
commit 26b9f787bb
4 changed files with 36 additions and 7 deletions

View file

@ -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,11 +461,14 @@ export default {
this.shadowSelected = this.shadowsAvailable[0] this.shadowSelected = this.shadowsAvailable[0]
} }
if (opacity && !this.keepOpacity) {
this.clearOpacity()
Object.entries(opacity).forEach(([k, v]) => { Object.entries(opacity).forEach(([k, v]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
this[k + 'OpacityLocal'] = v this[k + 'OpacityLocal'] = v
}) })
} }
}
}, },
watch: { watch: {
selected () { selected () {
@ -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]

View file

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

View file

@ -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."
}, },

View file

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