UPD: Lots of refactoring

2024-01-28 14:38:23 +01:00
parent f4b764cc90
commit 6d2c20b056
8 changed files with 104 additions and 54 deletions
--- a/src/components/config/ConnectionTypeButton.vue
+++ b/src/components/config/ConnectionTypeButton.vue
@@ -0,0 +1,34 @@
+<template>
+  <button
+    class="flex-1 flex flex-col justify-center items-center py-4"
+    :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
+    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
+    @click="$emit('select'); $refs.title.scramble()">
+    <img
+      draggable="false"
+      :src="icon" alt="connection-type-icon"
+      class="w-24 size-w mb-2"
+      :class="{'invert': selected}">
+    <ScrambleText ref="title" class="text-xs text-wrap" :text="title" />
+  </button>
+</template>
+<script setup>
+import ScrambleText from '@/components/effects/ScrambleText.vue'
+
+defineEmits(['select'])
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
--- a/src/components/config/HSVInput.vue
+++ b/src/components/config/HSVInput.vue
@@ -0,0 +1,307 @@
+<script setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import Color from 'color'
+import { SliderRoot, SliderThumb, SliderTrack } from 'radix-vue'
+
+const hueSliderValue = ref(0)
+const saturationSliderValue = ref(100)
+const valueSliderValue = ref(50)
+
+const hueSliderModel = computed({
+  get() {
+    return [hueSliderValue.value]
+  },
+  set(hue) {
+    hueSliderValue.value = hue[0]
+    color.value = color.value.hue(hue[0])
+  },
+})
+
+const saturationSliderModel = computed({
+  get() {
+    return [saturationSliderValue.value]
+  },
+  set(saturation) {
+    saturationSliderValue.value = saturation[0]
+    color.value = color.value.saturationv(saturation[0])
+  },
+})
+
+const valueSliderModel = computed({
+  get() {
+    return [valueSliderValue.value]
+  },
+  set(value) {
+    valueSliderValue.value = value[0]
+    color.value = color.value.value(value[0])
+  },
+})
+
+const color = defineModel({
+  type: Color,
+  default: () => Color.rgb(255, 0, 0),
+})
+
+const saturationSliderColor = computed(() => {
+  return Color.hsv(hueSliderModel.value[0], 100, valueSliderModel.value[0])
+})
+
+const valueSliderColor = computed(() => {
+  return Color.hsv(hueSliderModel.value[0], saturationSliderModel.value[0], 100)
+})
+
+const hexInput = ref('FF0000')
+const hueInput = ref('000')
+const saturationInput = ref('100')
+const valueInput = ref('050')
+const rInput = ref('255')
+const gInput = ref('000')
+const bInput = ref('000')
+
+function onSubmitHexInput() {
+  let input = hexInput.value
+  if (input[0] !== '#') {
+    input = '#' + input
+  }
+  if (input.match(/^#[0-9A-F]{6}$/i)) {
+    color.value = Color(input)
+  } else
+    shake()
+}
+
+function onSubmitHueInput() {
+  const input = parseInt(hueInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newHue = Math.max(0, Math.min(input, 360))
+  if (newHue === color.value.hue()) {
+    updateInputs()
+  }
+  color.value = color.value.hue(newHue)
+}
+
+function onSubmitSaturationInput() {
+  const input = parseInt(saturationInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newSaturation = Math.max(0, Math.min(input, 100))
+  if (newSaturation === color.value.saturationv()) {
+    updateInputs()
+  }
+  color.value = color.value.saturationv(newSaturation)
+}
+
+function onSubmitValueInput() {
+  const input = parseInt(valueInput.value)
+  if (isNaN(input)) {
+    shake()
+    return
+  }
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === color.value.value()) {
+    updateInputs()
+  }
+  color.value = color.value.value(newValue)
+}
+
+function onSubmitRGBInput() {
+  const r = parseInt(rInput.value)
+  const g = parseInt(gInput.value)
+  const b = parseInt(bInput.value)
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    shake()
+    return
+  }
+  const newColor = Color.rgb(r, g, b)
+  if (newColor.hex() === color.value.hex()) {
+    updateInputs()
+  }
+  color.value = newColor
+}
+
+function updateInputs() {
+  hexInput.value = color.value.hex().substring(1, 7)
+  hueInput.value = String(parseInt(color.value.hue())).padStart(3, '0')
+  saturationInput.value = String(parseInt(color.value.saturationv())).padStart(3, '0')
+  valueInput.value = String(parseInt(color.value.value())).padStart(3, '0')
+  rInput.value = String(parseInt(color.value.red())).padStart(3, '0')
+  gInput.value = String(parseInt(color.value.green())).padStart(3, '0')
+  bInput.value = String(parseInt(color.value.blue())).padStart(3, '0')
+  hueSliderValue.value = color.value.hue()
+  saturationSliderValue.value = color.value.saturationv()
+  valueSliderValue.value = color.value.value()
+}
+
+watch(color, updateInputs)
+onBeforeMount(updateInputs)
+
+const colorFieldText = ref(null)
+
+function shake() {
+  colorFieldText.value.classList.remove('shake')
+  setTimeout(() => {
+    colorFieldText.value.classList.add('shake')
+  }, 5)
+}
+
+</script>
+<template>
+  <div>
+    <div
+      class="w-full flex p-4 font-heading"
+      :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"
+      :style="{background: `linear-gradient(180deg, hsla(${color.hue()}, ${color.saturationl()}%, ${color.lightness()}%, 30%) 0%, transparent 30%`}">
+      <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 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="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="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 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="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="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 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="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>
+  </div>
+</template>
+<style scoped>
+.shake {
+  animation-name: shake;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(0.1rem);
+  }
+  30% {
+    transform: translateX(-0.1rem);
+  }
+  45% {
+    transform: translateX(0.1rem);
+  }
+  60% {
+    transform: translateX(-0.1rem);
+  }
+  75% {
+    transform: translateX(0.1rem);
+  }
+  90% {
+    transform: translateX(-0.1rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>
--- a/src/components/config/pages/PaletteInput.vue
+++ b/src/components/config/pages/PaletteInput.vue
@@ -2,17 +2,17 @@
  <div class="flex font-heading">
    <button
      v-for="(option, key) in options" :key="key"
-      class="flex-1 pt-2 items-center text-center relative"
+      class="flex-1 pt-2 items-center text-center"
      :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
      @click="currentOption = key">
      {{ $t(option.key) }}
-      <div class="h-4 w-full mt-2" :style="{background: option.color.hex()}" />
+      <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
    </button>
  </div>
  <HSVInput v-model="options[currentOption].color" class="relative z-20" />
 </template>
 <script setup>
-import HSVInput from '@/components/HSVInput.vue'
+import HSVInput from '@/components/config/HSVInput.vue'
 import Color from 'color'
 import { onBeforeMount, reactive, ref } from 'vue'

--- a/src/components/config/pages/LEDsConfig.vue
+++ b/src/components/config/pages/LEDsConfig.vue
@@ -21,7 +21,7 @@
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-import PaletteInput from '@/components/config/pages/PaletteInput.vue'
+import PaletteInput from '@/components/config/PaletteInput.vue'
 import Color from 'color'
 import { computed, ref } from 'vue'
 import { store } from '@/store.js'
--- a/src/components/config/pages/ProfileConfig.vue
+++ b/src/components/config/pages/ProfileConfig.vue
@@ -1,23 +1,5 @@
 <template>
  <div class="w-96">
-    <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
-      <div class="w-full flex text-muted-foreground">
-        <button
-          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
-          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
-          <span
-            class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
-            }}</span>
-        </button>
-        <button
-          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
-          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
-          <span
-            class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.midi')
-            }}</span>
-        </button>
-      </div>
-    </ConfigSection>
    <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
      <div class="flex flex-col p-8 py-4">
                      <span
@@ -51,6 +33,13 @@
        </div>
      </div>
    </ConfigSection>
+    <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
+      <div class="flex font-heading">
+        <ConnectionTypeButton
+          v-for="(option, key) in connectionTypeOptions" :key="key" :title="$t(option.titleKey)"
+          :icon="option.icon" :selected="connectionType===key" @select="connectionType=key" />
+      </div>
+    </ConfigSection>

    <ConfigSection
      :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
@@ -58,11 +47,12 @@
      <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
        {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
        <Separator class="mt-4" />
-        <span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
-          }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
+        <span class="py-4 space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
+          }}:<br>
+          <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
            class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-        <Separator class="my-4" />
-        <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
+        <Separator/>
+        <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
      </p>
    </ConfigSection>
  </div>
@@ -70,24 +60,26 @@
 <script setup>
 import { Label } from '@/components/ui/label/index.js'
 import { Switch } from '@/components/ui/switch/index.js'
-import { Replace, Type, Cable } from 'lucide-vue-next'
+import { Cable, Replace, Type } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Separator } from '@/components/ui/separator/index.js'
 import { ref } from 'vue'
+import UsbIcon from '@/assets/gui-ico/ico-usb-logo.svg'
+import MidiIcon from '@/assets/gui-ico/ico-midi-logo.svg'
+import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
+import { Badge } from '@/components/ui/badge'

-const connectionType = ref('usb')
+const connectionType = ref('usb') // TODO: replace with actual value

-</script>
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+const connectionTypeOptions = {
+  usb: {
+    icon: UsbIcon,
+    titleKey: 'config_options.profile_settings.connection_type.usb',
+  },
+  midi: {
+    icon: MidiIcon,
+    titleKey: 'config_options.profile_settings.connection_type.midi',
+  },
 }

-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>
+</script>