use custom color picker instead of color input type

packages/node_modules/@node-red/editor-client/src/js/ui/editor.js

@@ -948,6 +948,120 @@ RED.editor = (function() {
         searchInput.trigger("focus");
     }
 
+    function createColorPicker(colorRow, color) {
+        var colorSpec = $("<span/>", {
+            class: "red-ui-subflow-color-spec"
+        }).appendTo(colorRow);
+        var colorButton = $("<label/>").appendTo(colorSpec);
+        var colorIcon = $("<span><i class='fa fa-caret-down'/> </span>").css({
+            width: "30px",
+            height: "20px",
+            "padding-left": "15px",
+            "padding-right": "5px"
+        }).appendTo(colorButton);
+        var colorDisp = $("<label/>").css({
+            width: "40px",
+            height: "20px",
+            margin: "6px",
+            "vertical-align": "middle",
+            "background-color": color
+        }).appendTo(colorButton);
+        var selector = $("<input/>", {
+            id: "red-ui-editor-node-color",
+            type: "text",
+            value: color
+        }).css({
+            width: "150px",
+            border: "none"
+        }).appendTo(colorSpec);
+
+        selector.on("change", function (e) {
+            var color = selector.val();
+            colorDisp.css({
+                "background-color": color
+            });
+        });
+        selector.hover(function (e) {
+            selector.css({
+                "border": "solid 1px #ccc"
+            });
+        }, function() {
+            selector.css({
+                "border": "none"
+            });
+        });
+
+        colorButton.on("click", function (e) {
+            var recommendedColors = [
+                "#3FADB5", "#87A980", "#A6BBCF",
+                "#AAAA66", "#C0C0C0", "#C0DEED",
+                "#C7E9C0", "#D7D7A0", "#D8BFD8",
+                "#DAC4B4", "#DEB887", "#DEBD5C",
+                "#E2D96E", "#E6E0F8", "#E7E7AE",
+                "#E9967A", "#F3B567", "#FDD0A2",
+                "#FDF0C2", "#FFAAAA", "#FFCC66",
+                "#FFF0F0", "#FFFFFF"
+            ];
+            var numColors = recommendedColors.length;
+            var width = 58;
+            var height = 28;
+            var picker = $("<div/>", {
+                class: "red-ui-color-picker"
+            }).css({
+                width: (width*4)+"px",
+                height: Math.ceil(numColors/4)*height+"+px"
+            });
+
+            var pickerBackground = $('<div>').css({
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                zIndex: 20
+            }).appendTo("body");
+            var colorPos = colorDisp.offset();
+            picker.css({
+                top: (colorPos.top +32) +"px",
+                left: (colorPos.left -20) +"px"
+            }).appendTo("body");
+
+            function hide() {
+                pickerBackground.remove();
+                picker.remove();
+                RED.keyboard.remove("escape");
+            }
+
+            var count = 0;
+            var row = null;
+            recommendedColors.forEach(function (col) {
+                if ((count % 4) == 0) {
+                    row = $("<div/>").appendTo(picker);
+                }
+                var button = $("<button/>", {
+                }).css({
+                    width: "50px",
+                    height: "20px",
+                    margin: "4px",
+                    backgroundColor: col,
+                    "border-style": "none"
+                }).appendTo(row);
+                button.on("click",  function (e) {
+                    e.preventDefault();
+                    hide();
+                    selector.val(col);
+                    selector.change();
+                });
+                count++;
+            });
+
+            RED.keyboard.add("*", "escape", hide);
+            pickerBackground.on("mousedown", hide);
+            pickerBackground.show();
+            picker.show();
+        });                
+    }
+
     function buildAppearanceForm(container,node) {
         var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
 
@@ -1003,38 +1117,13 @@ RED.editor = (function() {
 
         if (node.type === "subflow") {
             // subflow template can select its color
+            var color = node.color ? node.color : "#E9967A";
             var colorRow = $("<div/>", {
                 class: "form-row"
             }).appendTo(dialogForm);
             $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
-            var selector = $("<input/>", {
+            createColorPicker(colorRow, color);
-                id: "red-ui-editor-node-color",
+        }
-                type: "color",
-                value: "#E9967A",
-                list: "red-ui-editor-node-colors"
-            }).css({
-                width: "100px"
-            }).appendTo(colorRow);
-            var colors = $("<datalist id='red-ui-editor-node-colors'>").appendTo(colorRow);
-            var recommendedColors = [
-                "#3FADB5", "#87A980", "#A6BBCF",
-                "#AAAA66", "#C0C0C0", "#C0DEED",
-                "#C7E9C0", "#D7D7A0", "#D8BFD8",
-                "#DAC4B4", "#DEB887", "#DEBD5C",
-                "#E2D96E", "#E6E0F8", "#E7E7AE",
-                "#E9967A", "#F3B567", "#FDD0A2",
-                "#FDF0C2", "#FFAAAA", "#FFCC66",
-                "#FFF0F0", "#FFFFFF"
-            ];
-            recommendedColors.forEach(function (col) {
-                var opt = $("<option>").appendTo(colors);
-                opt.val(col);
-            });
-            if (node.color) {
-                selector.val(node.color);
-            }
-            selector.change();
-        }        
 
         $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
 

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -579,3 +579,23 @@ button.red-ui-button-small
 button.red-ui-toggleButton.toggle {
     text-align: left;
 }
+
+.red-ui-color-picker {
+    position: absolute;
+    border: 1px solid $primary-border-color;
+    box-shadow: 0 1px 6px -3px black;
+    background: $secondary-background;
+    z-Index: 21;
+    display: none;
+}
+
+.red-ui-subflow-color-spec {
+    width: fit-content;
+    height: fit-content;
+    padding-top: 8px;
+    padding-bottom: 10px;
+    padding-left: 0px;
+    padding-right: 0px;
+    border: solid 1px $primary-border-color;
+    border-radius: 2px;
+}