From b07d7d7229c376a0588d86ee8a28735bdcf99b7f Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Fri, 23 Nov 2018 11:36:36 +0300 Subject: [PATCH] reset buttons, better disabled for shadows --- src/App.scss | 5 ++ src/components/settings/settings.vue | 8 +-- .../shadow_control/shadow_control.vue | 9 +++- .../style_switcher/style_switcher.js | 4 ++ .../style_switcher/style_switcher.scss | 54 +++++++++++++++---- .../style_switcher/style_switcher.vue | 21 ++++++-- src/i18n/en.json | 5 +- src/services/style_setter/style_setter.js | 1 + 8 files changed, 85 insertions(+), 22 deletions(-) diff --git a/src/App.scss b/src/App.scss index 004c6fc3..ceb0bb87 100644 --- a/src/App.scss +++ b/src/App.scss @@ -120,6 +120,11 @@ input, textarea, .select { line-height: 16px; hyphens: none; + &:disabled, &[disabled=disabled] { + cursor: not-allowed; + opacity: 0.5; + } + .icon-down-open { position: absolute; top: 0; diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 990d1f0d..2097fd22 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -208,12 +208,8 @@ .btn { min-height: 28px; - } - - .submit { - margin-top: 1em; - min-height: 30px; - width: 10em; + min-width: 10em; + padding: 0 2em; } } .select-multiple { diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 2bc05cb7..b608d0ff 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -40,7 +40,7 @@ <div class="shadow-tweak"> <div :disabled="usingFallback" class="id-control style-control"> - <label for="shadow-switcher" class="select"> + <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback"> <select v-model="selectedId" class="shadow-switcher" :disabled="!ready || usingFallback" @@ -60,7 +60,7 @@ <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn"> <i class="icon-down-open"/> </button> - <button class="btn btn-default" :disabled="!ready" @click="add"> + <button class="btn btn-default" :disabled="usingFallback" @click="add"> <i class="icon-plus"/> </button> </div> @@ -219,8 +219,13 @@ .id-control { align-items: stretch; .select, .btn { + min-width: 1px; margin-right: 5px; } + .btn { + padding: 0 .4em; + margin: 0 .1em; + } .select { flex: 1; select { diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index e1a17837..d45ce455 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -369,6 +369,10 @@ export default { }) }, + clearAll () { + this.normalizeLocalState(this.$store.state.config.customTheme) + }, + // Clears all the extra stuff when loading V1 theme clearV1 () { Object.keys(this.$data) diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 9cdc9f33..ad203856 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -63,15 +63,16 @@ margin: 0 -1em; } + .reset-container { + flex-wrap: wrap; + } + + .reset-container, .apply-container, .radius-container, .color-container, { display: flex; - - p { - margin-left: 1em - } } .radius-container { @@ -93,7 +94,38 @@ margin: 1em 1em 0; } - .shadow-selector, + .tab-header { + display: flex; + justify-content: space-between; + align-items: baseline; + width: 100%; + min-height: 30px; + + .btn { + min-width: 1px; + flex: 0 auto; + padding: 0 1em; + } + + p { + flex: 1; + margin: 0; + } + + margin-bottom: 1em; + } + + .shadow-selector { + .override { + flex: 1; + margin-left: .5em; + } + .select-container { + margin-top: -4px; + margin-bottom: -3px; + } + } + .save-load, .save-load-options { display: flex; @@ -102,11 +134,8 @@ .import-export { display: flex; - - .btn { - margin-left: .5em; - } } + .override { margin-left: .5em; } @@ -132,6 +161,7 @@ background-position: 50% 50%; .btn { + margin-left: 0; margin-top: 1em; min-height: 30px; width: 10em; @@ -153,6 +183,7 @@ &.wide { min-width: 60% } + &:not(.wide):nth-child(2n+1) { margin-right: 7px; @@ -200,6 +231,11 @@ padding: 20px; } + .btn { + margin-left: .25em; + margin-right: .25em; + } + .dummy { .avatar { background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index ed0dd733..9e5cffbe 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -71,10 +71,13 @@ </div> </div> - <p>{{$t('settings.theme_help')}}</p> <keep-alive> <tab-switcher key="style-tweak"> <div :label="$t('settings.style.common_colors._tab_label')" class="color-container"> + <div class="tab-header"> + <p>{{$t('settings.theme_help')}}</p> + <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button> + </div> <h4>{{ $t('settings.style.common_colors.main') }}</h4> <div class="color-item"> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/> @@ -106,6 +109,11 @@ </div> <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container"> + <div class="tab-header"> + <p>{{$t('settings.theme_help')}}</p> + <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button> + <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button> + </div> <div class="color-item"> <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/> @@ -159,7 +167,10 @@ </div> <div :label="$t('settings.style.radii._tab_label')" class="radius-container"> <div> - <p>{{$t('settings.radii_help')}}</p> + <div class="tab-header"> + <p>{{$t('settings.radii_help')}}</p> + <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button> + </div> <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/> <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/> <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/> @@ -171,8 +182,8 @@ </div> </div> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> - <div class="shadow-selector"> - <div> + <div class="tab-header shadow-selector"> + <div class="select-container"> {{$t('settings.style.shadows.component')}} <label for="shadow-switcher" class="select"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> @@ -196,6 +207,7 @@ type="checkbox"> <label class="checkbox-label" for="override"></label> </div> + <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button> </div> <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> </div> @@ -204,6 +216,7 @@ <div class="apply-container"> <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button> + <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button> </div> </div> </template> diff --git a/src/i18n/en.json b/src/i18n/en.json index 98a91013..15d57765 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -168,7 +168,10 @@ "keep_shadows": "Keep shadows", "keep_opacity": "Keep opacity", "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." + "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.", + "reset": "Reset", + "clear_all": "Clear all", + "clear_opacity": "Clear opacity" }, "common": { "color": "Color", diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 60531f28..680aadb4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -249,6 +249,7 @@ const generateRadii = (input) => { }, { btn: 4, input: 4, + checkbox: 2, panel: 10, avatar: 5, avatarAlt: 50,