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

View file

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

View file

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

View file

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

View file

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