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,
invalidThemeImported: false,
keepShadows: false,
keepRoundness: false,
textColorLocal: '',
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.
* @param {Object} input - input data
@ -420,17 +436,24 @@ export default {
this[key + 'ColorLocal'] = rgb2hex(colors[key])
})
// TODO optimize this
this.btnRadiusLocal = radii.btn
this.inputRadiusLocal = radii.input
this.checkboxRadiusLocal = radii.checkbox
this.panelRadiusLocal = radii.panel
this.avatarRadiusLocal = radii.avatar
this.avatarAltRadiusLocal = radii.avatarAlt
this.tooltipRadiusLocal = radii.tooltip
this.attachmentRadiusLocal = radii.attachment
if (!this.keepRoundness) {
this.clearRoundness()
// TODO optimize this
this.btnRadiusLocal = radii.btn
this.inputRadiusLocal = radii.input
this.checkboxRadiusLocal = radii.checkbox
this.panelRadiusLocal = radii.panel
this.avatarRadiusLocal = radii.avatar
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]) => {
if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
@ -441,7 +464,16 @@ export default {
watch: {
selected () {
if (this.selectedVersion === 1) {
if (!this.keepRoundness) {
this.clearRoundness()
}
if (!this.keepShadows) {
this.clearShadows()
}
this.clearV1()
this.bgColorLocal = this.selected[1]
this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3]

View File

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

View File

@ -1,26 +1,45 @@
<template>
<div class="style-switcher">
<div class="presets-container">
<div>
{{$t('settings.presets')}}
<label for="preset-switcher" class='select'>
<select id="preset-switcher" v-model="selected" class="preset-switcher">
<option v-for="style in availableStyles"
:value="style"
:style="{
backgroundColor: style[1] || style.theme.colors.bg,
color: style[3] || style.theme.colors.text
}">
{{style[0] || style.name}}
</option>
</select>
<i class="icon-down-open"/>
</label>
<div class="save-load">
<div>
{{$t('settings.presets')}}
<label for="preset-switcher" class='select'>
<select id="preset-switcher" v-model="selected" class="preset-switcher">
<option v-for="style in availableStyles"
:value="style"
:style="{
backgroundColor: style[1] || style.theme.colors.bg,
color: style[3] || style.theme.colors.text
}">
{{style[0] || style.name}}
</option>
</select>
<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 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 class="save-load-options">
<span>
<input
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>

View File

@ -164,6 +164,11 @@
"true": "yes"
},
"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": {
"color": "Color",
"opacity": "Opacity",