frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update all node icons to SVG

Browse Source 
When listing icons provided by a module, if there is a png and svg
with the same name, only the svg will be listed.

If a node asks for a png icon which is not known, but there is a
corresponding svg, that will be used instead.
This commit is contained in:
Nick O'Leary
2019-06-21 12:36:20 +01:00
parent 92cb57eb7b
commit d623848c87
81 changed files with 127 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/node_modules/@node-red/editor-client/src/images/icons/arrow-in.svg vendored Normal file
View File

@@ -0,0 +1 @@
<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><path d="M18 5v12H7v26h11v12l14-25z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 120 B

BIN
packages/node_modules/@node-red/editor-client/src/images/icons/node-changed.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 386 B

BIN
packages/node_modules/@node-red/editor-client/src/images/icons/node-error.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 386 B

1
packages/node_modules/@node-red/editor-client/src/images/subflow_tab.svg vendored Normal file
View File

@@ -0,0 +1 @@
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M25 16h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1h-7c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zM8 28h7c.58 0 1-.42 1-1v-2c0-.58-.42-1-1-1H8c-.58 0-1 .42-1 1v2c0 .58.42 1 1 1zm-.416 11C5.624 39 4 37.375 4 35.416V4.582C4 2.622 5.625 1 7.584 1h24.832C34.376 1 36 2.623 36 4.582v30.834C36 37.376 34.375 39 32.416 39zM32 27H19c0 2.19-1.81 4-4 4H7v4.416c0 .35.235.584.584.584h24.832c.35 0 .584-.235.584-.584v-8.417zm1-2v-6h-8c-2.19 0-4-1.81-4-4h-1c-4.333-.002-8.667.004-13 0v6h8c2.19 0 4 1.81 4 4h13zm0-16V4.582c0-.35-.235-.582-.584-.582H7.584C7.234 4 7 4.233 7 4.582v8.417c4.333.002 8.667.001 13 .001h1c0-2.19 1.81-4 4-4z" color="#000" fill="#333"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 708 B

4
packages/node_modules/@node-red/editor-client/src/js/nodes.js vendored
View File

@@ -362,7 +362,7 @@ RED.nodes = (function() {
name:{value:""},
env:{value:[]}
},
icon: function() { return sf.icon||"subflow.png" },
icon: function() { return sf.icon||"subflow.svg" },
category: sf.category || "subflows",
inputs: sf.in.length,
outputs: sf.out.length,
@@ -583,7 +583,7 @@ RED.nodes = (function() {
node.outputLabels = n.outputLabels.slice();
}
if (n.icon) {
if (n.icon !== "node-red/subflow.png") {
if (n.icon !== "node-red/subflow.svg") {
node.icon = n.icon;
}
}

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

@@ -399,7 +399,7 @@ RED.diff = (function() {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
icon:"subflow.svg",
category: "subflows",
color: "#da9"
},
@@ -422,7 +422,7 @@ RED.diff = (function() {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
icon:"subflow.svg",
category: "subflows",
color: "#da9"
},
@@ -443,7 +443,7 @@ RED.diff = (function() {
remoteDiff: remoteDiff,
def: {
defaults:{},
icon:"subflow.png",
icon:"subflow.svg",
category: "subflows",
color: "#da9"
},
@@ -549,7 +549,7 @@ RED.diff = (function() {
if (def === undefined) {
if (/^subflow:/.test(node.type)) {
def = {
icon:"subflow.png",
icon:"subflow.svg",
category: "subflows",
color: "#da9",
defaults:{name:{value:""}}

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

@@ -2156,7 +2156,7 @@ RED.editor = (function() {
changed = true;
}
var icon = $("#red-ui-editor-node-icon").text()||"";
if ((editing_node.icon === undefined && icon !== "node-red/subflow.png") ||
if ((editing_node.icon === undefined && icon !== "node-red/subflow.svg") ||
(editing_node.icon !== undefined && editing_node.icon !== icon)) {
changes.icon = editing_node.icon;
editing_node.icon = icon;

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

@@ -802,13 +802,13 @@ RED.utils = (function() {
function getDefaultNodeIcon(def,node) {
var icon_url;
if (node && node.type === "subflow") {
icon_url = "node-red/subflow.png";
icon_url = "node-red/subflow.svg";
} else if (typeof def.icon === "function") {
try {
icon_url = def.icon.call(node);
} catch(err) {
console.log("Definition error: "+def.type+".icon",err);
icon_url = "arrow-in.png";
icon_url = "arrow-in.svg";
}
} else {
icon_url = def.icon;
@@ -838,11 +838,11 @@ RED.utils = (function() {
function getNodeIcon(def,node) {
if (def.category === 'config') {
return RED.settings.apiRootUrl+"icons/node-red/cog.png"
return RED.settings.apiRootUrl+"icons/node-red/cog.svg"
} else if (node && node.type === 'tab') {
return RED.settings.apiRootUrl+"icons/node-red/subflow.png"
return RED.settings.apiRootUrl+"icons/node-red/subflow.svg"
} else if (node && node.type === 'unknown') {
return RED.settings.apiRootUrl+"icons/node-red/alert.png"
return RED.settings.apiRootUrl+"icons/node-red/alert.svg"
} else if (node && node.icon) {
var iconPath = separateIconPath(node.icon);
if (isIconExists(iconPath)) {
@@ -851,6 +851,11 @@ RED.utils = (function() {
} else {
return RED.settings.apiRootUrl+"icons/" + node.icon;
}
} else if (iconPath.module !== "font-awesome" && /.png$/i.test(iconPath.file)) {
iconPath.file = iconPath.file.replace(/.png$/,".svg");
if (isIconExists(iconPath)) {
return RED.settings.apiRootUrl+"icons/" + node.icon.replace(/.png$/,".svg");
}
}
}
@@ -867,9 +872,9 @@ RED.utils = (function() {
if (isIconExists(iconPath)) {
return RED.settings.apiRootUrl+"icons/"+iconPath.module+"/"+iconPath.file;
} else if (def.category === 'subflows') {
return RED.settings.apiRootUrl+"icons/node-red/subflow.png";
return RED.settings.apiRootUrl+"icons/node-red/subflow.svg";
} else {
return RED.settings.apiRootUrl+"icons/node-red/arrow-in.png";
return RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg";
}
}
}
@@ -1007,7 +1012,7 @@ RED.utils = (function() {
return;
}
// If the specified name is not defined in font-awesome, show arrow-in icon.
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.png"
iconUrl = RED.settings.apiRootUrl+"icons/node-red/arrow-in.svg"
}
var imageIconElement = $('<div/>',{class:"red-ui-palette-icon"}).appendTo(iconContainer);
imageIconElement.css("backgroundImage", "url("+iconUrl+")");

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

@@ -2463,14 +2463,22 @@ RED.view = (function() {
.attr("class","red-ui-flow-node-icon")
.attr("x",0)
.attr("width","30")
.attr("height","30");
.attr("height","30")
.style("display","none");
var img = new Image();
img.src = iconUrl;
img.onload = function() {
icon.attr("width",Math.min(img.width,30));
icon.attr("height",Math.min(img.height,30));
icon.attr("x",15-Math.min(img.width,30)/2);
var largestEdge = Math.max(img.width,img.height);
var scaleFactor = 1;
if (largestEdge > 30) {
scaleFactor = 30/largestEdge;
}
var width = img.width * scaleFactor;
var height = img.height * scaleFactor;
icon.attr("width",width);
icon.attr("height",height);
icon.attr("x",15-width/2);
icon.attr("xlink:href",iconUrl);
icon.style("display",null);
//if ("right" == d._def.align) {

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

@@ -439,7 +439,7 @@ RED.workspaces = (function() {
if (!workspace_tabs.contains(id)) {
var sf = RED.nodes.subflow(id);
if (sf) {
addWorkspace({type:"subflow",id:id,icon:"red/images/subflow_tab.png",label:sf.name, closeable: true});
addWorkspace({type:"subflow",id:id,icon:"red/images/subflow_tab.svg",label:sf.name, closeable: true});
} else {
return;
}