From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 8 Sep 2023 14:49:12 +0000 (+0200)
Subject: Fix the color preview when HSL is the source
X-Git-Tag: 6.0.0_RC_1~46
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=6541d5ada50dfbe1705361588723169467693824;p=GitHub%2FWoltLab%2FWCF.git

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 045bb3b0b3..3ef0470bfc 100644
--- 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 d7d22f9eae..69dd6b9d2a 100644
--- 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();