UPD: Styling
This commit is contained in:
Robert Kossessa
@@ -1,134 +1,134 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div
|
||||||
|
class="mx-2 flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
|
||||||
|
:class="{'rounded-t-lg': roundedTop}"
|
||||||
|
:style="{backgroundColor: color.hex()}">
|
||||||
<div
|
<div
|
||||||
class="flex p-4 font-heading rounded-b-lg border-x border-b border-zinc-800"
|
ref="colorFieldText" class="w-full flex opacity-70"
|
||||||
:class="{'rounded-t-lg': roundedTop}"
|
:class="!isDark(color) ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
|
||||||
:style="{backgroundColor: color.hex()}">
|
style="transition: color 0.2s ease-in-out">
|
||||||
<div
|
<div>
|
||||||
ref="colorFieldText" class="w-full flex opacity-70"
|
<form @submit.prevent="onSubmitHueInput">
|
||||||
:class="!isDark(color) ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
|
<label for="hueInput">H: </label><input
|
||||||
style="transition: color 0.2s ease-in-out">
|
id="hueInput"
|
||||||
<div>
|
v-model="hueInput"
|
||||||
<form @submit.prevent="onSubmitHueInput">
|
onfocus="this.select()"
|
||||||
<label for="hueInput">H: </label><input
|
type="number" maxlength="3"
|
||||||
id="hueInput"
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
v-model="hueInput"
|
@blur="updateInputs">
|
||||||
onfocus="this.select()"
|
</form>
|
||||||
type="number" maxlength="3"
|
<form @submit.prevent="onSubmitSaturationInput">
|
||||||
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
<label for="saturationInput">S: </label><input
|
||||||
@blur="updateInputs">
|
id="saturationInput"
|
||||||
</form>
|
v-model="saturationInput"
|
||||||
<form @submit.prevent="onSubmitSaturationInput">
|
onfocus="this.select()"
|
||||||
<label for="saturationInput">S: </label><input
|
type="number" maxlength="3"
|
||||||
id="saturationInput"
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
v-model="saturationInput"
|
@blur="updateInputs">
|
||||||
onfocus="this.select()"
|
</form>
|
||||||
type="number" maxlength="3"
|
<form @submit.prevent="onSubmitValueInput">
|
||||||
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
<label for="valueInput">V: </label><input
|
||||||
@blur="updateInputs">
|
id="valueInput"
|
||||||
</form>
|
v-model="valueInput"
|
||||||
<form @submit.prevent="onSubmitValueInput">
|
onfocus="this.select()"
|
||||||
<label for="valueInput">V: </label><input
|
type="number" maxlength="3"
|
||||||
id="valueInput"
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
v-model="valueInput"
|
@blur="updateInputs">
|
||||||
onfocus="this.select()"
|
</form>
|
||||||
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>
|
<div class="mx-auto">
|
||||||
<div class="px-4">
|
<form @submit.prevent="onSubmitHexInput">
|
||||||
<div class="flex pt-4">
|
<label for="hexInput">#</label><input
|
||||||
<SliderRoot
|
id="hexInput"
|
||||||
v-model="hueSliderModel" :max="359"
|
v-model="hexInput" maxlength="6"
|
||||||
class="relative flex w-full touch-none select-none items-center h-10">
|
onfocus="this.select()"
|
||||||
<SliderTrack
|
class="w-16 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
|
@blur="updateInputs">
|
||||||
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%)" />
|
</form>
|
||||||
<SliderThumb
|
|
||||||
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-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 class="flex pt-4">
|
<div>
|
||||||
<SliderRoot
|
<form @submit.prevent="onSubmitRGBInput">
|
||||||
v-model="saturationSliderModel" :max="100"
|
<label for="rInput">R: </label><input
|
||||||
class="relative flex w-full touch-none select-none items-center h-10">
|
id="rInput"
|
||||||
<SliderTrack
|
v-model="rInput"
|
||||||
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
|
onfocus="this.select()"
|
||||||
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
|
type="number" maxlength="3"
|
||||||
<SliderThumb
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-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"
|
@blur="updateInputs">
|
||||||
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
|
</form>
|
||||||
<MoreHorizontal class="h-full" />
|
<form @submit.prevent="onSubmitRGBInput">
|
||||||
</SliderThumb>
|
<label for="gInput">G: </label><input
|
||||||
</SliderRoot>
|
id="gInput"
|
||||||
</div>
|
v-model="gInput"
|
||||||
<div class="flex pt-4">
|
onfocus="this.select()"
|
||||||
<SliderRoot
|
type="number" maxlength="3"
|
||||||
v-model="valueSliderModel" :max="100"
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
class="relative flex w-full touch-none select-none items-center h-10">
|
@blur="updateInputs">
|
||||||
<SliderTrack
|
</form>
|
||||||
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
|
<form @submit.prevent="onSubmitRGBInput">
|
||||||
:style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
|
<label for="bInput">B: </label><input
|
||||||
<SliderThumb
|
id="bInput"
|
||||||
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-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"
|
v-model="bInput"
|
||||||
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
|
onfocus="this.select()"
|
||||||
<MoreHorizontal class="h-full" />
|
type="number" maxlength="3"
|
||||||
</SliderThumb>
|
class="w-8 bg-transparent focus-visible:ring-0 focus-visible:outline-none"
|
||||||
</SliderRoot>
|
@blur="updateInputs">
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex py-4 px-8">
|
||||||
|
<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 border border-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>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex py-4 px-8">
|
||||||
|
<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 border border-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>
|
||||||
|
<Separator />
|
||||||
|
<div class="flex py-4 px-8">
|
||||||
|
<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 border border-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>
|
||||||
|
<Separator />
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, onBeforeMount, ref, watch } from 'vue'
|
import { computed, onBeforeMount, ref, watch } from 'vue'
|
||||||
import Color from 'color'
|
import Color from 'color'
|
||||||
import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
|
import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
|
||||||
import { MoreHorizontal } from 'lucide-vue-next'
|
import { MoreHorizontal } from 'lucide-vue-next'
|
||||||
|
import { Separator } from '@/components/ui/separator'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
roundedTop: {
|
roundedTop: {
|
||||||
@@ -284,9 +284,9 @@ function shake() {
|
|||||||
|
|
||||||
function isDark(color) {
|
function isDark(color) {
|
||||||
// YIQ equation from http://24ways.org/2010/calculating-color-contrast
|
// YIQ equation from http://24ways.org/2010/calculating-color-contrast
|
||||||
const rgb = color.rgb().color;
|
const rgb = color.rgb().color
|
||||||
const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000; // Changed r factor from 2126
|
const yiq = (rgb[0] * 6126 + rgb[1] * 7152 + rgb[2] * 722) / 10000 // Changed r factor from 2126
|
||||||
return yiq < 128;
|
return yiq < 128
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="px-4 py-2"
|
class="pt-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%`}">
|
: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
|
<div
|
||||||
class="flex font-heading rounded-t-lg overflow-hidden border-t border-x border-zinc-800 bg-zinc-900">
|
class="mx-2 flex font-heading rounded-t-lg overflow-hidden border-t border-x border-zinc-800 bg-zinc-900">
|
||||||
<button
|
<button
|
||||||
v-for="(option, key) in options" :key="key"
|
v-for="(option, key) in options" :key="key"
|
||||||
class="flex-1 py-2 items-center text-center rounded-t-lg min-w-0 transition-colors"
|
class="flex-1 py-2 items-center text-center rounded-t-lg min-w-0 transition-colors"
|
||||||
@@ -12,13 +12,13 @@
|
|||||||
{{ $t(option.titleKey) }}
|
{{ $t(option.titleKey) }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex border-x border-zinc-800 overflow-hidden">
|
<div class="mx-2 flex border-x border-zinc-800 overflow-hidden">
|
||||||
<button
|
<button
|
||||||
v-for="(option, key) in options" :key="key" class="flex-1 h-4"
|
v-for="(option, key) in options" :key="key" class="flex-1 h-6"
|
||||||
:class="{ 'color-tab': currentOption === key}"
|
:class="{ 'color-tab': currentOption === key}"
|
||||||
:style="{background: option.color.hex()}" @click="currentOption = key" />
|
:style="{background: option.color.hex()}" @click="currentOption = key" />
|
||||||
</div>
|
</div>
|
||||||
<HSVInput v-model="options[currentOption].color" class="relative z-20" />
|
<HSVInput v-model="options[currentOption].color" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
Reference in New Issue
Block a user