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

Show default icon when non-existent font-awesome icon was specified

This commit is contained in:
nakanishi 2018-10-23 16:30:56 +09:00
parent 4a081bf125
commit c9db74ebca
6 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -498,7 +498,7 @@ RED.diff = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, false); RED.utils.createIconElement(icon_url, iconContainer, false, def, node);
return nodeDiv; return nodeDiv;
} }

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

@ -808,6 +808,7 @@ RED.editor = (function() {
buildLabelRow().appendTo(outputsDiv); buildLabelRow().appendTo(outputsDiv);
} }
// 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"))) {
$('<hr>').appendTo(dialogForm); $('<hr>').appendTo(dialogForm);
var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm); var iconRow = $('<div class="form-row"></div>').appendTo(dialogForm);
@ -820,7 +821,7 @@ RED.editor = (function() {
var icon_url = RED.utils.getNodeIcon(node._def,node); var icon_url = RED.utils.getNodeIcon(node._def,node);
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true, node._def, node);
iconButton.click(function(e) { iconButton.click(function(e) {
e.preventDefault(); e.preventDefault();
@ -834,9 +835,9 @@ RED.editor = (function() {
showIconPicker(iconRow,node,iconPath,function(newIcon) { showIconPicker(iconRow,node,iconPath,function(newIcon) {
$("#node-settings-icon").text(newIcon||""); $("#node-settings-icon").text(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, node._def, node);
}); });
}) });
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow); $('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);
} }
} }

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

@ -142,9 +142,9 @@ RED.palette = (function() {
} }
function setIcon(element,sf) { function setIcon(element,sf) {
var icon_url = RED.utils.getNodeIcon(sf._def,sf); var icon_url = RED.utils.getNodeIcon(sf._def);
var iconContainer = element.find(".palette_icon_container"); var iconContainer = element.find(".palette_icon_container");
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true, sf._def);
} }
function escapeNodeType(nt) { function escapeNodeType(nt) {
@ -182,7 +182,7 @@ RED.palette = (function() {
if (def.icon) { if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def); var icon_url = RED.utils.getNodeIcon(def);
var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d); var iconContainer = $('<div/>',{class:"palette_icon_container"+(def.align=="right"?" palette_icon_container_right":"")}).appendTo(d);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true, def);
} }
d.style.backgroundColor = RED.utils.getNodeColor(nt,def); d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

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

@ -203,7 +203,7 @@ RED.search = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, true); RED.utils.createIconElement(icon_url, iconContainer, true, node._def, node);
var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div); var contentDiv = $('<div>',{class:"red-ui-search-result-description"}).appendTo(div);
if (node.z) { if (node.z) {

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

@ -133,7 +133,7 @@ RED.typeSearch = (function() {
nodeDiv.css('backgroundColor',colour); nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv); var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(icon_url, iconContainer, false); RED.utils.createIconElement(icon_url, iconContainer, false, def);
if (def.inputs > 0) { if (def.inputs > 0) {
$('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv); $('<div/>',{class:"red-ui-search-result-node-port"}).appendTo(nodeDiv);

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

@ -767,10 +767,12 @@ RED.utils = (function() {
return RED.settings.apiRootUrl+"icons/node-red/alert.png" return RED.settings.apiRootUrl+"icons/node-red/alert.png"
} else if (node && node.icon) { } else if (node && node.icon) {
var iconPath = separateIconPath(node.icon); var iconPath = separateIconPath(node.icon);
if (iconPath.module === "font-awesome") { if (isIconExists(iconPath)) {
return node.icon; if (iconPath.module === "font-awesome") {
} else if (isIconExists(iconPath)) { return node.icon;
return RED.settings.apiRootUrl+"icons/" + node.icon; } else {
return RED.settings.apiRootUrl+"icons/" + node.icon;
}
} }
} }
@ -895,10 +897,12 @@ RED.utils = (function() {
/** /**
* Create or update an icon element and append it to iconContainer. * Create or update an icon element and append it to iconContainer.
* @param iconUrl - Url of icon. * @param iconUrl - Url of icon.
* @param iconContainer - icon container element with palette_icon_container class. * @param iconContainer - Icon container element with palette_icon_container class.
* @param isLarge - whether the icon size is large. * @param isLarge - Whether the icon size is large.
* @param def - Default definition of a node.
* @param node - If the icon is a specific node instance, this parameter must be specified. If it is icon template such as an icon on the palette, this must be omitted.
*/ */
function createIconElement(iconUrl, iconContainer, isLarge) { function createIconElement(iconUrl, iconContainer, isLarge, def, node) {
// Removes the previous icon when icon was changed. // Removes the previous icon when icon was changed.
var iconElement = iconContainer.find(".palette_icon"); var iconElement = iconContainer.find(".palette_icon");
if (iconElement.length !== 0) { if (iconElement.length !== 0) {
@ -912,13 +916,23 @@ RED.utils = (function() {
// Show either icon image or font-awesome icon // Show either icon image or font-awesome icon
var iconPath = separateIconPath(iconUrl); var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") { if (iconPath.module === "font-awesome") {
var faIconElement = $('<i/>').appendTo(iconContainer); var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconPath.file);
var faLarge = isLarge ? "fa-lg " : ""; if (fontAwesomeUnicode) {
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file); var faIconElement = $('<i/>').appendTo(iconContainer);
} else { var faLarge = isLarge ? "fa-lg " : "";
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer); faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
imageIconElement.css("backgroundImage", "url("+iconUrl+")"); return;
}
// If the specified name is not defined in font-awesome, show the default icon.
if (def) {
var iconPath = RED.utils.getDefaultNodeIcon(def, node);
iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
} else {
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
}
} }
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
} }
return { return {