Fix the color preview when HSL is the source

diff --git a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
index 045bb3b0b380a9b8371f1695c948818af7cc5bd5..3ef0470bfcad1cfa923a5cc00f3aa9b591afaafb 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
+++ b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
@@ -288,17 +288,26 @@ class UiColorPicker implements DialogCallbackObject {
     }
 
     const { r, g, b, a } = color;
-    const { h, s, l } = ColorUtil.rgbToHsl(r, g, b);
 
-    if (source !== ColorSource.HSL) {
+    if (source === ColorSource.HSL) {
+      const h = this.hsl.get(HSL.Hue)!.value;
+      const s = this.hsl.get(HSL.Saturation)!.value;
+      const l = this.hsl.get(HSL.Lightness)!.value;
+
+      this.hslContainer!.style.setProperty(`--${HSL.Hue}`, `${h}`);
+      this.hslContainer!.style.setProperty(`--${HSL.Saturation}`, `${s}%`);
+      this.hslContainer!.style.setProperty(`--${HSL.Lightness}`, `${l}%`);
+    } else {
+      const { h, s, l } = ColorUtil.rgbToHsl(r, g, b);
+
       this.hsl.get(HSL.Hue)!.value = h.toString();
       this.hsl.get(HSL.Saturation)!.value = s.toString();
       this.hsl.get(HSL.Lightness)!.value = l.toString();
-    }
 
-    this.hslContainer!.style.setProperty(`--${HSL.Hue}`, `${h}`);
-    this.hslContainer!.style.setProperty(`--${HSL.Saturation}`, `${s}%`);
-    this.hslContainer!.style.setProperty(`--${HSL.Lightness}`, `${l}%`);
+      this.hslContainer!.style.setProperty(`--${HSL.Hue}`, `${h}`);
+      this.hslContainer!.style.setProperty(`--${HSL.Saturation}`, `${s}%`);
+      this.hslContainer!.style.setProperty(`--${HSL.Lightness}`, `${l}%`);
+    }
 
     if (source !== ColorSource.RGBA) {
       this.channels.get(Channel.R)!.value = r.toString();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
index d7d22f9eae8424f309e42d78347b81c08e6c559c..69dd6b9d2ae3d6b6516e8de20c9d4443033cad15 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
@@ -227,15 +227,23 @@ define(["require", "exports", "tslib", "../../Core", "../Dialog", "../../Dom/Uti
                 color = ColorUtil.stringToRgba(color);
             }
             const { r, g, b, a } = color;
-            const { h, s, l } = ColorUtil.rgbToHsl(r, g, b);
-            if (source !== "hsl" /* ColorSource.HSL */) {
+            if (source === "hsl" /* ColorSource.HSL */) {
+                const h = this.hsl.get("hue" /* HSL.Hue */).value;
+                const s = this.hsl.get("saturation" /* HSL.Saturation */).value;
+                const l = this.hsl.get("lightness" /* HSL.Lightness */).value;
+                this.hslContainer.style.setProperty(`--${"hue" /* HSL.Hue */}`, `${h}`);
+                this.hslContainer.style.setProperty(`--${"saturation" /* HSL.Saturation */}`, `${s}%`);
+                this.hslContainer.style.setProperty(`--${"lightness" /* HSL.Lightness */}`, `${l}%`);
+            }
+            else {
+                const { h, s, l } = ColorUtil.rgbToHsl(r, g, b);
                 this.hsl.get("hue" /* HSL.Hue */).value = h.toString();
                 this.hsl.get("saturation" /* HSL.Saturation */).value = s.toString();
                 this.hsl.get("lightness" /* HSL.Lightness */).value = l.toString();
+                this.hslContainer.style.setProperty(`--${"hue" /* HSL.Hue */}`, `${h}`);
+                this.hslContainer.style.setProperty(`--${"saturation" /* HSL.Saturation */}`, `${s}%`);
+                this.hslContainer.style.setProperty(`--${"lightness" /* HSL.Lightness */}`, `${l}%`);
             }
-            this.hslContainer.style.setProperty(`--${"hue" /* HSL.Hue */}`, `${h}`);
-            this.hslContainer.style.setProperty(`--${"saturation" /* HSL.Saturation */}`, `${s}%`);
-            this.hslContainer.style.setProperty(`--${"lightness" /* HSL.Lightness */}`, `${l}%`);
             if (source !== "rgba" /* ColorSource.RGBA */) {
                 this.channels.get("r" /* Channel.R */).value = r.toString();
                 this.channels.get("g" /* Channel.G */).value = g.toString();