added checkboxes to keep current roundness and shadows, also cleaned up how

shadows/roundness are reset when switching themes
This commit is contained in:
Henry Jameson 2018-11-23 08:24:55 +03:00
parent 91ea9b7b0e
commit 754d71ec19
4 changed files with 99 additions and 33 deletions

View File

@ -27,6 +27,9 @@ export default {
selected: this.$store.state.config.theme, selected: this.$store.state.config.theme,
invalidThemeImported: false, invalidThemeImported: false,
keepShadows: false,
keepRoundness: false,
textColorLocal: '', textColorLocal: '',
linkColorLocal: '', linkColorLocal: '',
@ -375,6 +378,19 @@ export default {
}) })
}, },
clearRoundness () {
Object.keys(this.$data)
.filter(_ => _.endsWith('RadiusLocal'))
.forEach(key => {
set(this.$data, key, undefined)
})
},
clearShadows () {
this.shadowsLocal = {}
console.log(this.shadowsLocal)
},
/** /**
* This applies stored theme data onto form. * This applies stored theme data onto form.
* @param {Object} input - input data * @param {Object} input - input data
@ -420,17 +436,24 @@ export default {
this[key + 'ColorLocal'] = rgb2hex(colors[key]) this[key + 'ColorLocal'] = rgb2hex(colors[key])
}) })
// TODO optimize this if (!this.keepRoundness) {
this.btnRadiusLocal = radii.btn this.clearRoundness()
this.inputRadiusLocal = radii.input // TODO optimize this
this.checkboxRadiusLocal = radii.checkbox this.btnRadiusLocal = radii.btn
this.panelRadiusLocal = radii.panel this.inputRadiusLocal = radii.input
this.avatarRadiusLocal = radii.avatar this.checkboxRadiusLocal = radii.checkbox
this.avatarAltRadiusLocal = radii.avatarAlt this.panelRadiusLocal = radii.panel
this.tooltipRadiusLocal = radii.tooltip this.avatarRadiusLocal = radii.avatar
this.attachmentRadiusLocal = radii.attachment this.avatarAltRadiusLocal = radii.avatarAlt
this.tooltipRadiusLocal = radii.tooltip
this.attachmentRadiusLocal = radii.attachment
}
this.shadowsLocal = shadows if (!this.keepShadows) {
this.clearShadows()
this.shadowsLocal = shadows
this.shadowSelected = this.shadowsAvailable[0]
}
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
@ -441,7 +464,16 @@ export default {
watch: { watch: {
selected () { selected () {
if (this.selectedVersion === 1) { if (this.selectedVersion === 1) {
if (!this.keepRoundness) {
this.clearRoundness()
}
if (!this.keepShadows) {
this.clearShadows()
}
this.clearV1() this.clearV1()
this.bgColorLocal = this.selected[1] this.bgColorLocal = this.selected[1]
this.fgColorLocal = this.selected[2] this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3] this.textColorLocal = this.selected[3]

View File

@ -66,7 +66,7 @@
.apply-container, .apply-container,
.radius-container, .radius-container,
.color-container, .color-container,
.presets-container { {
display: flex; display: flex;
p { p {
@ -88,12 +88,14 @@
.color-container, .color-container,
.shadow-container, .shadow-container,
.radius-container { .radius-container,
.presets-container {
margin: 1em 1em 0; margin: 1em 1em 0;
} }
.presets-container, .shadow-selector,
.shadow-selector { .save-load,
.save-load-options {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
@ -110,6 +112,14 @@
} }
} }
.save-load-options {
flex-wrap: wrap;
margin-top: .5em;
span {
margin: 0 .5em;
}
}
.preview-container { .preview-container {
border-top: 1px dashed; border-top: 1px dashed;
border-bottom: 1px dashed; border-bottom: 1px dashed;

View File

@ -1,26 +1,45 @@
<template> <template>
<div class="style-switcher"> <div class="style-switcher">
<div class="presets-container"> <div class="presets-container">
<div> <div class="save-load">
{{$t('settings.presets')}} <div>
<label for="preset-switcher" class='select'> {{$t('settings.presets')}}
<select id="preset-switcher" v-model="selected" class="preset-switcher"> <label for="preset-switcher" class='select'>
<option v-for="style in availableStyles" <select id="preset-switcher" v-model="selected" class="preset-switcher">
:value="style" <option v-for="style in availableStyles"
:style="{ :value="style"
backgroundColor: style[1] || style.theme.colors.bg, :style="{
color: style[3] || style.theme.colors.text backgroundColor: style[1] || style.theme.colors.bg,
}"> color: style[3] || style.theme.colors.text
{{style[0] || style.name}} }">
</option> {{style[0] || style.name}}
</select> </option>
<i class="icon-down-open"/> </select>
</label> <i class="icon-down-open"/>
</label>
</div>
<div class="import-export">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
</div>
</div> </div>
<div class="import-export"> <div class="save-load-options">
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button> <span>
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button> <input
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p> id="keep-shadows"
type="checkbox"
v-model="keepShadows">
<label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
</span>
<span>
<input
id="keep-roundness"
type="checkbox"
v-model="keepRoundness">
<label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
</span>
<p>{{$t('settings.style.switcher.save_load_hint')}}</p>
</div> </div>
</div> </div>

View File

@ -164,6 +164,11 @@
"true": "yes" "true": "yes"
}, },
"style": { "style": {
"switcher": {
"keep_shadows": "Keep shadows",
"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."
},
"common": { "common": {
"color": "Color", "color": "Color",
"opacity": "Opacity", "opacity": "Opacity",