diff options
Diffstat (limited to 'src/components/style_switcher/style_switcher.vue')
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 21 |
1 files changed, 17 insertions, 4 deletions
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> |