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

UPD: Bigger sliders

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-27 03:46:17 +01:00
parent a879e1c6e2
commit 7c6d75b3fb
2 changed files with 35 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/HSVInput.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, watch } from 'vue'
import { computed, onBeforeMount, ref, watch } from 'vue'
import Color from 'color'
import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
@@ -137,6 +137,7 @@ function updateInputs() {
}
watch(color, updateInputs)
onBeforeMount(updateInputs)
const colorFieldText = ref(null)
@@ -228,12 +229,13 @@ function shake() {
</div>
</div>
<div
class="px-6"
:style="{background: `linear-gradient(180deg, hsla(${color.hue()}, ${color.saturationl()}%, ${color.lightness()}%, 30%) 0%, transparent 30%`}">
<div class="px-6 py-4 flex">
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">HUE</p>
<SliderRoot
v-model="hueSliderModel" :max="359"
class="relative flex w-full touch-none select-none items-center">
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%)" />
@@ -241,11 +243,11 @@ function shake() {
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</div>
<div class="px-6 py-4 flex">
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">SAT</p>
<SliderRoot
v-model="saturationSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center">
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%)`}" />
@@ -253,11 +255,11 @@ function shake() {
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot>
</div>
<div class="px-6 py-4 flex">
<div class="flex pt-4">
<p class="font-heading text-muted-foreground w-24">VAL</p>
<SliderRoot
v-model="valueSliderModel" :max="100"
class="relative flex w-full touch-none select-none items-center">
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%`}" />

32
src/components/config/pages/LEDsConfig.vue
View File

@@ -5,9 +5,11 @@
<ConfigSection
:title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
:show-toggle="true">
<h2 class="p-6">{{ $t('config_options.light_designer.led_mode') }}</h2>
<h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
<div class="px-6 py-2">
<Slider v-model="brightnessSliderModel" max="100" class="h-10" />
</div>
</ConfigSection>
<div class="h-6" />
<ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
<PaletteInput v-model="colors" />
</ConfigSection>
@@ -21,20 +23,38 @@ import { Lightbulb, Palette } from 'lucide-vue-next'
import ConfigSection from '@/components/config/ConfigSection.vue'
import PaletteInput from '@/components/config/pages/PaletteInput.vue'
import Color from 'color'
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { store } from '@/store.js'
import { Slider } from '@/components/ui/slider/index.js'
const ledConfig = computed(() => store.currentProfile.ledConfig)
const brightnessSliderModel = computed({
get: () => [ledConfig.value.ledBrightness],
set: (val) => ledConfig.value.ledBrightness = val[0],
})
const colors = ref({
primary: {
key: 'config_options.light_designer.primary_color',
color: Color('#ff0000'),
color: computed({
get: () => Color(ledConfig.value.primary),
set: (color) => [ledConfig.value.primary.h, ledConfig.value.primary.s, ledConfig.value.primary.v] = color.hsv().color,
}),
},
secondary: {
key: 'config_options.light_designer.secondary_color',
color: Color('#00ff00'),
color: computed({
get: () => Color(ledConfig.value.secondary),
set: (color) => [ledConfig.value.secondary.h, ledConfig.value.secondary.s, ledConfig.value.secondary.v] = color.hsv().color,
}),
},
pointer: {
key: 'config_options.light_designer.pointer_color',
color: Color('#0000ff'),
color: computed({
get: () => Color(ledConfig.value.pointer),
set: (color) => [ledConfig.value.pointer.h, ledConfig.value.pointer.s, ledConfig.value.pointer.v] = color.hsv().color,
}),
},
})
</script>