From db0ff748576212d32ab46b47b560126ffa57f4e2 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 4 May 2021 11:12:55 +0100 Subject: [PATCH] Reduce code duplication around node/label generation --- .../editor-client/src/js/ui/clipboard.js | 28 +----------- .../editor-client/src/js/ui/tab-help.js | 5 +-- .../src/js/ui/tab-info-outliner.js | 33 ++------------ .../editor-client/src/js/ui/utils.js | 20 +++++++-- .../editor-client/src/sass/palette.scss | 44 +++++++++++++++++++ .../editor-client/src/sass/tab-info.scss | 8 +++- 6 files changed, 74 insertions(+), 64 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 5b831a942..caffe5793 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -1186,22 +1186,6 @@ RED.clipboard = (function() { } } - function getNodeLabelText(n) { - var label = n.name || n.type+": "+n.id; - if (n._def.label) { - try { - label = (typeof n._def.label === "function" ? n._def.label.call(n) : n._def.label)||""; - } catch(err) { - console.log("Definition error: "+n.type+".label",err); - } - } - var newlineIndex = label.indexOf("\\n"); - if (newlineIndex > -1) { - label = label.substring(0,newlineIndex)+"..."; - } - return label; - } - function getFlowLabel(n) { n = JSON.parse(JSON.stringify(n)); n._def = RED.nodes.getType(n.type) || {}; @@ -1227,16 +1211,8 @@ RED.clipboard = (function() { if (n._def) { n._ = n._def._; } - var div = $('
',{class:"red-ui-info-outline-item"}); - RED.utils.createNodeIcon(n).appendTo(div); - var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div); - var labelText = getNodeLabelText(n); - var label = $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv); - if (labelText) { - label.text(labelText) - } else { - label.html(n.type) - } + var div = $('
',{class:"red-ui-node-list-item"}); + RED.utils.createNodeIcon(n,true).appendTo(div); return div; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js index cc86de358..4852ed359 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-help.js @@ -230,10 +230,9 @@ RED.sidebar.help = (function() { } function getNodeLabel(n) { - var div = $('
',{class:"red-ui-info-outline-item"}); + var div = $('
',{class:"red-ui-node-list-item"}); RED.utils.createNodeIcon(n).appendTo(div); - var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div); - $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).text(n.name||n.type).appendTo(contentDiv); + $('
',{class:"red-ui-node-label"}).text(n.name||n.type).appendTo(div); return div; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js index 891f9f7dc..a1ae6e48b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js @@ -73,36 +73,11 @@ RED.sidebar.info.outliner = (function() { return item; } - function getNodeLabelText(n) { - var label = n.name || n.type+": "+n.id; - if (n._def.label) { - try { - label = (typeof n._def.label === "function" ? n._def.label.call(n) : n._def.label)||""; - } catch(err) { - console.log("Definition error: "+n.type+".label",err); - } - } - var newlineIndex = label.indexOf("\\n"); - if (newlineIndex > -1) { - label = label.substring(0,newlineIndex)+"..."; - } - return label; - } - function getNodeLabel(n) { - var div = $('
',{class:"red-ui-info-outline-item"}); - RED.utils.createNodeIcon(n).appendTo(div); - var contentDiv = $('
',{class:"red-ui-search-result-description"}).appendTo(div); - var labelText = getNodeLabelText(n); - var label = $('
',{class:"red-ui-search-result-node-label red-ui-info-outline-item-label"}).appendTo(contentDiv); - if (labelText) { - label.text(labelText) - } else { - label.html(" ") - } - + var div = $('
',{class:"red-ui-node-list-item red-ui-info-outline-item"}); + RED.utils.createNodeIcon(n, true).appendTo(div); + div.find(".red-ui-node-label").addClass("red-ui-info-outline-item-label") addControls(n, div); - return div; } @@ -430,7 +405,7 @@ RED.sidebar.info.outliner = (function() { var existingObject = objects[n.id]; var parent = n.g||n.z||"__global__"; - var nodeLabelText = getNodeLabelText(n); + var nodeLabelText = RED.utils.getNodeLabel(n,n.name || (n.type+": "+n.id)); if (nodeLabelText) { existingObject.element.find(".red-ui-info-outline-item-label").text(nodeLabelText); } else { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js index f81c98748..bb17ea395 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/utils.js @@ -1125,9 +1125,9 @@ RED.utils = (function() { imageIconElement.css("backgroundImage", "url("+iconUrl+")"); } - function createNodeIcon(node) { + function createNodeIcon(node, includeLabel) { var def = node._def; - var nodeDiv = $('
',{class:"red-ui-search-result-node"}) + var nodeDiv = $('
',{class:"red-ui-node-icon"}) if (node.type === "_selection_") { nodeDiv.addClass("red-ui-palette-icon-selection"); } else if (node.type === "group") { @@ -1147,8 +1147,20 @@ RED.utils = (function() { } var icon_url = RED.utils.getNodeIcon(def,node); - var iconContainer = $('
',{class:"red-ui-palette-icon-container"}).appendTo(nodeDiv); - RED.utils.createIconElement(icon_url, iconContainer, true); + RED.utils.createIconElement(icon_url, nodeDiv, true); + + if (includeLabel) { + var container = $(''); + nodeDiv.appendTo(container); + var labelText = RED.utils.getNodeLabel(node,node.name || (node.type+": "+node.id)); + var label = $('
',{class:"red-ui-node-label"}).appendTo(container); + if (labelText) { + label.text(labelText) + } else { + label.html(" ") + } + return container; + } return nodeDiv; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 2855ee494..1b27f7a2a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -229,3 +229,47 @@ left: 1px; } } + +//////////////// + +.red-ui-node-list-item { + display: inline-block; + padding: 0; + font-size: 13px; + border: none; +} +.red-ui-node-icon { + display: inline-block; + float:left; + width: 24px; + height: 20px; + margin-top: 1px; + // width: 30px; + // height: 25px; + border-radius: 3px; + border: 1px solid $node-border; + background-position: 5% 50%; + background-repeat: no-repeat; + background-size: contain; + position: relative; + background-color: $node-icon-background-color; + text-align: center; + + .red-ui-palette-icon { + width: 20px; + } + + .red-ui-palette-icon-fa { + font-size: 14px; + position: relative; + top: -1px; + left: 0px; + } +} + +.red-ui-node-label { + margin-left: 32px; + line-height: 23px; + white-space: nowrap; + color: $secondary-text-color; +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 42d5462f7..07bbbae1c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss @@ -326,13 +326,17 @@ div.red-ui-info-table { border-bottom: 1px solid $secondary-border-color; } } -.red-ui-info-outline,.red-ui-sidebar-help-toc, #red-ui-clipboard-dialog-import-conflicts-list, #red-ui-clipboard-dialog-export-tab-clipboard-preview { +.red-ui-info-outline, +// TODO: remove these classes for 2.0. Keeping in 1.x for backwards compatibility +// of theme generators. +.red-ui-sidebar-help-toc, #red-ui-clipboard-dialog-import-conflicts-list, #red-ui-clipboard-dialog-export-tab-clipboard-preview + { .red-ui-info-outline-item { display: inline-block; padding: 0; font-size: 13px; border: none; - .red-ui-palette-icon-fa { + &:not(.red-ui-node-list-item) .red-ui-palette-icon-fa { position: relative; top: 1px; left: 0px;