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

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

Browse Source
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);
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;
}

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);
}
// 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"))) {
$('<hr>').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);
nodeDiv.css('backgroundColor',colour);
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) {
e.preventDefault();
@ -834,9 +835,9 @@ RED.editor = (function() {
showIconPicker(iconRow,node,iconPath,function(newIcon) {
$("#node-settings-icon").text(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);
}
}

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) {
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
var icon_url = RED.utils.getNodeIcon(sf._def);
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) {
@ -182,7 +182,7 @@ RED.palette = (function() {
if (def.icon) {
var icon_url = RED.utils.getNodeIcon(def);
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);

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);
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);
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);
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) {
$('<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"
} else if (node && node.icon) {
var iconPath = separateIconPath(node.icon);
if (iconPath.module === "font-awesome") {
return node.icon;
} else if (isIconExists(iconPath)) {
return RED.settings.apiRootUrl+"icons/" + node.icon;
if (isIconExists(iconPath)) {
if (iconPath.module === "font-awesome") {
return 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.
* @param iconUrl - Url of icon.
* @param iconContainer - icon container element with palette_icon_container class.
* @param isLarge - whether the icon size is large.
* @param iconContainer - Icon container element with palette_icon_container class.
* @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.
var iconElement = iconContainer.find(".palette_icon");
if (iconElement.length !== 0) {
@ -912,13 +916,23 @@ RED.utils = (function() {
// Show either icon image or font-awesome icon
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
var faIconElement = $('<i/>').appendTo(iconContainer);
var faLarge = isLarge ? "fa-lg " : "";
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
} else {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconPath.file);
if (fontAwesomeUnicode) {
var faIconElement = $('<i/>').appendTo(iconContainer);
var faLarge = isLarge ? "fa-lg " : "";
faIconElement.addClass("palette_icon_fa fa fa-fw " + faLarge + iconPath.file);
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 {