feat(ui): add color switch (#139)

TheRealKasumi · Mar 31, 2023 · cccad11 · cccad11
1 parent b5a1e88
commit cccad11
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/ui/public/locales/de/translation.json b/ui/public/locales/de/translation.json
@@ -150,8 +150,7 @@
     "brightnessVariance": "Helligkeitsabweichung",
     "bounceAtCorner": "Partikel abprallen",
     "channelCurrents": "LED-Strom pro Kanal (MA)",
-    "color1": "Farbe 1",
-    "color2": "Farbe 2",
+    "color": "Farbe",
     "dataSource": "Wert",
     "direction": {
       "desc": "Die Richtung der Animation umkehren",

diff --git a/ui/public/locales/en/translation.json b/ui/public/locales/en/translation.json
@@ -150,8 +150,7 @@
     "brightnessVariance": "Brightness Variance",
     "bounceAtCorner": "Bounce Particles",
     "channelCurrents": "LED Current per Channel (MA)",
-    "color1": "Color 1",
-    "color2": "Color 2",
+    "color": "Color",
     "dataSource": "Source",
     "direction": {
       "desc": "Reverse the animation direction",

diff --git a/ui/src/pages/Zone.tsx b/ui/src/pages/Zone.tsx
@@ -437,27 +437,38 @@ const Form = ({ zoneId }: FormProps): JSX.Element => {
             AnimationType.Static,
           ].includes(Number(values.type)) && (
             <label className="mb-6 flex flex-col">
-              <span className="mb-2">{t('zone.color1')}</span>
-              <ColorPicker<FormData>
-                className="h-10 w-full"
-                control={control}
-                name="color1"
-              />
-            </label>
-          )}
-
-          {[
-            AnimationType.ColorBar,
-            AnimationType.Gradient,
-            AnimationType.GradientMotion,
-          ].includes(Number(values.type)) && (
-            <label className="mb-6 flex flex-col">
-              <span className="mb-2">{t('zone.color2')}</span>
-              <ColorPicker<FormData>
-                className="h-10 w-full"
-                control={control}
-                name="color2"
-              />
+              <span className="mb-2">{t('zone.color')}</span>
+              <div className="flex">
+                <ColorPicker<FormData>
+                  className="h-10 grow"
+                  control={control}
+                  name="color1"
+                />
+                {[
+                  AnimationType.ColorBar,
+                  AnimationType.Gradient,
+                  AnimationType.GradientMotion,
+                ].includes(Number(values.type)) && (
+                  <>
+                    <button
+                      type="button"
+                      className="grow-0 px-4 focus:outline-none focus-visible:ring focus-visible:ring-sky focus-visible:ring-opacity-75"
+                      onClick={() => {
+                        const { color1, color2 } = values;
+                        setValue('color1', color2);
+                        setValue('color2', color1);
+                      }}
+                    >
+                      <ArrowsRightLeftIcon className="h-5 w-5 text-zinc" />
+                    </button>
+                    <ColorPicker<FormData>
+                      className="h-10 grow"
+                      control={control}
+                      name="color2"
+                    />
+                  </>
+                )}
+              </div>
             </label>
           )}