diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index edc614c3..0c302e93 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -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] diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index f8529b4f..9cdc9f33 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -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; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 6463a4ca..0c6b811d 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -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> diff --git a/src/i18n/en.json b/src/i18n/en.json index f990dd04..a9d50dbe 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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",