diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 38 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 110 |
2 files changed, 91 insertions, 57 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 8e344eb1..b40511df 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,4 +1,5 @@ import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js' +import { set, delete as del } from 'vue' import ColorInput from '../color_input/color_input.vue' import ShadowControl from '../shadow_control/shadow_control.vue' import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' @@ -155,7 +156,7 @@ export default { } }, previewTheme () { - if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} } + if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, shadows: {} } return this.preview.theme }, previewContrast () { @@ -231,14 +232,30 @@ export default { return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';') }, shadowsAvailable () { - return Object.keys(this.preview.theme.shadows) + return Object.keys(this.previewTheme.shadows) }, - currentShadow () { - const fallback = this.preview.theme.shadows[this.shadowSelected]; - return fallback ? { - fallback, - value: this.shadowsLocal[this.shadowSelected] - } : undefined + currentShadowOverriden: { + get () { + return this.currentShadow + }, + set (val) { + if (val) { + set(this.shadowsLocal, this.shadowSelected, Object.assign({}, this.currentShadowFallback)) + } else { + del(this.shadowsLocal, this.shadowSelected) + } + } + }, + currentShadowFallback () { + return this.previewTheme.shadows[this.shadowSelected] + }, + currentShadow: { + get () { + return this.shadowsLocal[this.shadowSelected] + }, + set (v) { + set(this.shadowsLocal, this.shadowSelected, v) + } } }, components: { @@ -305,7 +322,10 @@ export default { setCustomTheme () { this.$store.dispatch('setOption', { name: 'customTheme', - value: this.currentTheme + value: { + ...this.currentTheme, + shadows: this.shadowsLocal + } }) }, diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 0352f546..af816a23 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,49 +1,49 @@ <template> -<div> - <div class="presets-container"> - <div> - {{$t('settings.presets')}} - <label for="style-switcher" class='select'> - <select id="style-switcher" v-model="selected" class="style-switcher"> - <option v-for="style in availableStyles" - :value="style" - :style="{ - backgroundColor: style[1], - color: style[3] - }"> - {{style[0]}} - </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 class="presets-container"> + <div> + {{$t('settings.presets')}} + <label for="style-switcher" class='select'> + <select id="style-switcher" v-model="selected" class="style-switcher"> + <option v-for="style in availableStyles" + :value="style" + :style="{ + backgroundColor: style[1], + color: style[3] + }"> + {{style[0]}} + </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> - <div class="preview-container"> - <div class="panel dummy" :style="previewRules"> - <div class="panel-heading">Preview</div> - <div class="panel-body theme-preview-content"> - <div class="avatar"> - ( ͡° ͜ʖ ͡°) + <div class="preview-container"> + <div class="panel dummy" :style="previewRules"> + <div class="panel-heading">Preview</div> + <div class="panel-body theme-preview-content"> + <div class="avatar"> + ( ͡° ͜ʖ ͡°) + </div> + <h4>Content</h4> + <br> + A bunch of more content and + <a style="color: var(--link)">a nice lil' link</a> + <i style="color: var(--cBlue)" class="icon-reply"/> + <i style="color: var(--cGreen)" class="icon-retweet"/> + <i style="color: var(--cRed)" class="icon-cancel"/> + <i style="color: var(--cOrange)" class="icon-star"/> + <br> + <button class="btn">Button</button> </div> - <h4>Content</h4> - <br> - A bunch of more content and - <a style="color: var(--link)">a nice lil' link</a> - <i style="color: var(--cBlue)" class="icon-reply"/> - <i style="color: var(--cGreen)" class="icon-retweet"/> - <i style="color: var(--cRed)" class="icon-cancel"/> - <i style="color: var(--cOrange)" class="icon-star"/> - <br> - <button class="btn">Button</button> </div> </div> - </div> <p>{{$t('settings.theme_help')}}</p> <tab-switcher> @@ -171,15 +171,29 @@ </div> </div> <div label="Shadow Realm" class="shadow-container"> - <div class="shadow-selector"> - <select id="style-switcher" v-model="shadowSelected" class="style-switcher"> - <option v-for="shadow in shadowsAvailable" - :value="shadow"> - {{shadow}} - </option> - </select> + <div> + Shadow + <label for="shadow-switcher" class="shadow-selector select"> + <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> + <option v-for="shadow in shadowsAvailable" + :value="shadow"> + {{shadow}} + </option> + </select> + <i class="icon-down-open"/> + </label> + <label for="override" class="label"> + Override + </label> + <input + v-model="currentShadowOverriden" + name="override" + id="override" + class="input-override" + type="checkbox"> + <label class="checkbox-label" for="override"></label> </div> - <shadow-control v-if="currentShadow" :value="currentShadow.value" :fallback="currentShadow.fallback"/> + <shadow-control v-if="currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> </div> </tab-switcher> |