',{class:"red-ui-search-result-node"}).appendTo(colorButton);
+
var selector = $("
", {
id: "red-ui-editor-node-color",
type: "text",
value: color
}).css({
+ marginLeft: "10px",
width: "150px",
- border: "none"
- }).appendTo(colorSpec);
+ }).appendTo(colorRow);
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.css({
- "border": "solid 1px #ccc"
- });
- }, function() {
- selector.css({
- "border": "none"
- });
- });
-
+ selector.trigger("change");
colorButton.on("click", function (e) {
var recommendedColors = [
"#3FADB5", "#87A980", "#A6BBCF",
@@ -869,65 +838,63 @@ 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 height = 28;
+ var width = 30;
+ var height = 30;
+ var margin = 2;
+ var perRow = 6;
var picker = $("
", {
class: "red-ui-color-picker"
}).css({
- width: (width*4)+"px",
- height: Math.ceil(numColors/4)*height+"+px"
+ width: ((width+margin+margin)*perRow)+"px",
+ height: Math.ceil(numColors/perRow)*(height+margin+margin)+"+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) {
+ if ((count % perRow) == 0) {
row = $("
").appendTo(picker);
}
var button = $("
", {
}).css({
- width: "50px",
- height: "20px",
- margin: "4px",
- backgroundColor: col,
- "border-style": "none"
+ width: width+"px",
+ height: height+"px",
+ margin: margin+"px",
+ backgroundColor: col.hex,
+ "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();
- selector.val(col);
- selector.change();
+ colorPanel.hide();
+ selector.val(col.hex);
+ selector.trigger("change");
});
count++;
});
-
- RED.keyboard.add("*", "escape", hide);
- pickerBackground.on("mousedown", hide);
- pickerBackground.show();
- picker.show();
- });
+ var colorPanel = RED.popover.panel(picker);
+ colorPanel.show({
+ target: colorButton
+ })
+ });
}
function buildAppearanceForm(container,node) {
@@ -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 = $("
", {
+ class: "form-row"
+ }).appendTo(dialogForm);
+ $("
").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 = $('
').appendTo(dialogForm);
$('