added optional checkbox for opacity, similar to color input

This commit is contained in:
Henry Jameson 2020-01-02 21:36:01 +02:00
parent 4bb1c98e0f
commit adbab6ad2a
2 changed files with 40 additions and 6 deletions

View File

@ -18,7 +18,7 @@
@input="$emit('input', !present ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined'"
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
class="opt-l"
:for="name + '-o'"
/>
@ -38,9 +38,38 @@
<script>
export default {
props: [
'name', 'value', 'fallback', 'disabled'
],
props: {
// Name of opacity, used for identifying
name: {
required: true,
type: String
},
// Opacity value, should be required but vue cannot tell the difference
// between "property missing" and "property set to undefined"
value: {
required: false,
type: Number,
default: undefined
},
// Opacity fallback to use when value is not defeind
fallback: {
required: false,
type: Number,
default: undefined
},
// Disable the control
disabled: {
required: false,
type: Boolean,
default: false
},
// Show "optional" tickbox, for when value might become mandatory
showOptionalTickbox: {
required: false,
type: Boolean,
default: true
}
},
computed: {
present () {
return typeof this.value !== 'undefined'

View File

@ -118,15 +118,15 @@
v-model="accentColorLocal"
name="accentColor"
:fallback="previewTheme.colors.link"
:showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
:label="$t('settings.accent')"
:showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
/>
<ColorInput
v-model="linkColorLocal"
name="linkColor"
:fallback="previewTheme.colors.accent"
:showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
:label="$t('settings.links')"
:showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
/>
<ContrastRatio :contrast="previewContrast.bgLink" />
</div>
@ -239,6 +239,7 @@
v-model="panelOpacityLocal"
name="panelOpacity"
:fallback="previewTheme.opacity.panel"
:showOptionalTickbox="panelColorLocal !== 'transparent'"
/>
<ColorInput
v-model="panelTextColorLocal"
@ -296,6 +297,7 @@
v-model="inputOpacityLocal"
name="inputOpacity"
:fallback="previewTheme.opacity.input"
:showOptionalTickbox="inputColorLocal !== 'transparent'"
/>
<ColorInput
v-model="inputTextColorLocal"
@ -317,6 +319,7 @@
v-model="btnOpacityLocal"
name="btnOpacity"
:fallback="previewTheme.opacity.btn"
:showOptionalTickbox="btnColorLocal !== 'transparent'"
/>
<ColorInput
v-model="btnTextColorLocal"
@ -338,6 +341,7 @@
v-model="borderOpacityLocal"
name="borderOpacity"
:fallback="previewTheme.opacity.border"
:showOptionalTickbox="borderColorLocal !== 'transparent'"
/>
</div>
<div class="color-item">
@ -378,6 +382,7 @@
v-model="underlayOpacityLocal"
name="underlayOpacity"
:fallback="previewTheme.opacity.underlay"
:showOptionalTickbox="underlayOpacityLocal !== 'transparent'"
/>
</div>
</div>