matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Slight color picker improvements

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-04 23:01:37 +01:00
parent 330e2d5e80
commit ae25ff6fd4
2 changed files with 136 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/components/common/HSVInput.vue
View File

@@ -1,9 +1,142 @@
<template>
<div>
<div
class="flex p-4 font-heading rounded-b-xl border-x border-b border-zinc-800"
:class="{'rounded-t-xl': roundedTop}"
:style="{backgroundColor: color.hex()}">
<div
ref="colorFieldText" class="w-full flex opacity-70"
:class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
style="transition: color 0.2s ease-in-out">
<div>
<form @submit.prevent="onSubmitHueInput">
<label for="hueInput">H: </label><input
id="hueInput"
v-model="hueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitSaturationInput">
<label for="saturationInput">S: </label><input
id="saturationInput"
v-model="saturationInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitValueInput">
<label for="valueInput">V: </label><input
id="valueInput"
v-model="valueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div class="mx-auto">
<form @submit.prevent="onSubmitHexInput">
<label for="hexInput">#</label><input
id="hexInput"
v-model="hexInput" maxlength="6"
onfocus="this.select()"
class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div>
<form @submit.prevent="onSubmitRGBInput">
<label for="rInput">R: </label><input
id="rInput"
v-model="rInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="gInput">G: </label><input
id="gInput"
v-model="gInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="bInput">B: </label><input
id="bInput"
v-model="bInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
</div>
</div>
<div class="px-4">
<div class="flex pt-4">
<SliderRoot
v-model="hueSliderModel" :max="359"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
<div class="flex pt-4">
<SliderRoot
v-model="saturationSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
<div class="flex pt-4">
<SliderRoot
v-model="valueSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
</div>
</div>
</template>
<script setup>
import { computed, onBeforeMount, ref, watch } from 'vue'
import Color from 'color'
import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
import { MoreHorizontal } from 'lucide-vue-next'
defineProps({
roundedTop: {
type: Boolean,
default: false,
},
})
const hueSliderValue = ref(0)
const saturationSliderValue = ref(100)
const valueSliderValue = ref(50)
@@ -150,132 +283,6 @@ function shake() {
}
</script>
<template>
<div>
<div
class="flex p-4 font-heading rounded-b-xl"
:style="{backgroundColor: `hsl(${color.hue()},${color.saturationl()}%,${color.lightness()}%)`}">
<div
ref="colorFieldText" class="w-full flex opacity-70"
:class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
style="transition: color 0.2s ease-in-out">
<div>
<form @submit.prevent="onSubmitHueInput">
<label for="hueInput">H: </label><input
id="hueInput"
v-model="hueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitSaturationInput">
<label for="saturationInput">S: </label><input
id="saturationInput"
v-model="saturationInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitValueInput">
<label for="valueInput">V: </label><input
id="valueInput"
v-model="valueInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div class="mx-auto">
<form @submit.prevent="onSubmitHexInput">
<label for="hexInput">#</label><input
id="hexInput"
v-model="hexInput" maxlength="6"
onfocus="this.select()"
class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
<div>
<form @submit.prevent="onSubmitRGBInput">
<label for="rInput">R: </label><input
id="rInput"
v-model="rInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="gInput">G: </label><input
id="gInput"
v-model="gInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
<form @submit.prevent="onSubmitRGBInput">
<label for="bInput">B: </label><input
id="bInput"
v-model="bInput"
onfocus="this.select()"
type="number" maxlength="3"
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
@blur="updateInputs">
</form>
</div>
</div>
</div>
<div
class="px-6">
<div class="flex pt-4">
<SliderRoot
v-model="hueSliderModel" :max="359"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
<div class="flex pt-4">
<SliderRoot
v-model="saturationSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
<div class="flex pt-4">
<SliderRoot
v-model="valueSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center h-10">
<SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, black, hsl(${valueSliderColor.hue()}, ${valueSliderColor.saturationl()}%, ${valueSliderColor.lightness()}%) 100%`}" />
<SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" />
</SliderThumb>
</SliderRoot>
</div>
</div>
</div>
</template>
<style scoped>
.shake {
animation-name: shake;

6
src/components/common/PaletteInput.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
class="p-4"
:style="{background: `linear-gradient(180deg, hsla(${options[currentOption].color.hue()}, ${options[currentOption].color.saturationl()}%, ${options[currentOption].color.lightness()}%, 30%) 0%, transparent 50%`}">
class="px-4 py-2"
:style="{background: `linear-gradient(180deg, ${options[currentOption].color.hex()+'11'}, ${options[currentOption].color.hex()+'30'} 25%, ${options[currentOption].color.hex()+'30'} 40%, transparent 60%`}">
<div
class="flex font-heading rounded-t-xl overflow-hidden">
class="flex font-heading rounded-t-xl overflow-hidden border-x border-t border-zinc-800">
<button
v-for="(option, key) in options" :key="key"
class="flex-1 pt-2 items-center text-center"