color input improvements

This commit is contained in:
Henry Jameson 2024-04-03 22:43:26 +03:00
parent dd4867d8de
commit e8159164e3
2 changed files with 58 additions and 26 deletions

View File

@ -9,6 +9,7 @@
padding: 0.2em 8px; padding: 0.2em 8px;
input { input {
color: var(--text);
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;
@ -19,21 +20,38 @@
min-width: 3em; min-width: 3em;
padding: 0; padding: 0;
} }
}
&.nativeColor { .nativeColor {
flex: 0 0 2em; cursor: pointer;
min-width: 2em; flex: 0 0 auto;
align-self: stretch;
min-height: 100%; input {
appearance: none;
max-width: 0;
min-width: 0;
max-height: 0;
/* stylelint-disable-next-line declaration-no-important */
opacity: 0 !important;
} }
} }
.computedIndicator, .computedIndicator,
.validIndicator,
.invalidIndicator,
.transparentIndicator { .transparentIndicator {
flex: 0 0 2em; flex: 0 0 2em;
margin: 0 0.5em;
min-width: 2em; min-width: 2em;
align-self: stretch; align-self: stretch;
min-height: 100%; min-height: 1.5em;
border-radius: var(--roundness);
}
.invalidIndicator {
background: transparent;
box-sizing: border-box;
border: 2px solid var(--cRed);
} }
.transparentIndicator { .transparentIndicator {
@ -54,11 +72,13 @@
&::after { &::after {
top: 0; top: 0;
left: 0; left: 0;
border-top-left-radius: var(--roundness);
} }
&::before { &::before {
bottom: 0; bottom: 0;
right: 0; right: 0;
border-bottom-right-radius: var(--roundness);
} }
} }
} }

View File

@ -25,30 +25,51 @@
:disabled="!present || disabled" :disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> >
<input
v-if="validColor"
:id="name"
class="nativeColor unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
<div <div
v-if="transparentColor" v-if="validColor"
class="validIndicator"
:style="{backgroundColor: modelValue || fallback}"
/>
<div
v-else-if="transparentColor"
class="transparentIndicator" class="transparentIndicator"
/> />
<div <div
v-if="computedColor" v-else-if="computedColor"
class="computedIndicator" class="computedIndicator"
:style="{backgroundColor: fallback}" :style="{backgroundColor: fallback}"
/> />
<div
v-else
class="invalidIndicator"
/>
<label class="nativeColor">
<FAIcon icon="eye-dropper"/>
<input
:id="name"
class="unstyled"
type="color"
:value="modelValue || fallback"
:disabled="!present || disabled"
@input="$emit('update:modelValue', $event.target.value)"
>
</label>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEyeDropper
} from '@fortawesome/free-solid-svg-icons'
library.add(
faEyeDropper
)
export default { export default {
components: { components: {
Checkbox Checkbox
@ -108,12 +129,3 @@ export default {
} }
</script> </script>
<style lang="scss" src="./color_input.scss"></style> <style lang="scss" src="./color_input.scss"></style>
<style lang="scss">
.color-control {
input.text-input {
max-width: 7em;
flex: 1;
}
}
</style>