frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Make icon and color pickers more consistent

Browse Source
This commit is contained in:
Nick O'Leary 2019-08-12 22:07:55 +01:00
parent 607bc42f59
commit ee6ee99577
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 146 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
packages/node_modules/@node-red/editor-client/src/js/ui/editor.js vendored
View File

@ -715,30 +715,8 @@ RED.editor = (function() {
} }
return result; 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); var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(picker);
searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({ searchInput = $('<input type="text">').attr("placeholder",RED._("editor.searchIcons")).appendTo(searchDiv).searchBox({
delay: 50, delay: 50,
@ -766,99 +744,90 @@ RED.editor = (function() {
var summary = $('<span>').appendTo(metaRow); 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) { 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(); e.preventDefault();
hide(); iconPanel.hide();
done(null); 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"); iconList.addClass("red-ui-icon-list-dark");
} }
Object.keys(iconSets).forEach(function(moduleName) { setTimeout(function() {
if (faOnly && (moduleName !== "font-awesome")) { var iconSets = RED.nodes.getIconSets();
return; Object.keys(iconSets).forEach(function(moduleName) {
} if (faOnly && (moduleName !== "font-awesome")) {
var icons = iconSets[moduleName]; return;
if (icons.length > 0) { }
// selectIconModule.append($("<option></option>").val(moduleName).text(moduleName)); var icons = iconSets[moduleName];
var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList); if (icons.length > 0) {
$('<i class="fa fa-cube"></i>').prependTo(header); // selectIconModule.append($("<option></option>").val(moduleName).text(moduleName));
icons.forEach(function(icon) { var header = $('<div class="red-ui-icon-list-module"></div>').text(moduleName).appendTo(iconList);
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList); $('<i class="fa fa-cube"></i>').prependTo(header);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv); icons.forEach(function(icon) {
var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon; var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
iconDiv.data('icon',icon_url); var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
if (node) { var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
nodeDiv.css({ iconDiv.data('icon',icon_url);
'backgroundColor': backgroundColor if (backgroundColor) {
}); nodeDiv.css({
} 'backgroundColor': backgroundColor
var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); });
RED.utils.createIconElement(icon_url, iconContainer, true); }
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) { if (iconPath.module === moduleName && iconPath.file === icon) {
iconDiv.addClass("selected"); iconDiv.addClass("selected");
} }
iconDiv.on("mouseover", function() { iconDiv.on("mouseover", function() {
summary.text(icon); summary.text(icon);
})
iconDiv.on("mouseout", function() {
summary.html("&nbsp;");
})
iconDiv.on("click", function() {
iconPanel.hide();
done(moduleName+"/"+icon);
})
}) })
iconDiv.on("mouseout", function() { }
summary.html("&nbsp;"); });
}) setTimeout(function() {
iconDiv.on("click", function() { spinner.remove();
hide(); },50);
done(moduleName+"/"+icon); },300);
}) var spinner = RED.utils.addSpinnerOverlay(iconList,true);
}) var iconPanel = RED.popover.panel(picker);
} iconPanel.show({
}); target: container
})
picker.slideDown(100); picker.slideDown(100);
searchInput.trigger("focus"); searchInput.trigger("focus");
} }
function createColorPicker(colorRow, color) { 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/>", { var selector = $("<input/>", {
id: "red-ui-editor-node-color", id: "red-ui-editor-node-color",
type: "text", type: "text",
value: color value: color
}).css({ }).css({
marginLeft: "10px",
width: "150px", width: "150px",
border: "none" }).appendTo(colorRow);
}).appendTo(colorSpec);
selector.on("change", function (e) { selector.on("change", function (e) {
var color = selector.val(); var color = selector.val();
colorDisp.css({ $(".red-ui-editor-node-appearance-button .red-ui-search-result-node").css({
"background-color": color "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) { colorButton.on("click", function (e) {
var recommendedColors = [ var recommendedColors = [
"#3FADB5", "#87A980", "#A6BBCF", "#3FADB5", "#87A980", "#A6BBCF",
@ -869,65 +838,63 @@ RED.editor = (function() {
"#E9967A", "#F3B567", "#FDD0A2", "#E9967A", "#F3B567", "#FDD0A2",
"#FDF0C2", "#FFAAAA", "#FFCC66", "#FDF0C2", "#FFAAAA", "#FFCC66",
"#FFF0F0", "#FFFFFF" "#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 numColors = recommendedColors.length;
var width = 58; var width = 30;
var height = 28; var height = 30;
var margin = 2;
var perRow = 6;
var picker = $("<div/>", { var picker = $("<div/>", {
class: "red-ui-color-picker" class: "red-ui-color-picker"
}).css({ }).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 count = 0;
var row = null; var row = null;
recommendedColors.forEach(function (col) { recommendedColors.forEach(function (col) {
if ((count % 4) == 0) { if ((count % perRow) == 0) {
row = $("<div/>").appendTo(picker); row = $("<div/>").appendTo(picker);
} }
var button = $("<button/>", { var button = $("<button/>", {
}).css({ }).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); }).appendTo(row);
button.on("click", function (e) { button.on("click", function (e) {
e.preventDefault(); e.preventDefault();
hide(); colorPanel.hide();
selector.val(col); selector.val(col.hex);
selector.change(); selector.trigger("change");
}); });
count++; count++;
}); });
var colorPanel = RED.popover.panel(picker);
RED.keyboard.add("*", "escape", hide); colorPanel.show({
pickerBackground.on("mousedown", hide); target: colorButton
pickerBackground.show(); })
picker.show(); });
});
} }
function buildAppearanceForm(container,node) { function buildAppearanceForm(container,node) {
@ -1008,13 +975,24 @@ RED.editor = (function() {
} }
$("#node-input-show-label").prop("checked",node.l).trigger("change"); $("#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 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"))) { if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm); var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
$('<label data-i18n="editor.settingIcon">').appendTo(iconRow); $('<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 nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconButton);
var colour = RED.utils.getNodeColor(node.type, node._def); var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = RED.utils.getNodeIcon(node._def,node); var icon_url = RED.utils.getNodeIcon(node._def,node);
@ -1025,30 +1003,29 @@ RED.editor = (function() {
iconButton.on("click", function(e) { iconButton.on("click", function(e) {
e.preventDefault(); e.preventDefault();
var iconPath; var iconPath;
var icon = $("#red-ui-editor-node-icon").text()||""; var icon = $("#red-ui-editor-node-icon").val()||"";
if (icon) { if (icon) {
iconPath = RED.utils.separateIconPath(icon); iconPath = RED.utils.separateIconPath(icon);
} else { } else {
iconPath = RED.utils.getDefaultNodeIcon(node._def, node); 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}); var icon_url = RED.utils.getNodeIcon(node._def,{type:node.type,icon:newIcon});
RED.utils.createIconElement(icon_url, iconContainer, true); 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); $('<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")) { 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 (!isDefaultIcon) {
if (icon !== editing_node.icon) { if (icon !== editing_node.icon) {
changes.icon = editing_node.icon; changes.icon = editing_node.icon;
@ -2217,7 +2194,7 @@ RED.editor = (function() {
if (updateLabels(editing_node, changes, null)) { if (updateLabels(editing_node, changes, null)) {
changed = true; 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") || if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
(editing_node.icon !== undefined && editing_node.icon !== icon)) { (editing_node.icon !== undefined && editing_node.icon !== icon)) {
changes.icon = editing_node.icon; changes.icon = editing_node.icon;

2
packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js vendored
View File

@ -1008,7 +1008,7 @@ RED.subflow = (function() {
evt.preventDefault(); evt.preventDefault();
var icon = ui.icon || ""; var icon = ui.icon || "";
var iconPath = (icon ? RED.utils.separateIconPath(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(); iconButton.empty();
var path = newIcon || ""; var path = newIcon || "";
var newPath = RED.utils.separateIconPath(path); var newPath = RED.utils.separateIconPath(path);

52
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -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; 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 { .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 { .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 { select {
box-sizing: border-box; box-sizing: border-box;
margin: 3px; margin: 3px;
@ -425,6 +423,7 @@ button.red-ui-button-small
height: 200px; height: 200px;
overflow-y: scroll; overflow-y: scroll;
line-height: 0px; line-height: 0px;
position: relative;
&.red-ui-icon-list-dark { &.red-ui-icon-list-dark {
.red-ui-palette-icon-fa { .red-ui-palette-icon-fa {
color: $secondary-text-color; color: $secondary-text-color;
@ -594,25 +593,6 @@ button.red-ui-toggleButton.toggle {
text-align: left; 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 { .red-ui-editor-subflow-env-ui-row {
margin-right: 3px; margin-right: 3px;