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
parent
91ea9b7b0e
commit
754d71ec19
4 changed files with 99 additions and 33 deletions
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue