Make handle opacity based on alpha

umbraco · Sep 28, 2023 · 6468c60 · 6468c60
1 parent dd34062
commit 6468c60
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 14 deletions.
diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -146,31 +146,23 @@ export class UUIColorAreaElement extends LitElement {
     this._value = newVal;
     this.requestUpdate('value', oldVal);
 
-    console.log("newVal", newVal);
-
     try {
       // TODO: Can we move the parsing of a color string to shared utility function?
       const parsed = colord(newVal);
 
       if (parsed.isValid()) {
-        const { h, s, l } = parsed.toHsl();
+        const { h, s, l, a } = parsed.toHsl();
 
-        console.log("h, s, l", h, s, l);
+        console.log("h, s, l, a", h, s, l, a);
 
-        // Test
-        if (s === 0) {
-          console.log("parsed", parsed.toHsl());
-        }
-
         if (h !== 0) {
           this.hue = h;
         }
 
-        console.log("hue", this.hue);
-
         //this.saturation = s;
         this.lightness = l;
         this.brightness = this.getBrightness(l);
+        this.alpha = a * 100;
       }
     } catch (e) {
       console.log("value err", e);

diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -406,8 +406,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     this._swatches?.resetSelection();
     const element = event.target as UUIColorSliderElement;
 
-    console.log("handleHueChange", element.value);
-
     const newColor: HslaColor = {
       h: element.value,
       s: this.saturation,
@@ -684,7 +682,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         swatch =>
           html`<uui-color-swatch
             label="${swatch}"
-            .value=${swatch}></uui-color-swatch>`
+            .value=${swatch}>
+          </uui-color-swatch>`
       )}
     </uui-color-swatches>`;
   }