reset buttons, better disabled for shadows
This commit is contained in:
parent
26b9f787bb
commit
b07d7d7229
8 changed files with 85 additions and 22 deletions
src/components/style_switcher
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue