Make icon and color pickers more consistent

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

@@ -715,30 +715,8 @@ RED.editor = (function() {
         }
         return result;
     }
-    function showIconPicker(container, node, iconPath, faOnly, done) {
+    function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
-        var containerPos = container.offset();
+        var picker = $('<div class="red-ui-icon-picker">');
-        var pickerBackground = $('<div>').css({
-            position: "absolute",top:0,bottom:0,left:0,right:0,zIndex:20
-        }).appendTo("body");
-
-        var top = containerPos.top - 30;
-
-        if (top+280 > $( window ).height()) {
-            top = $( window ).height() - 280;
-        }
-        var picker = $('<div class="red-ui-icon-picker">').css({
-            top: top+"px",
-            left: containerPos.left+"px",
-        }).appendTo("#red-ui-editor");
-
-        var hide = function() {
-            pickerBackground.remove();
-            picker.remove();
-            RED.keyboard.remove("escape");
-        }
-        RED.keyboard.add("*","escape",function(){hide()});
-        pickerBackground.on("mousedown", hide);
-
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
         searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
             delay: 50,
@@ -766,14 +744,14 @@ RED.editor = (function() {
         var summary = $('<span>').appendTo(metaRow);
         var resetButton = $('<button type="button" class="red-ui-button red-ui-button-small">'+RED._("editor.useDefault")+'</button>').appendTo(metaRow).on("click", function(e) {
             e.preventDefault();
-            hide();
+            iconPanel.hide();
             done(null);
         });
-        var iconSets = RED.nodes.getIconSets();
+        if (!backgroundColor && faOnly) {
-        var backgroundColor = node && RED.utils.getNodeColor(node.type, node._def);
-        if (!node && faOnly) {
             iconList.addClass("red-ui-icon-list-dark");
         }
+        setTimeout(function() {
+            var iconSets = RED.nodes.getIconSets();
             Object.keys(iconSets).forEach(function(moduleName) {
                 if (faOnly && (moduleName !== "font-awesome")) {
                     return;
@@ -788,7 +766,7 @@ RED.editor = (function() {
                         var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
                         var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
                         iconDiv.data('icon',icon_url);
-                    if (node) {
+                        if (backgroundColor) {
                             nodeDiv.css({
                                 'backgroundColor': backgroundColor
                             });
@@ -806,59 +784,50 @@ RED.editor = (function() {
                             summary.html("&nbsp;");
                         })
                         iconDiv.on("click", function() {
-                        hide();
+                            iconPanel.hide();
                             done(moduleName+"/"+icon);
                         })
                     })
                 }
             });
+            setTimeout(function() {
+                spinner.remove();
+            },50);
+        },300);
+        var spinner = RED.utils.addSpinnerOverlay(iconList,true);
+        var iconPanel = RED.popover.panel(picker);
+        iconPanel.show({
+            target: container
+        })
+
+
         picker.slideDown(100);
         searchInput.trigger("focus");
     }
 
     function createColorPicker(colorRow, color) {
-        var colorSpec = $("<span/>", {
+
-            class: "red-ui-subflow-color-spec"
+        var colorButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(colorRow);
-        }).appendTo(colorRow);
+        $('<i class="fa fa-caret-down"></i>').appendTo(colorButton);
-        var colorButton = $("<label/>").appendTo(colorSpec);
+
-        var colorIcon = $("<span><i class='fa fa-caret-down'/> </span>").css({
+        var colorDisp = $('<div>',{class:"red-ui-search-result-node"}).appendTo(colorButton);
-            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({
+            marginLeft: "10px",
             width: "150px",
-            border: "none"
+        }).appendTo(colorRow);
-        }).appendTo(colorSpec);
 
         selector.on("change", function (e) {
             var color = selector.val();
-            colorDisp.css({
+            $(".red-ui-editor-node-appearance-button .red-ui-search-result-node").css({
                 "background-color": color
             });
         });
-        selector.hover(function (e) {
+        selector.trigger("change");
-            selector.css({
-                "border": "solid 1px #ccc"
-            });
-        }, function() {
-            selector.css({
-                "border": "none"
-            });
-        });
-
         colorButton.on("click", function (e) {
             var recommendedColors = [
                 "#3FADB5", "#87A980", "#A6BBCF",
@@ -869,64 +838,62 @@ RED.editor = (function() {
                 "#E9967A", "#F3B567", "#FDD0A2",
                 "#FDF0C2", "#FFAAAA", "#FFCC66",
                 "#FFF0F0", "#FFFFFF"
-            ];
+            ].map(function(c) {
+                var r = parseInt(c.substring(1, 3), 16) / 255;
+                var g = parseInt(c.substring(3, 5), 16) / 255;
+                var b = parseInt(c.substring(5, 7), 16) / 255;
+                return {
+                    hex: c,
+                    r: r,
+                    g: g,
+                    b: b,
+                    l: 0.3 * r + 0.59 * g + 0.11 * b
+                }
+            });
+            // Sort by luminosity.
+            recommendedColors.sort(function (a, b) {
+                return a.l - b.l;
+            });
+
             var numColors = recommendedColors.length;
-            var width = 58;
+            var width = 30;
-            var height = 28;
+            var height = 30;
+            var margin = 2;
+            var perRow = 6;
             var picker = $("<div/>", {
                 class: "red-ui-color-picker"
             }).css({
-                width: (width*4)+"px",
+                width: ((width+margin+margin)*perRow)+"px",
-                height: Math.ceil(numColors/4)*height+"+px"
+                height: Math.ceil(numColors/perRow)*(height+margin+margin)+"+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) {
+                if ((count % perRow) == 0) {
                     row = $("<div/>").appendTo(picker);
                 }
                 var button = $("<button/>", {
                 }).css({
-                    width: "50px",
+                    width: width+"px",
-                    height: "20px",
+                    height: height+"px",
-                    margin: "4px",
+                    margin: margin+"px",
-                    backgroundColor: col,
+                    backgroundColor: col.hex,
-                    "border-style": "none"
+                    "border-style": "solid",
+                    "border-width": "1px",
+                    "border-color": col.luma<0.92?col.hex:'#ccc'
                 }).appendTo(row);
                 button.on("click",  function (e) {
                     e.preventDefault();
-                    hide();
+                    colorPanel.hide();
-                    selector.val(col);
+                    selector.val(col.hex);
-                    selector.change();
+                    selector.trigger("change");
                 });
                 count++;
             });
-
+            var colorPanel = RED.popover.panel(picker);
-            RED.keyboard.add("*", "escape", hide);
+            colorPanel.show({
-            pickerBackground.on("mousedown", hide);
+                target: colorButton
-            pickerBackground.show();
+            })
-            picker.show();
         });
     }
 
@@ -1008,13 +975,24 @@ RED.editor = (function() {
         }
         $("#node-input-show-label").prop("checked",node.l).trigger("change");
 
+        if (node.type === "subflow") {
+            // subflow template can select its color
+            var color = node.color ? node.color : "#da9";
+            var colorRow = $("<div/>", {
+                class: "form-row"
+            }).appendTo(dialogForm);
+            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
+            createColorPicker(colorRow, color);
+        }
+
+
         // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
         if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
             var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
             $('<label data-i18n="editor.settingIcon">').appendTo(iconRow);
 
-            var iconButton = $('<button type="button" class="red-ui-button" id="red-ui-editor-node-icon-button">').appendTo(iconRow);
+            var iconButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(iconRow);
-
+            $('<i class="fa fa-caret-down"></i>').appendTo(iconButton);
             var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
             var colour = RED.utils.getNodeColor(node.type, node._def);
             var icon_url = RED.utils.getNodeIcon(node._def,node);
@@ -1025,30 +1003,29 @@ RED.editor = (function() {
             iconButton.on("click", function(e) {
                 e.preventDefault();
                 var iconPath;
-                var icon = $("#red-ui-editor-node-icon").text()||"";
+                var icon = $("#red-ui-editor-node-icon").val()||"";
                 if (icon) {
                     iconPath = RED.utils.separateIconPath(icon);
                 } else {
                     iconPath = RED.utils.getDefaultNodeIcon(node._def, node);
                 }
-                showIconPicker(iconRow,node,iconPath,false,function(newIcon) {
+                var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
-                    $("#red-ui-editor-node-icon").text(newIcon||"");
+                if (node.type === "subflow") {
+                    backgroundColor = $("#red-ui-editor-node-color").val();
+                }
+                showIconPicker(iconButton,backgroundColor,iconPath,false,function(newIcon) {
+                    $("#red-ui-editor-node-icon").val(newIcon||"");
                     var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
                     RED.utils.createIconElement(icon_url, iconContainer, true);
                 });
             });
-            $('<div id="red-ui-editor-node-icon">').text(node.icon).appendTo(iconButton);
+
+            RED.popover.tooltip(iconButton, function() {
+                return $("#red-ui-editor-node-icon").val()||"default";
+            })
+            $('<input type="hidden" id="red-ui-editor-node-icon">').val(node.icon).appendTo(iconRow);
         }
 
-        if (node.type === "subflow") {
-            // subflow template can select its color
-            var color = node.color ? node.color : "#da9";
-            var colorRow = $("<div/>", {
-                class: "form-row"
-            }).appendTo(dialogForm);
-            $("<label/>").text(RED._("editor.color")).appendTo(colorRow);
-            createColorPicker(colorRow, color);
-        }
 
         $('<div class="form-row"><span data-i18n="editor.portLabels"></span></div>').appendTo(dialogForm);
 
@@ -1373,7 +1350,7 @@ RED.editor = (function() {
                         }
 
                         if (!editing_node._def.defaults || !editing_node._def.defaults.hasOwnProperty("icon")) {
-                            var icon = $("#red-ui-editor-node-icon").text()||""
+                            var icon = $("#red-ui-editor-node-icon").val()||""
                             if (!isDefaultIcon) {
                                 if (icon !== editing_node.icon) {
                                     changes.icon = editing_node.icon;
@@ -2217,7 +2194,7 @@ RED.editor = (function() {
                         if (updateLabels(editing_node, changes, null)) {
                             changed = true;
                         }
-                        var icon = $("#red-ui-editor-node-icon").text()||"";
+                        var icon = $("#red-ui-editor-node-icon").val()||"";
                         if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
                             (editing_node.icon !== undefined && editing_node.icon !== icon)) {
                             changes.icon = editing_node.icon;

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

@@ -1008,7 +1008,7 @@ RED.subflow = (function() {
              evt.preventDefault();
              var icon = ui.icon || "";
              var iconPath = (icon ? RED.utils.separateIconPath(icon) : {});
-             RED.editor.showIconPicker(row, null, iconPath, true, function (newIcon) {
+             RED.editor.showIconPicker(iconButton, null, iconPath, true, function (newIcon) {
                  iconButton.empty();
                  var path = newIcon || "";
                  var newPath = RED.utils.separateIconPath(path);

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

@@ -392,28 +392,26 @@ button.red-ui-button-small
     }
 }
 
-
+button.red-ui-button.red-ui-editor-node-appearance-button {
-#red-ui-editor-node-icon-button {
     position: relative;
-    padding-left: 30px;
+    height: 35px !important;
-    width: calc(100% - 150px);
+    text-align: left;
+    padding: 0 6px  0 3px;
+    >i {
+        width: 15px;
+        vertical-align: middle;
+        padding-left: 2px;
+    }
     .red-ui-search-result-node {
-        position: absolute;
+        vertical-align: middle;
-        top: 2px;
+        float: none;
-        left: 2px;
+        position: relative;
+        top: -1px;
+
     }
 }
-#red-ui-editor-node-icon {
+
-    margin-left: 10px;
-    width: calc(100% - 163px);
-}
 .red-ui-icon-picker {
-    position: absolute;
-    border: 1px solid $primary-border-color;
-    box-shadow: 0 1px 6px -3px black;
-    background: $secondary-background;
-    z-Index: 21;
-    display: none;
     select {
         box-sizing: border-box;
         margin: 3px;
@@ -425,6 +423,7 @@ button.red-ui-button-small
     height: 200px;
     overflow-y: scroll;
     line-height: 0px;
+    position: relative;
     &.red-ui-icon-list-dark {
         .red-ui-palette-icon-fa {
             color: $secondary-text-color;
@@ -594,25 +593,6 @@ 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;
-}
 
 .red-ui-editor-subflow-env-ui-row {
     margin-right: 3px;