diff options
| -rw-r--r-- | src/components/color_input/color_input.vue | 20 | ||||
| -rw-r--r-- | src/components/opacity_input/opacity_input.vue | 51 | ||||
| -rw-r--r-- | src/components/range_input/range_input.vue | 2 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.scss | 12 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 10 |
5 files changed, 30 insertions, 65 deletions
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index fa26d079..aa289288 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -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' diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index f7b10d30..cfda9926 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -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 () { diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue index aaa2ed26..5857a5c1 100644 --- a/src/components/range_input/range_input.vue +++ b/src/components/range_input/range_input.vue @@ -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)" diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 135c113a..7291a884 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -15,12 +15,14 @@ &.disabled { input, select { - &:not(.exclude-disabled) { - opacity: .5 - } + opacity: .5 } } + .opt { + margin: .5em; + } + input, select { min-width: 3em; margin: 0; @@ -44,10 +46,6 @@ min-width: 3em; } - &[type=checkbox] + label { - margin: 6px 0; - } - &:not([type=number]):not([type=text]) { align-self: flex-start; } diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index f5b12e7e..f993e070 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -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> |