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

Show icon element with either icon image or fa-icon

This commit is contained in:
nakanishi 2018-09-28 17:07:55 +09:00
parent f13e02a1a9
commit 8789d983ed
7 changed files with 69 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -746,11 +746,11 @@ RED.editor = (function() {
var iconDiv = $('<div>',{class:"red-ui-icon-list-icon"}).appendTo(iconList);
var nodeDiv = $('<div>',{class:"red-ui-search-result-node"}).appendTo(iconDiv);
var colour = RED.utils.getNodeColor(node.type, node._def);
var icon_url = "icons/"+moduleName+"/"+icon;
iconDiv.data('icon',icon_url)
var icon_url = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+icon;
iconDiv.data('icon',icon_url);
nodeDiv.css('backgroundColor',colour);
var iconContainer = $('<div/>',{class:"palette_icon_container"}).appendTo(nodeDiv);
RED.utils.createIconElement(moduleName, icon, iconContainer, true);
RED.utils.createIconElement(icon_url, iconContainer, true);
if (iconPath.module === moduleName && iconPath.file === icon) {
iconDiv.addClass("selected");
@ -820,7 +820,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);
var iconElements = RED.utils.createDynamicIconElement(icon_url, iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
iconButton.click(function(e) {
e.preventDefault();
@ -834,7 +834,7 @@ 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.changeIconElement(icon_url, iconElements.image, iconElements.fa);
RED.utils.createIconElement(icon_url, iconContainer, true);
});
})
$('<div class="uneditable-input" id="node-settings-icon">').text(node.icon).appendTo(iconRow);

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

@ -129,10 +129,9 @@ RED.palette = (function() {
}
function setIcon(element,sf) {
var iconElement = element.find(".palette_icon");
var faIconElement = element.find("i");
var icon_url = RED.utils.getNodeIcon(sf._def,sf);
RED.utils.changeIconElement(icon_url, iconElement, faIconElement);
var iconContainer = element.find(".palette_icon_container");
RED.utils.createIconElement(icon_url, iconContainer, true);
}
function escapeNodeType(nt) {
@ -170,7 +169,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.createDynamicIconElement(icon_url, iconContainer);
RED.utils.createIconElement(icon_url, iconContainer, true);
}
d.style.backgroundColor = RED.utils.getNodeColor(nt,def);

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

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

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

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

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

@ -892,42 +892,33 @@ RED.utils = (function() {
return parts;
}
function createIconElement(moduleName, iconName, iconContainer, isLarge) {
if (moduleName === "font-awesome") {
/**
* 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.
*/
function createIconElement(iconUrl, iconContainer, isLarge) {
// Removes the previous icon when icon was changed.
var iconElement = iconContainer.find(".palette_icon");
if (iconElement.length !== 0) {
iconElement.remove();
}
var faIconElement = iconContainer.find("i");
if (faIconElement.length !== 0) {
faIconElement.remove();
}
// 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 " : "";
$('<i class="palette_icon_fa fa fa-fw '+faLarge+iconName+'"></i>').appendTo(iconContainer);
} else {
var iconUrl = RED.settings.apiRootUrl+"icons/"+moduleName+"/"+iconName;
$('<div/>',{class:"palette_icon",style:"background-image: url("+iconUrl+")"}).appendTo(iconContainer);
}
}
function createDynamicIconElement(iconUrl, iconContainer) {
var imageIconElement = $('<div/>',{class:"palette_icon"}).appendTo(iconContainer);
var faIconElement = $('<i/>').appendTo(iconContainer);
var iconPath = separateIconPath(iconUrl);
if (iconPath.module === "font-awesome") {
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
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 iconElements = {
"image": imageIconElement,
"fa": faIconElement
};
return iconElements;
}
function changeIconElement(iconUrl, imageIconElement, faIconElement) {
var iconPath = separateIconPath(iconUrl);
faIconElement.removeClass();
if (iconPath.module === "font-awesome") {
imageIconElement.hide();
faIconElement.addClass("palette_icon_fa fa fa-lg fa-fw " + iconPath.file);
} else {
imageIconElement.css("backgroundImage", "url("+iconUrl+")");
imageIconElement.show();
}
}
return {
@ -943,8 +934,6 @@ RED.utils = (function() {
addSpinnerOverlay: addSpinnerOverlay,
decodeObject: decodeObject,
parseContextKey: parseContextKey,
createIconElement: createIconElement,
createDynamicIconElement: createDynamicIconElement,
changeIconElement: changeIconElement
createIconElement: createIconElement
}
})();

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

@ -1869,23 +1869,36 @@ RED.view = (function() {
resetMouseVars();
}
function updateIconAttributes(iconUrl, icon, fontAwesomeIcon, d) {
var isIconImage = true;
function createIconAttributes(iconUrl, icon_group, d) {
var fontAwesomeUnicode = null;
if (iconUrl.indexOf("font-awesome/") === 0) {
var iconName = iconUrl.substr(13);
var fontAwesomeUnicode = RED.nodes.fontAwesome.getIconUnicode(iconName);
if (fontAwesomeUnicode) {
isIconImage = false;
fontAwesomeIcon.text(fontAwesomeUnicode);
} else {
if (!fontAwesomeUnicode) {
var iconPath = RED.utils.getDefaultNodeIcon(d._def, d);
iconUrl = "icons/"+iconPath.module+"/"+iconPath.file;
iconUrl = RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
}
}
if (isIconImage) {
// Hide font-awesome icon.
fontAwesomeIcon.attr("xlink:href",null);
fontAwesomeIcon.text(null);
if (fontAwesomeUnicode) {
// Since Node-RED workspace uses SVG, i tag cannot be used for font-awesome icon.
// On SVG, use text tag as an alternative.
icon_group.append("text")
.attr("xlink:href",iconUrl)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome")
.text(fontAwesomeUnicode);
} else {
var icon = icon_group.append("image")
.attr("xlink:href",iconUrl)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
var img = new Image();
img.src = iconUrl;
@ -1901,15 +1914,7 @@ RED.view = (function() {
// icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
//}
}
} else {
// Hide icon image.
icon.attr("xlink:href",null);
icon.style("display","none");
fontAwesomeIcon.attr("xlink:href",iconUrl);
}
return iconUrl;
}
function redraw() {
@ -2155,22 +2160,7 @@ RED.view = (function() {
.attr("fill-opacity","0.05")
.attr("height",function(d){return Math.min(50,d.h-4);});
var icon = icon_group.append("image")
.attr("xlink:href",icon_url)
.attr("class","node_icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
var fontAwesomeIcon = icon_group.append("text")
.attr("xlink:href",icon_url)
.attr("class","fa-lg")
.attr("x",15)
.attr("y",21)
.attr("stroke","none")
.attr("fill","#ffffff")
.attr("text-anchor","middle")
.attr("font-family", "FontAwesome");
createIconAttributes(icon_url, icon_group, d);
var icon_shade_border = icon_group.append("path")
.attr("d",function(d) { return "M 30 1 l 0 "+(d.h-2)})
@ -2196,8 +2186,6 @@ RED.view = (function() {
// icon_shade.attr("width",35); //icon.attr("x",5);
//}
updateIconAttributes(icon_url, icon, fontAwesomeIcon, d);
//icon.style("pointer-events","none");
icon_group.style("pointer-events","none");
}
@ -2334,17 +2322,23 @@ RED.view = (function() {
});
if (d._def.icon) {
icon = thisNode.select(".node_icon");
var icon = thisNode.select(".node_icon");
var faIcon = thisNode.select(".fa-lg");
var current_url;
if (icon.attr("xlink:href")) {
if (!icon.empty()) {
current_url = icon.attr("xlink:href");
} else {
current_url = faIcon.attr("xlink:href");
}
var new_url = RED.utils.getNodeIcon(d._def,d);
if (new_url !== current_url) {
updateIconAttributes(new_url, icon, faIcon, d);
if (!icon.empty()) {
icon.remove();
} else {
faIcon.remove();
}
var iconGroup = thisNode.select(".node_icon_group");
createIconAttributes(new_url, iconGroup, d);
}
}