reset buttons, better disabled for shadows

This commit is contained in:
Henry Jameson 2018-11-23 11:36:36 +03:00
parent 26b9f787bb
commit b07d7d7229
8 changed files with 85 additions and 22 deletions

View File

@ -120,6 +120,11 @@ input, textarea, .select {
line-height: 16px; line-height: 16px;
hyphens: none; hyphens: none;
&:disabled, &[disabled=disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.icon-down-open { .icon-down-open {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -208,12 +208,8 @@
.btn { .btn {
min-height: 28px; min-height: 28px;
} min-width: 10em;
padding: 0 2em;
.submit {
margin-top: 1em;
min-height: 30px;
width: 10em;
} }
} }
.select-multiple { .select-multiple {

View File

@ -40,7 +40,7 @@
<div class="shadow-tweak"> <div class="shadow-tweak">
<div :disabled="usingFallback" class="id-control style-control"> <div :disabled="usingFallback" class="id-control style-control">
<label for="shadow-switcher" class="select"> <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
<select <select
v-model="selectedId" class="shadow-switcher" v-model="selectedId" class="shadow-switcher"
:disabled="!ready || usingFallback" :disabled="!ready || usingFallback"
@ -60,7 +60,7 @@
<button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn"> <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
<i class="icon-down-open"/> <i class="icon-down-open"/>
</button> </button>
<button class="btn btn-default" :disabled="!ready" @click="add"> <button class="btn btn-default" :disabled="usingFallback" @click="add">
<i class="icon-plus"/> <i class="icon-plus"/>
</button> </button>
</div> </div>
@ -219,8 +219,13 @@
.id-control { .id-control {
align-items: stretch; align-items: stretch;
.select, .btn { .select, .btn {
min-width: 1px;
margin-right: 5px; margin-right: 5px;
} }
.btn {
padding: 0 .4em;
margin: 0 .1em;
}
.select { .select {
flex: 1; flex: 1;
select { select {

View File

@ -369,6 +369,10 @@ export default {
}) })
}, },
clearAll () {
this.normalizeLocalState(this.$store.state.config.customTheme)
},
// Clears all the extra stuff when loading V1 theme // Clears all the extra stuff when loading V1 theme
clearV1 () { clearV1 () {
Object.keys(this.$data) Object.keys(this.$data)

View File

@ -63,15 +63,16 @@
margin: 0 -1em; margin: 0 -1em;
} }
.reset-container {
flex-wrap: wrap;
}
.reset-container,
.apply-container, .apply-container,
.radius-container, .radius-container,
.color-container, .color-container,
{ {
display: flex; display: flex;
p {
margin-left: 1em
}
} }
.radius-container { .radius-container {
@ -93,7 +94,38 @@
margin: 1em 1em 0; 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,
.save-load-options { .save-load-options {
display: flex; display: flex;
@ -102,11 +134,8 @@
.import-export { .import-export {
display: flex; display: flex;
.btn {
margin-left: .5em;
}
} }
.override { .override {
margin-left: .5em; margin-left: .5em;
} }
@ -132,6 +161,7 @@
background-position: 50% 50%; background-position: 50% 50%;
.btn { .btn {
margin-left: 0;
margin-top: 1em; margin-top: 1em;
min-height: 30px; min-height: 30px;
width: 10em; width: 10em;
@ -153,6 +183,7 @@
&.wide { &.wide {
min-width: 60% min-width: 60%
} }
&:not(.wide):nth-child(2n+1) { &:not(.wide):nth-child(2n+1) {
margin-right: 7px; margin-right: 7px;
@ -200,6 +231,11 @@
padding: 20px; padding: 20px;
} }
.btn {
margin-left: .25em;
margin-right: .25em;
}
.dummy { .dummy {
.avatar { .avatar {
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);

View File

@ -71,10 +71,13 @@
</div> </div>
</div> </div>
<p>{{$t('settings.theme_help')}}</p>
<keep-alive> <keep-alive>
<tab-switcher key="style-tweak"> <tab-switcher key="style-tweak">
<div :label="$t('settings.style.common_colors._tab_label')" class="color-container"> <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> <h4>{{ $t('settings.style.common_colors.main') }}</h4>
<div class="color-item"> <div class="color-item">
<ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/> <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
@ -106,6 +109,11 @@
</div> </div>
<div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container"> <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"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> <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"/> <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
@ -159,7 +167,10 @@
</div> </div>
<div :label="$t('settings.style.radii._tab_label')" class="radius-container"> <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
<div> <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="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="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"/> <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> </div>
<div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
<div class="shadow-selector"> <div class="tab-header shadow-selector">
<div> <div class="select-container">
{{$t('settings.style.shadows.component')}} {{$t('settings.style.shadows.component')}}
<label for="shadow-switcher" class="select"> <label for="shadow-switcher" class="select">
<select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
@ -196,6 +207,7 @@
type="checkbox"> type="checkbox">
<label class="checkbox-label" for="override"></label> <label class="checkbox-label" for="override"></label>
</div> </div>
<button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
</div> </div>
<shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
</div> </div>
@ -204,6 +216,7 @@
<div class="apply-container"> <div class="apply-container">
<button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button> <button class="btn submit" @click="setCustomTheme">{{$t('general.apply')}}</button>
<button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
</div> </div>
</div> </div>
</template> </template>

View File

@ -168,7 +168,10 @@
"keep_shadows": "Keep shadows", "keep_shadows": "Keep shadows",
"keep_opacity": "Keep opacity", "keep_opacity": "Keep opacity",
"keep_roundness": "Keep roundness", "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": { "common": {
"color": "Color", "color": "Color",

View File

@ -249,6 +249,7 @@ const generateRadii = (input) => {
}, { }, {
btn: 4, btn: 4,
input: 4, input: 4,
checkbox: 2,
panel: 10, panel: 10,
avatar: 5, avatar: 5,
avatarAlt: 50, avatarAlt: 50,