cx 23.9.1 → 23.11.0

package/src/widgets/form/ColorPicker.js

@@ -9,6 +9,7 @@ import { getVendorPrefix } from "../../util/getVendorPrefix";
 import { stopPropagation } from "../../util/eventCallbacks";
 import { isString } from "../../util/isString";
 import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import PixelPickerIcon from "../icons/pixel-picker";
 
 //TODO: Increase HSL precision in calculations, round only RGB values
 //TODO: Resolve alpha input problems
@@ -35,13 +36,15 @@ export class ColorPicker extends Field {
          switch (data.format) {
             default:
             case "rgba":
-               value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${Math.round(color.a * 100) / 100
-                  })`;
+               value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
+                  Math.round(color.a * 100) / 100
+               })`;
                break;
 
             case "hsla":
-               value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${Math.round(color.a * 100) / 100
-                  })`;
+               value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
+                  Math.round(color.a * 100) / 100
+               })`;
                break;
 
             case "hex":
@@ -114,16 +117,34 @@ class ColorPickerComponent extends VDOM.Component {
       let { widget, data } = instance;
       let { CSS, baseClass } = widget;
       let hcolor = `hsl(${h},100%,50%)`;
-      let hsl = `hsl(${h},${s}%,${l}%)`;
       let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
-      let rgb = `rgb(${r},${g},${b})`;
       let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
       let hex = rgbToHex(r, g, b);
+      let pixelPicker;
 
       let alphaGradient = `${getVendorPrefix(
          "css"
       )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
 
+      if (window.EyeDropper) {
+         pixelPicker = (
+            <div
+               className={CSS.element(baseClass, "pixel-picker")}
+               onClick={(e) => {
+                  const eyeDropper = new EyeDropper();
+                  eyeDropper
+                     .open()
+                     .then((result) => {
+                        instance.set("value", result.sRGBHex);
+                     })
+                     .catch((e) => {});
+               }}
+            >
+               <PixelPickerIcon />
+            </div>
+         );
+      }
+
       return (
          <div
             className={data.classNames}
@@ -280,19 +301,27 @@ class ColorPickerComponent extends VDOM.Component {
                   </label>
                </div>
                <div className={CSS.element(baseClass, "preview")}>
+                  <div
+                     style={{
+                        display: "flex",
+                        alignItems: "center",
+                     }}
+                  >
+                     <div
+                        className={CSS.element(baseClass, "color")}
+                        onClick={(e) => {
+                           this.onColorClick(e);
+                        }}
+                     >
+                        <div style={{ backgroundColor: hsla }}></div>
+                     </div>
+                  </div>
                   <div className={CSS.element(baseClass, "values")}>
                      <input value={hsla} readOnly />
                      <input value={rgba} readOnly />
                      <input value={hex} readOnly />
                   </div>
-                  <div
-                     className={CSS.element(baseClass, "color")}
-                     onClick={(e) => {
-                        this.onColorClick(e);
-                     }}
-                  >
-                     <div style={{ backgroundColor: hsla }}></div>
-                  </div>
+                  {pixelPicker}
                </div>
             </div>
          </div>

package/src/widgets/form/ColorPicker.scss

@@ -1,185 +1,275 @@
-
-//@if cx-call-once("cx/widgets/checker-background") {
-//   %cx-checker-bg {
-//      background-repeat: repeat;
-//      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
-//   }
-//}
-
-@mixin cx-checker-background(
-   $tile-size: 4px,
-   $color: rgba(gray, 0.5)
-) {
-   background-image: linear-gradient(45deg, $color 25%, transparent 25%), linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%), linear-gradient(-45deg, transparent 75%, $color 75%);
-   background-size: 2 * $tile-size 2 * $tile-size;
-   background-position: 0 0, 0 $tile-size, $tile-size -#{$tile-size}, -#{$tile-size} 0px;
-}
-
-@mixin cx-colorpicker(
-   $name: 'colorpicker',
-   $state-style-map: $cx-colorpicker-state-style-map,
-   $placeholder: $cx-input-placeholder,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-
-      @include cx-add-state-rules($state-style-map, default);
-
-      display: inline-flex;
-      flex-direction: column;
-
-      @media screen and (min-width: 500px) {
-         flex-direction: row;
-      }
-
-      &:hover {
-        @include cx-add-state-rules($state-style-map, hover);
-      }
-
-      input {
-         @include cxe-field-input(
-            $besm,
-            $state-style-map,
-            $placeholder: $placeholder,
-            $input: false,
-            $overrides: (
-               default: (
-                  line-height: 12px,
-                  font-size: 11px,
-                  font-family: $cx-default-colorpicker-font-family,
-                  padding: 2px
-               )
-            )
-         );
-      }
-   }
-
-   .#{$element}#{$name}-picker {
-      width: 200px;
-      height: 200px;
-      margin: 5px;
-      //cursor: crosshair;
-      float: left;
-      position: relative;
-      touch-action: none;
-
-      background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-      background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-   }
-
-   .#{$element}#{$name}-indicator {
-      position: absolute;
-      border: 2px solid rgba(255, 255, 255, 0.8);
-      border-radius: 50%;
-      box-sizing: border-box;
-      width: 9px;
-      height: 9px;
-      left: calc(50% - 5px);
-      top: calc(50% - 5px);
-   }
-
-   .#{$element}#{$name}-hue {
-      height: 15px;
-      position: relative;
-      background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-      background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-      background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-      background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-      touch-action: none;
-      //margin-bottom: 5px;
-
-      .#{$element}#{$name}-indicator {
-         border-color: rgba(0, 0, 0, 0.5);
-         height: calc(100% + 4px);
-         border-radius: 2px;
-         width: 4px;
-         top: -2px;
-      }
-   }
-
-   .#{$element}#{$name}-alpha {
-      height: 16px;
-      //@extend %cx-checker-bg;
-      @include cx-checker-background();
-      position: relative;
-      touch-action: none;
-
-      & > div:first-child {
-         width: 100%;
-         height: 100%;
-      }
-
-      .#{$element}#{$name}-indicator {
-         border-color: rgba(0, 0, 0, 0.5);
-         top: -2px;
-         height: calc(100% + 4px);
-         border-radius: 2px;
-         width: 4px;
-      }
-   }
-
-   .#{$element}#{$name}-details {
-      width: 200px;
-      min-height: 170px;
-      float: left;
-      margin: 5px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-   }
-
-   .#{$element}#{$name}-inputs {
-      label {
-         width: 25%;
-         display: inline-block;
-         text-align: right;
-         font-size: 12px;
-
-         input {
-            width: 60%;
-            text-align: center;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-preview {
-   }
-
-   .#{$element}#{$name}-color {
-      //@extend %cx-checker-bg;
-      @include cx-checker-background();
-      height: 68px;
-      width: 68px;
-      float: right;
-
-      & > div {
-         width: 100%;
-         height: 100%;
-      }
-   }
-
-   .#{$element}#{$name}-values {
-      float: left;
-      width: 100px;
-      margin-right: 5px;
-
-      input {
-         width: 120px;
-         display: block;
-      }
-
-      input:not(:last-child) {
-         margin: 0 0 8px 0;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/ColorPicker')) {
-   @include cx-colorpicker();
-}
+//@if cx-call-once("cx/widgets/checker-background") {
+//   %cx-checker-bg {
+//      background-repeat: repeat;
+//      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
+//   }
+//}
+
+@mixin cx-checker-background($tile-size: 4px, $color: rgba(gray, 0.5)) {
+   background-image: linear-gradient(45deg, $color 25%, transparent 25%),
+      linear-gradient(-45deg, $color 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $color 75%),
+      linear-gradient(-45deg, transparent 75%, $color 75%);
+   background-size: 2 * $tile-size 2 * $tile-size;
+   background-position: 0 0, 0 $tile-size, $tile-size -#{$tile-size}, -#{$tile-size} 0px;
+}
+
+@mixin cx-colorpicker(
+   $name: "colorpicker",
+   $state-style-map: $cx-colorpicker-state-style-map,
+   $placeholder: $cx-input-placeholder,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   $size: 220px;
+
+   .#{$block}#{$name} {
+      $styles: cx-deep-map-merge(
+         $state-style-map,
+         (
+            default: (
+               padding: 4px,
+            ),
+         )
+      );
+
+      @include cx-add-state-rules($styles, default);
+
+      display: inline-flex;
+      flex-direction: column;
+
+      @media screen and (min-width: 500px) {
+         flex-direction: row;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+      }
+
+      input {
+         @include cxe-field-input(
+            $besm,
+            $state-style-map,
+            $placeholder: $placeholder,
+            $input: false,
+            $overrides: (
+               default: (
+                  line-height: 14px,
+                  font-size: 11px,
+                  font-family: $cx-default-colorpicker-font-family,
+               )
+            )
+         );
+      }
+   }
+
+   .#{$element}#{$name}-picker {
+      width: $size;
+      height: $size;
+      margin: 4px;
+      //cursor: crosshair;
+      position: relative;
+      touch-action: none;
+
+      background: -webkit-linear-gradient(
+            top,
+            hsl(0, 0%, 100%) 0%,
+            hsla(0, 0%, 100%, 0) 50%,
+            hsla(0, 0%, 0%, 0) 50%,
+            hsl(0, 0%, 0%) 100%
+         ),
+         -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+      background: -moz-linear-gradient(
+            top,
+            hsl(0, 0%, 100%) 0%,
+            hsla(0, 0%, 100%, 0) 50%,
+            hsla(0, 0%, 0%, 0) 50%,
+            hsl(0, 0%, 0%) 100%
+         ),
+         -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+      background: -ms-linear-gradient(
+            top,
+            hsl(0, 0%, 100%) 0%,
+            hsla(0, 0%, 100%, 0) 50%,
+            hsla(0, 0%, 0%, 0) 50%,
+            hsl(0, 0%, 0%) 100%
+         ),
+         -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+      background: -o-linear-gradient(
+            top,
+            hsl(0, 0%, 100%) 0%,
+            hsla(0, 0%, 100%, 0) 50%,
+            hsla(0, 0%, 0%, 0) 50%,
+            hsl(0, 0%, 0%) 100%
+         ),
+         -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+   }
+
+   .#{$element}#{$name}-indicator {
+      position: absolute;
+      border: 2px solid rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      box-sizing: border-box;
+      width: 9px;
+      height: 9px;
+      left: calc(50% - 5px);
+      top: calc(50% - 5px);
+   }
+
+   .#{$element}#{$name}-hue {
+      height: 15px;
+      position: relative;
+      background: -moz-linear-gradient(
+         left,
+         #f00 0%,
+         #ff0 16.66%,
+         #0f0 33.33%,
+         #0ff 50%,
+         #00f 66.66%,
+         #f0f 83.33%,
+         #f00 100%
+      );
+      background: -webkit-linear-gradient(
+         left,
+         #f00 0%,
+         #ff0 16.66%,
+         #0f0 33.33%,
+         #0ff 50%,
+         #00f 66.66%,
+         #f0f 83.33%,
+         #f00 100%
+      );
+      background: -ms-linear-gradient(
+         left,
+         #f00 0%,
+         #ff0 16.66%,
+         #0f0 33.33%,
+         #0ff 50%,
+         #00f 66.66%,
+         #f0f 83.33%,
+         #f00 100%
+      );
+      background: -o-linear-gradient(
+         left,
+         #f00 0%,
+         #ff0 16.66%,
+         #0f0 33.33%,
+         #0ff 50%,
+         #00f 66.66%,
+         #f0f 83.33%,
+         #f00 100%
+      );
+      touch-action: none;
+
+      .#{$element}#{$name}-indicator {
+         border-color: rgba(0, 0, 0, 0.5);
+         height: calc(100% + 4px);
+         border-radius: 2px;
+         width: 4px;
+         top: -2px;
+      }
+   }
+
+   .#{$element}#{$name}-alpha {
+      height: 16px;
+      //@extend %cx-checker-bg;
+      @include cx-checker-background();
+      position: relative;
+      touch-action: none;
+
+      & > div:first-child {
+         width: 100%;
+         height: 100%;
+      }
+
+      .#{$element}#{$name}-indicator {
+         border-color: rgba(0, 0, 0, 0.5);
+         top: -2px;
+         height: calc(100% + 4px);
+         border-radius: 2px;
+         width: 4px;
+      }
+   }
+
+   .#{$element}#{$name}-details {
+      width: $size;
+      min-height: 170px;
+      margin: 4px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+   }
+
+   .#{$element}#{$name}-inputs {
+      label {
+         width: 25%;
+         display: inline-block;
+         text-align: right;
+
+         input {
+            margin-left: 2px;
+            width: 60%;
+            text-align: center;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-pixel-picker {
+      display: flex;
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
+      align-items: center;
+      margin-top: 4px;
+
+      svg path {
+         fill: currentColor;
+      }
+
+      &:hover {
+         cursor: pointer;
+
+         svg path {
+            fill: currentColor;
+            opacity: 0.5;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-preview {
+      display: flex;
+   }
+
+   .#{$element}#{$name}-color {
+      @include cx-checker-background();
+      height: 64px;
+      width: 64px;
+      border-radius: 4px;
+      align-self: flex-end;
+
+      & > div {
+         width: 100%;
+         height: 100%;
+      }
+   }
+
+   .#{$element}#{$name}-values {
+      flex-grow: 1;
+      margin: 0 8px;
+
+      input {
+         width: 100%;
+         display: block;
+      }
+
+      input:not(:last-child) {
+         margin: 0 0 4px 0;
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/ColorPicker")) {
+   @include cx-colorpicker();
+}

package/src/widgets/form/ColorPicker.variables.scss

@@ -1,21 +1,22 @@
-
-$cx-default-colorpicker-font-family: 'Consolas', monospace !default;
-$cx-default-colorpicker-font-size: 11px !default;
-$cx-default-colorpicker-background-color: $cx-default-input-background-color !default;
-$cx-default-colorpicker-border-width: $cx-default-box-border-width !default;
-$cx-default-colorpicker-border-color: $cx-default-input-border-color !default;
-$cx-default-colorpicker-box-shadow: none !default;
-
-$cx-colorpicker-state-style-map: cx-deep-map-merge($cx-input-state-style-map, (
-  default: (
-    font-family: $cx-default-colorpicker-font-family,
-    font-size: $cx-default-colorpicker-font-size,
-    background-color: $cx-default-colorpicker-background-color,
-    border-width: $cx-default-colorpicker-border-width,
-    border-color: $cx-default-colorpicker-border-color, 
-    box-shadow: $cx-default-colorpicker-box-shadow
-  ),
-  hover: (
-  
-  )
-)) !default;
+$cx-default-colorpicker-font-family: "Consolas", monospace !default;
+$cx-default-colorpicker-font-size: 11px !default;
+$cx-default-colorpicker-background-color: $cx-default-input-background-color !default;
+$cx-default-colorpicker-border-width: $cx-default-box-border-width !default;
+$cx-default-colorpicker-border-color: $cx-default-input-border-color !default;
+$cx-default-colorpicker-box-shadow: none !default;
+
+$cx-colorpicker-state-style-map: cx-deep-map-merge(
+   $cx-input-state-style-map,
+   (
+      default: (
+         font-family: $cx-default-colorpicker-font-family,
+         font-size: $cx-default-colorpicker-font-size,
+         background-color: $cx-default-colorpicker-background-color,
+         border-width: $cx-default-colorpicker-border-width,
+         border-color: $cx-default-colorpicker-border-color,
+         box-shadow: $cx-default-colorpicker-box-shadow,
+         padding: 2px,
+      ),
+      hover: (),
+   )
+) !default;