diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
index 05d99cac8..026fd76ac 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js
+++ b/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 = $("", {
+ class: "red-ui-subflow-color-spec"
+ }).appendTo(colorRow);
+ var colorButton = $("").appendTo(colorSpec);
+ var colorIcon = $(" ").css({
+ width: "30px",
+ height: "20px",
+ "padding-left": "15px",
+ "padding-right": "5px"
+ }).appendTo(colorButton);
+ var colorDisp = $("").css({
+ width: "40px",
+ height: "20px",
+ margin: "6px",
+ "vertical-align": "middle",
+ "background-color": color
+ }).appendTo(colorButton);
+ var selector = $("", {
+ 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 = $("
", {
+ class: "red-ui-color-picker"
+ }).css({
+ width: (width*4)+"px",
+ height: Math.ceil(numColors/4)*height+"+px"
+ });
+
+ var pickerBackground = $('').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 = $("
").appendTo(picker);
+ }
+ var 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 = $('
').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 = $("
", {
class: "form-row"
}).appendTo(dialogForm);
$("
").text(RED._("editor.color")).appendTo(colorRow);
- var selector = $("
", {
- id: "red-ui-editor-node-color",
- type: "color",
- value: "#E9967A",
- list: "red-ui-editor-node-colors"
- }).css({
- width: "100px"
- }).appendTo(colorRow);
- var colors = $("