From a7c49ade53630d2693fed4fbb4871d5f8deee99a Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 25 Jan 2024 18:00:16 +0100
Subject: [PATCH] UPD: LED Settings improvements

---
 src/components/HSLInput.vue                | 26 ++++++++++++++---
 src/components/config/pages/LEDsConfig.vue | 34 +++++++++++-----------
 src/lang/en.json                           |  5 ++++
 3 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/components/HSLInput.vue b/src/components/HSLInput.vue
index 5c0c8ff..37ebb27 100644
--- a/src/components/HSLInput.vue
+++ b/src/components/HSLInput.vue
@@ -157,7 +157,11 @@ function onSubmitHueInput() {
     shake()
     return
   }
-  hue.value = Math.max(0, Math.min(input, 360))
+  const newValue = Math.max(0, Math.min(input, 360))
+  if (newValue === hue.value) {
+    updateHueInput(newValue)
+  }
+  hue.value = newValue
 }
 
 function onSubmitSaturationInput() {
@@ -166,7 +170,11 @@ function onSubmitSaturationInput() {
     shake()
     return
   }
-  saturation.value = Math.max(0, Math.min(input, 100))
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === saturation.value) {
+    updateSaturationInput(newValue)
+  }
+  saturation.value = newValue
 }
 
 function onSubmitLightnessInput() {
@@ -175,7 +183,11 @@ function onSubmitLightnessInput() {
     shake()
     return
   }
-  lightness.value = Math.max(0, Math.min(input, 100))
+  const newValue = Math.max(0, Math.min(input, 100))
+  if (newValue === lightness.value) {
+    updateLightnessInput(newValue)
+  }
+  lightness.value = newValue
 }
 
 function onSubmitRGBInput() {
@@ -186,11 +198,17 @@ function onSubmitRGBInput() {
     shake()
     return
   }
-  rgb.value = [
+  const newValue = [
     Math.max(0, Math.min(r, 255)),
     Math.max(0, Math.min(g, 255)),
     Math.max(0, Math.min(b, 255)),
   ]
+  if (newValue[0] === rgb.value[0] && newValue[1] === rgb.value[1] && newValue[2] === rgb.value[2]) {
+    updateRInput(newValue[0])
+    updateGInput(newValue[1])
+    updateBInput(newValue[2])
+  }
+  rgb.value = newValue
 }
 
 function foregroundBlack(r, g, b) {
diff --git a/src/components/config/pages/LEDsConfig.vue b/src/components/config/pages/LEDsConfig.vue
index 0e41a82..424036a 100644
--- a/src/components/config/pages/LEDsConfig.vue
+++ b/src/components/config/pages/LEDsConfig.vue
@@ -2,8 +2,21 @@
   <TabsContent value="led-config" class="mt-0">
     <div class="w-96 bg-zinc-900 bg-opacity-40">
       <ScrollArea class="h-[720px]">
-        <ConfigSection title="TODO: THINK OF TITLE" :icon-component="Lightbulb">
-          <HSLInput/>
+        <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>
+        </ConfigSection>
+        <div class="h-6" />
+        <!-- TODO: Instead of 3 color pickers, add a context select above -->
+        <ConfigSection :title="$t('config_options.light_designer.primary_color')" :icon-component="Paintbrush">
+          <HSLInput />
+        </ConfigSection>
+        <ConfigSection :title="$t('config_options.light_designer.secondary_color')" :icon-component="Brush">
+          <HSLInput />
+        </ConfigSection>
+        <ConfigSection :title="$t('config_options.light_designer.pointer_color')" :icon-component="Pencil">
+          <HSLInput />
         </ConfigSection>
       </ScrollArea>
     </div>
@@ -11,20 +24,7 @@
 </template>
 <script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Lightbulb } from 'lucide-vue-next'
+import { Lightbulb, Brush, Pencil, Paintbrush } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import HSLInput from '@/components/HSLInput.vue'
-</script>
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/lang/en.json b/src/lang/en.json
index 22fb7bb..bb70aec 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -31,6 +31,11 @@
       "title": "GUI Designer"
     },
     "light_designer": {
+      "led_feedback": "LED Feedback",
+      "led_mode": "LED Mode",
+      "pointer_color": "Pointer Color",
+      "primary_color": "Primary Color",
+      "secondary_color": "Secondary Color",
       "subtitle": "Adjust behavior of LED Ring. Turn On/Off.",
       "title": "Light Designer"
     },