frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Make icon and color pickers more consistent

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;
}
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("&nbsp;");
})
iconDiv.on("click", function() {
iconPanel.hide();
done(moduleName+"/"+icon);
})
})
iconDiv.on("mouseout", function() {
summary.html("&nbsp;");
})
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;

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();
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);

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

@ -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;