From d9089b798c5d8ea89d31a10af4b28b3358a844e4 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 21 Sep 2018 11:38:48 +0100 Subject: [PATCH] Update info side bar with node description section --- editor/js/nodes.js | 1 - editor/js/ui/tab-info.js | 94 ++++++++++++++---------- red/api/editor/locales/en-US/editor.json | 1 + 3 files changed, 56 insertions(+), 40 deletions(-) diff --git a/editor/js/nodes.js b/editor/js/nodes.js index d1ff205ab..ce8441a86 100644 --- a/editor/js/nodes.js +++ b/editor/js/nodes.js @@ -354,7 +354,6 @@ RED.nodes = (function() { subflows[sf.id] = sf; RED.nodes.registerType("subflow:"+sf.id, { defaults:{name:{value:""}}, - info: sf.info, icon: function() { return sf.icon||"subflow.png" }, category: sf.category || "subflows", inputs: sf.in.length, diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index 287df1130..034b3f292 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -28,8 +28,9 @@ RED.sidebar.info = (function() { var content; var sections; - var nodeSection; + var propertiesSection; var infoSection; + var helpSection; var tipBox; var expandedSections = { @@ -49,18 +50,25 @@ RED.sidebar.info = (function() { container: stackContainer }).hide(); - nodeSection = sections.add({ + propertiesSection = sections.add({ title: RED._("sidebar.info.info"), collapsible: true }); - nodeSection.expand(); + propertiesSection.expand(); + infoSection = sections.add({ - title: RED._("sidebar.info.nodeHelp"), + title: RED._("sidebar.info.desc"), collapsible: true }); infoSection.expand(); infoSection.content.css("padding","6px"); - infoSection.container.css("border-bottom","none"); + + helpSection = sections.add({ + title: RED._("sidebar.info.nodeHelp"), + collapsible: true + }); + helpSection.expand(); + helpSection.content.css("padding","6px"); var tipContainer = $('
').appendTo(content); tipBox = $('
').appendTo(tipContainer); @@ -116,12 +124,13 @@ RED.sidebar.info = (function() { return; } sections.show(); - $(nodeSection.content).empty(); + $(propertiesSection.content).empty(); $(infoSection.content).empty(); + $(helpSection.content).empty(); var propRow; - var table = $('
').appendTo(nodeSection.content); + var table = $('
').appendTo(propertiesSection.content); var tableBody = $('').appendTo(table); var subflowNode; var subflowUserCount; @@ -138,14 +147,23 @@ RED.sidebar.info = (function() { RED.projects.editProject(); }); } + propertiesSection.container.show(); infoSection.container.show(); + helpSection.container.show(); if (node === null) { return; } else if (Array.isArray(node)) { + // Multiple things selected + // - hide help and info sections + helpSection.container.hide(); infoSection.container.hide(); + // - show the count of selected nodes propRow = $(''+RED._("sidebar.info.selection")+"").appendTo(tableBody); $(propRow.children()[1]).text(RED._("sidebar.info.nodes",{count:node.length})) } else { + // A single 'thing' selected. + + // Check to see if this is a subflow or subflow instance var m = /^subflow(:(.+))?$/.exec(node.type); if (m) { if (m[2]) { @@ -163,6 +181,7 @@ RED.sidebar.info = (function() { }); } if (node.type === "tab" || node.type === "subflow") { + // If nothing is selected, but we're on a flow or subflow tab. propRow = $(''+RED._("sidebar.info."+(node.type==='tab'?'flow':'subflow'))+'').appendTo(tableBody); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); propRow = $(''+RED._("sidebar.info.tabName")+"").appendTo(tableBody); @@ -170,16 +189,11 @@ RED.sidebar.info = (function() { if (node.type === "tab") { propRow = $(''+RED._("sidebar.info.status")+'').appendTo(tableBody); $(propRow.children()[1]).text((!!!node.disabled)?RED._("sidebar.info.enabled"):RED._("sidebar.info.disabled")) - } else if (node.type === "subflow") { - propRow = $(''+RED._("subflow.category")+'').appendTo(tableBody); - var category = node.category||"subflows"; - $(propRow.children()[1]).text(RED._("palette.label."+category,{defaultValue:category})) } } else { + // An actual node is selected in the editor - build up its properties table propRow = $(''+RED._("sidebar.info.node")+"").appendTo(tableBody); RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - - if (node.type !== "subflow" && node.type !== "unknown" && node.name) { propRow = $(''+RED._("common.label.name")+'').appendTo(tableBody); $('').text(node.name).appendTo(propRow.children()[1]); @@ -191,7 +205,7 @@ RED.sidebar.info = (function() { $('').prependTo($(propRow.children()[1])) } } - if (!m && node.type != "subflow" && node.type != "comment") { + if (!m && node.type != "subflow") { var defaults; if (node.type === 'unknown') { defaults = {}; @@ -206,7 +220,7 @@ RED.sidebar.info = (function() { if (defaults) { var count = 0; for (var n in defaults) { - if (n != "name" && defaults.hasOwnProperty(n)) { + if (n != "name" && n != "info" && defaults.hasOwnProperty(n)) { var val = node[n]; var type = typeof val; count++; @@ -257,33 +271,33 @@ RED.sidebar.info = (function() { $(''+RED._("sidebar.info.instances")+""+subflowUserCount+'').appendTo(tableBody); } - var infoText = ""; - if (!subflowNode && node.type !== "comment" && node.type !== "tab") { - infoSection.title.text(RED._("sidebar.info.nodeHelp")); - var helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); - infoText = helpText; - } else if (node.type === "tab") { - infoSection.title.text(RED._("sidebar.info.flowDesc")); - infoText = marked(node.info||"")||(''+RED._("sidebar.info.none")+''); + var helpText = ""; + if (node.type === "tab" || node.type === "subflow") { + $(helpSection.container).hide(); + } else { + $(helpSection.container).show(); + if (subflowNode && node.type !== "subflow") { + // Selected a subflow instance node. + // - The subflow template info goes into help + helpText = (marked(subflowNode.info||"")||(''+RED._("sidebar.info.none")+'')); + } else { + helpText = $("script[data-help-name='"+node.type+"']").html()||(''+RED._("sidebar.info.none")+''); + } + setInfoText(helpText, helpSection.content); } - if (subflowNode) { - infoText = infoText + (marked(subflowNode.info||"")||(''+RED._("sidebar.info.none")+'')); - infoSection.title.text(RED._("sidebar.info.subflowDesc")); - } else if (node._def && node._def.info) { - infoSection.title.text(RED._("sidebar.info.nodeHelp")); + var infoText = ""; + + if (node._def && node._def.info) { var info = node._def.info; var textInfo = (typeof info === "function" ? info.call(node) : info); - // TODO: help infoText = infoText + marked(textInfo); } if (node.info) { - infoSection.title.text(RED._("sidebar.info.nodeHelp")); - infoText = marked(node.info || "") || ('' + RED._("sidebar.info.none") + ''); - } - if (infoText) { - setInfoText(infoText); + infoText = infoText + marked(node.info || "") } + setInfoText(infoText, infoSection.content); + $(".sidebar-node-info-stack").scrollTop(0); $(".node-info-property-header").click(function(e) { e.preventDefault(); @@ -293,8 +307,8 @@ RED.sidebar.info = (function() { }); } } - function setInfoText(infoText) { - var info = addTargetToExternalLinks($('
'+infoText+'
')).appendTo(infoSection.content); + function setInfoText(infoText,target) { + var info = addTargetToExternalLinks($('
'+infoText+'
')).appendTo(target); info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "" ); var foldingHeader = "H3"; info.find(foldingHeader).wrapInner('') @@ -399,9 +413,11 @@ RED.sidebar.info = (function() { // tips.stop(); // sections.show(); refresh(null); - nodeSection.container.hide(); - infoSection.title.text(title||RED._("sidebar.info.info")); - setInfoText(html); + propertiesSection.container.hide(); + helpSection.container.hide(); + infoSection.container.show(); + //helpSection.title.text(title||RED._("sidebar.info.info")); + setInfoText(html,infoSection.content); $(".sidebar-node-info-stack").scrollTop(0); } diff --git a/red/api/editor/locales/en-US/editor.json b/red/api/editor/locales/en-US/editor.json index 39e81317f..cb9029810 100644 --- a/red/api/editor/locales/en-US/editor.json +++ b/red/api/editor/locales/en-US/editor.json @@ -434,6 +434,7 @@ "instances": "Instances", "properties": "Properties", "info": "Information", + "desc": "Description", "blank": "blank", "null": "null", "showMore": "show more",