color input and opacity input now use Checkbox component. Cleanup.

This commit is contained in:
Henry Jameson 2020-01-02 22:44:54 +02:00
parent adbab6ad2a
commit c7e9f21da0
5 changed files with 30 additions and 65 deletions

View file

@ -9,18 +9,12 @@
>
{{ label }}
</label>
<input
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exlcude-disabled"
type="checkbox"
:checked="present"
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
>
<label
<Checkbox
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
class="opt-l"
:for="name + '-o'"
:checked="present"
:disabled="disabled"
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
class="opt"
/>
<input
:id="name"
@ -42,6 +36,7 @@
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue'
export default {
props: {
// Name of color, used for identifying
@ -80,6 +75,9 @@ export default {
default: true
}
},
components: {
Checkbox
},
computed: {
present () {
return typeof this.value !== 'undefined'

View file

@ -9,18 +9,12 @@
>
{{ $t('settings.style.common.opacity') }}
</label>
<input
<Checkbox
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exclude-disabled"
type="checkbox"
:checked="present"
@input="$emit('input', !present ? fallback : undefined)"
>
<label
v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
class="opt-l"
:for="name + '-o'"
:disabled="disabled"
@change="$emit('input', !present ? fallback : undefined)"
class="opt"
/>
<input
:id="name"
@ -37,38 +31,13 @@
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue'
export default {
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
}
props: [
'name', 'value', 'fallback', 'disabled'
],
components: {
Checkbox
},
computed: {
present () {

View file

@ -12,7 +12,7 @@
<input
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
class="opt exclude-disabled"
class="opt"
type="checkbox"
:checked="present"
@input="$emit('input', !present ? fallback : undefined)"

View file

@ -15,10 +15,12 @@
&.disabled {
input, select {
&:not(.exclude-disabled) {
opacity: .5
}
}
.opt {
margin: .5em;
}
input, select {
@ -44,10 +46,6 @@
min-width: 3em;
}
&[type=checkbox] + label {
margin: 6px 0;
}
&:not([type=number]):not([type=text]) {
align-self: flex-start;
}

View file

@ -239,7 +239,7 @@
v-model="panelOpacityLocal"
name="panelOpacity"
:fallback="previewTheme.opacity.panel"
:showOptionalTickbox="panelColorLocal !== 'transparent'"
:disabled="panelColorLocal === 'transparent'"
/>
<ColorInput
v-model="panelTextColorLocal"
@ -297,7 +297,7 @@
v-model="inputOpacityLocal"
name="inputOpacity"
:fallback="previewTheme.opacity.input"
:showOptionalTickbox="inputColorLocal !== 'transparent'"
:disabled="inputColorLocal === 'transparent'"
/>
<ColorInput
v-model="inputTextColorLocal"
@ -319,7 +319,7 @@
v-model="btnOpacityLocal"
name="btnOpacity"
:fallback="previewTheme.opacity.btn"
:showOptionalTickbox="btnColorLocal !== 'transparent'"
:disabled="btnColorLocal === 'transparent'"
/>
<ColorInput
v-model="btnTextColorLocal"
@ -341,7 +341,7 @@
v-model="borderOpacityLocal"
name="borderOpacity"
:fallback="previewTheme.opacity.border"
:showOptionalTickbox="borderColorLocal !== 'transparent'"
:disabled="borderColorLocal === 'transparent'"
/>
</div>
<div class="color-item">
@ -382,7 +382,7 @@
v-model="underlayOpacityLocal"
name="underlayOpacity"
:fallback="previewTheme.opacity.underlay"
:showOptionalTickbox="underlayOpacityLocal !== 'transparent'"
:disabled="underlayOpacityLocal === 'transparent'"
/>
</div>
</div>