mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Make icon and color pickers more consistent
This commit is contained in:
Nick O'Leary
parent
607bc42f59
commit
ee6ee99577
@ -715,30 +715,8 @@ RED.editor = (function() {
|
||||
}
|
||||
return result;
|
||||
}
|
||||
function showIconPicker(container, node, iconPath, faOnly, done) {
|
||||
var containerPos = container.offset();
|
||||
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);
|
||||
|
||||
function showIconPicker(container, backgroundColor, iconPath, faOnly, done) {
|
||||
var picker = $('<div class="red-ui-icon-picker">');
|
||||
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,99 +744,90 @@ 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();
|
||||
var backgroundColor = node && RED.utils.getNodeColor(node.type, node._def);
|
||||
if (!node && faOnly) {
|
||||
if (!backgroundColor && faOnly) {
|
||||
iconList.addClass("red-ui-icon-list-dark");
|
||||
}
|
||||
Object.keys(iconSets).forEach(function(moduleName) {
|
||||
if (faOnly && (moduleName !== "font-awesome")) {
|
||||
return;
|
||||
}
|
||||
var icons = iconSets[moduleName];
|
||||
if (icons.length > 0) {
|
||||
// selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
|
||||
var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
|
||||
$('<i class="fa fa-cube"></i>').prependTo(header);
|
||||
icons.forEach(function(icon) {
|
||||
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
|
||||
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) {
|
||||
nodeDiv.css({
|
||||
'backgroundColor': backgroundColor
|
||||
});
|
||||
}
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
setTimeout(function() {
|
||||
var iconSets = RED.nodes.getIconSets();
|
||||
Object.keys(iconSets).forEach(function(moduleName) {
|
||||
if (faOnly && (moduleName !== "font-awesome")) {
|
||||
return;
|
||||
}
|
||||
var icons = iconSets[moduleName];
|
||||
if (icons.length > 0) {
|
||||
// selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
|
||||
var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
|
||||
$('<i class="fa fa-cube"></i>').prependTo(header);
|
||||
icons.forEach(function(icon) {
|
||||
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
|
||||
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 (backgroundColor) {
|
||||
nodeDiv.css({
|
||||
'backgroundColor': backgroundColor
|
||||
});
|
||||
}
|
||||
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv);
|
||||
RED.utils.createIconElement(icon_url, iconContainer, true);
|
||||
|
||||
if (iconPath.module === moduleName && iconPath.file === icon) {
|
||||
iconDiv.addClass("selected");
|
||||
}
|
||||
iconDiv.on("mouseover", function() {
|
||||
summary.text(icon);
|
||||
if (iconPath.module === moduleName && iconPath.file === icon) {
|
||||
iconDiv.addClass("selected");
|
||||
}
|
||||
iconDiv.on("mouseover", function() {
|
||||
summary.text(icon);
|
||||
})
|
||||
iconDiv.on("mouseout", function() {
|
||||
summary.html(" ");
|
||||
})
|
||||
iconDiv.on("click", function() {
|
||||
iconPanel.hide();
|
||||
done(moduleName+"/"+icon);
|
||||
})
|
||||
})
|
||||
iconDiv.on("mouseout", function() {
|
||||
summary.html(" ");
|
||||
})
|
||||
iconDiv.on("click", function() {
|
||||
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"
|
||||
}).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 colorButton = $('<button type="button" class="red-ui-button red-ui-editor-node-appearance-button">').appendTo(colorRow);
|
||||
$('<i class="fa fa-caret-down"></i>').appendTo(colorButton);
|
||||
|
||||
var colorDisp = $('<div>',{class:"red-ui-search-result-node"}).appendTo(colorButton);
|
||||
|
||||
var selector = $("<input/>", {
|
||||
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 = $("<div/>", {
|
||||
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 = $('<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",
|
||||
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 = $("<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) {
|
||||
$("#red-ui-editor-node-icon").text(newIcon||"");
|
||||
var backgroundColor = RED.utils.getNodeColor(node.type, node._def);
|
||||
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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -392,28 +392,26 @@ button.red-ui-button-small
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#red-ui-editor-node-icon-button {
|
||||
button.red-ui-button.red-ui-editor-node-appearance-button {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
width: calc(100% - 150px);
|
||||
height: 35px !important;
|
||||
text-align: left;
|
||||
padding: 0 6px 0 3px;
|
||||
>i {
|
||||
width: 15px;
|
||||
vertical-align: middle;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.red-ui-search-result-node {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
vertical-align: middle;
|
||||
float: none;
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user