From 624befd7048d5b9f9eaa66cd4ad8fa16dee58745 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 6 Apr 2017 23:17:06 +0100 Subject: [PATCH] Restructure info tab --- editor/js/ui/common/stack.js | 68 ++++++++----- editor/js/ui/editor.js | 6 ++ editor/js/ui/palette.js | 4 +- editor/js/ui/tab-info.js | 182 +++++++++++++++++++++-------------- editor/sass/tab-info.scss | 78 +++++++++++---- nodes/core/core/75-exec.html | 19 ++-- nodes/core/io/10-mqtt.html | 16 +-- 7 files changed, 242 insertions(+), 131 deletions(-) diff --git a/editor/js/ui/common/stack.js b/editor/js/ui/common/stack.js index 2a5203cb7..6370649a9 100644 --- a/editor/js/ui/common/stack.js +++ b/editor/js/ui/common/stack.js @@ -20,37 +20,46 @@ RED.stack = (function() { var entries = []; + var visible = true; + return { add: function(entry) { - entries.push(entry); - var entryContainer = $('
').appendTo(container); - - var header = $('
').appendTo(entryContainer); - var icon = $('').appendTo(header); - $('').html(entry.title).appendTo(header); - entry.content = $('
').appendTo(entryContainer); - - if (entry.expanded) { - icon.addClass("expanded"); - } else { - entry.content.hide(); + entry.container = $('
').appendTo(container); + if (!visible) { + entry.container.hide(); } - - header.click(function() { - if (options.singleExpanded) { - if (!entry.isExpanded()) { - for (var i=0;i
').appendTo(entry.container); + entry.content = $('
').appendTo(entry.container); + if (entry.collapsible !== false) { + header.click(function() { + if (options.singleExpanded) { + if (!entry.isExpanded()) { + for (var i=0;i').appendTo(header); + + if (entry.expanded) { + icon.addClass("expanded"); } else { - entry.toggle(); + entry.content.hide(); } - }); + } else { + header.css("cursor","default"); + } + entry.title = $('').html(entry.title).appendTo(header); + + + entry.toggle = function() { if (entry.isExpanded()) { entry.collapse(); @@ -85,6 +94,21 @@ RED.stack = (function() { }, + hide: function() { + visible = false; + entries.forEach(function(entry) { + entry.container.hide(); + }); + return this; + }, + + show: function() { + visible = true; + entries.forEach(function(entry) { + entry.container.show(); + }); + return this; + } } } diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js index 9c873a313..b27f31f40 100644 --- a/editor/js/ui/editor.js +++ b/editor/js/ui/editor.js @@ -963,12 +963,16 @@ RED.editor = (function() { title: RED._("editor.nodeProperties"), expanded: true }); + nodeProperties.content.addClass("editor-tray-content"); + var portLabels = stack.add({ title: RED._("editor.portLabels"), onexpand: function() { refreshLabelForm(this.content,node); } }); + portLabels.content.addClass("editor-tray-content"); + if (editing_node) { RED.sidebar.info.refresh(editing_node); @@ -1537,9 +1541,11 @@ RED.editor = (function() { title: RED._("editor.nodeProperties"), expanded: true }); + nodeProperties.content.addClass("editor-tray-content"); var portLabels = stack.add({ title: RED._("editor.portLabels") }); + portLabels.content.addClass("editor-tray-content"); diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js index 90adb944a..b657b101c 100644 --- a/editor/js/ui/palette.js +++ b/editor/js/ui/palette.js @@ -101,7 +101,7 @@ RED.palette = (function() { if (label != type) { l = "

"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"
"+type+"

"; } - popOverContent = $(l+(info?info:$("script[data-help-name$='"+type+"']").html()||"

"+RED._("palette.noInfo")+"

").trim()) + popOverContent = $(l+(info?info:$("script[data-help-name='"+type+"']").html()||"

"+RED._("palette.noInfo")+"

").trim()) .filter(function(n) { return (this.nodeType == 1 && this.nodeName == "P") || (this.nodeType == 3 && this.textContent.trim().length > 0) }).slice(0,2); @@ -205,7 +205,7 @@ RED.palette = (function() { if (nt.indexOf("subflow:") === 0) { helpText = marked(RED.nodes.subflow(nt.substring(8)).info||""); } else { - helpText = $("script[data-help-name$='"+d.type+"']").html()||""; + helpText = $("script[data-help-name='"+d.type+"']").html()||""; } var help = '
'+helpText+"
"; RED.sidebar.info.set(help); diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index 949d35554..e2f476ba3 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -26,20 +26,40 @@ RED.sidebar.info = (function() { smartypants: false }); - var content = document.createElement("div"); - content.style.paddingTop = "4px"; - content.style.paddingLeft = "4px"; - content.style.paddingRight = "4px"; - content.className = "sidebar-node-info" + var content; + var sections; + var nodeSection; + var infoSection; + var tipBox; var expandedSections = { - "node": true, - "property": false, - "info": true, - "subflow": true + "property": false }; function init() { + + content = document.createElement("div"); + content.className = "sidebar-node-info" + + tipBox = $('').appendTo(content); + + + RED.actions.add("core:show-info-tab",show); + + sections = RED.stack.create({ + container: content + }).hide(); + + nodeSection = sections.add({ + title: "Node", + collapsible: false + }); + infoSection = sections.add({ + title: "Information", + collapsible: false + }); + infoSection.content.css("padding","6px"); + infoSection.container.css("border-bottom","none"); RED.sidebar.addTab({ id: "info", label: RED._("sidebar.info.label"), @@ -47,7 +67,6 @@ RED.sidebar.info = (function() { content: content, enableOnEdit: true }); - RED.actions.add("core:show-info-tab",show); } function show() { @@ -82,84 +101,100 @@ RED.sidebar.info = (function() { } function refresh(node) { tips.stop(); - $(content).empty(); + sections.show(); + $(nodeSection.content).empty(); + $(infoSection.content).empty(); + var table = $('
'); var tableBody = $('').appendTo(table); - $(' '+RED._("sidebar.info.node")+'').appendTo(tableBody); + var propRow; + if (node.type === "tab") { + nodeSection.title.html("Flow"); + propRow = $('Name').appendTo(tableBody); + $(propRow.children()[1]).html(' '+(node.label||"")) + propRow = $(''+RED._("sidebar.info.id")+"").appendTo(tableBody); + RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); + propRow = $('Enabled').appendTo(tableBody); + RED.utils.createObjectElement((!!!node.disabled)).appendTo(propRow.children()[1]); - - if (node.type != "subflow" && node.name) { - $(''+RED._("common.label.name")+' '+node.name+'').appendTo(tableBody); - } - $(''+RED._("sidebar.info.type")+" "+node.type+"").appendTo(tableBody); - $(''+RED._("sidebar.info.id")+" "+node.id+"").appendTo(tableBody); - - var m = /^subflow(:(.+))?$/.exec(node.type); - var subflowNode; - if (m) { - if (m[2]) { - subflowNode = RED.nodes.subflow(m[2]); - } else { - subflowNode = node; + } else { + nodeSection.title.html("Node"); + if (node.type !== "subflow" && node.name) { + $(''+RED._("common.label.name")+' '+node.name+'').appendTo(tableBody); } + $(''+RED._("sidebar.info.type")+" "+node.type+"").appendTo(tableBody); + propRow = $(''+RED._("sidebar.info.id")+"").appendTo(tableBody); + RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]); - $(' '+RED._("sidebar.info.subflow")+'').appendTo(tableBody); + var m = /^subflow(:(.+))?$/.exec(node.type); + var subflowNode; - var userCount = 0; - var subflowType = "subflow:"+subflowNode.id; - RED.nodes.eachNode(function(n) { - if (n.type === subflowType) { - userCount++; - } - }); - $(''+RED._("common.label.name")+''+subflowNode.name+'').appendTo(tableBody); - $(''+RED._("sidebar.info.instances")+""+userCount+'').appendTo(tableBody); - } - - if (!m && node.type != "subflow" && node.type != "comment") { - $(' '+RED._("sidebar.info.properties")+'').appendTo(tableBody); - if (node._def) { - for (var n in node._def.defaults) { - if (n != "name" && node._def.defaults.hasOwnProperty(n)) { - var val = node[n]; - var type = typeof val; - var propRow = $(''+n+"").appendTo(tableBody); - RED.utils.createObjectElement(val).appendTo(propRow.children()[1]); + if (!m && node.type != "subflow" && node.type != "comment") { + if (node._def) { + var count = 0; + for (var n in node._def.defaults) { + if (n != "name" && node._def.defaults.hasOwnProperty(n)) { + var val = node[n]; + var type = typeof val; + count++; + propRow = $(''+n+"").appendTo(tableBody); + RED.utils.createObjectElement(val).appendTo(propRow.children()[1]); + } + } + if (count > 0) { + $('show moreshow less ').appendTo(tableBody); } } } + + if (m) { + if (m[2]) { + subflowNode = RED.nodes.subflow(m[2]); + } else { + subflowNode = node; + } + + $(''+RED._("sidebar.info.subflow")+'').appendTo(tableBody); + + var userCount = 0; + var subflowType = "subflow:"+subflowNode.id; + RED.nodes.eachNode(function(n) { + if (n.type === subflowType) { + userCount++; + } + }); + $(''+RED._("common.label.name")+''+subflowNode.name+'').appendTo(tableBody); + $(''+RED._("sidebar.info.instances")+""+userCount+'').appendTo(tableBody); + } } - $(table).appendTo(content); + + $(table).appendTo(nodeSection.content); var infoText = ""; if (!subflowNode && node.type != "comment") { - var helpText = $("script[data-help-name$='"+node.type+"']").html()||""; + var helpText = $("script[data-help-name='"+node.type+"']").html()||""; infoText = helpText; } if (subflowNode) { - infoText = marked(subflowNode.info||""); + infoText = infoText + marked(subflowNode.info||""); } else if (node._def && node._def.info) { var info = node._def.info; var textInfo = (typeof info === "function" ? info.call(node) : info); - infoText = marked(textInfo); + // TODO: help + infoText = infoText + marked(textInfo); } if (infoText) { - $(' '+RED._("sidebar.info.info")+'').appendTo(tableBody); - addTargetToExternalLinks($('
'+infoText+'
')).appendTo(tableBody); + addTargetToExternalLinks($('
'+infoText+'
')).appendTo(infoSection.content); } - ["node","subflow","property","info"].forEach(function(t) { - $(".node-info-"+t+"-header").click(function(e) { - e.preventDefault(); - console.log(t,expandedSections[t]); - expandedSections[t] = !expandedSections[t]; - $(this).toggleClass("expanded",expandedSections[t]); - $(".node-info-"+t+"-row").toggle(expandedSections[t]); - - }) - }) + $(".node-info-property-header").click(function(e) { + e.preventDefault(); + expandedSections["property"] = !expandedSections["property"]; + $(this).toggleClass("expanded",expandedSections["property"]); + $(".node-info-property-row").toggle(expandedSections["property"]); + }); } @@ -203,15 +238,14 @@ RED.sidebar.info = (function() { while ((m=/(\[(.*?)\])/.exec(tip))) { tip = tip.replace(m[1],RED.keyboard.formatKey(m[2])); } - $('
'+tip+'
').appendTo(content).fadeIn(200); + tipBox.html(tip).fadeIn(200); if (startTimeout) { startTimeout = null; refreshTimeout = setInterval(cycleTips,cycleDelay); } } function cycleTips() { - $(".node-info-tip").fadeOut(300,function() { - $(this).remove(); + tipBox.fadeOut(300,function() { setTip(); }) } @@ -219,7 +253,6 @@ RED.sidebar.info = (function() { started = true; if (enabled) { if (!startTimeout && !refreshTimeout) { - $(content).html(""); if (tipCount === -1) { do { tipCount++; @@ -235,7 +268,7 @@ RED.sidebar.info = (function() { clearTimeout(startTimeout); refreshTimeout = null; startTimeout = null; - $(".node-info-tip").remove(); + tipBox.hide(); } return { start: startTips, @@ -244,12 +277,15 @@ RED.sidebar.info = (function() { })(); function clear() { + console.log("clear');"); + sections.hide(); tips.start(); } function set(html) { tips.stop(); - $(content).html(html); + sections.show(); + $(infoSection.content).html(html); } @@ -265,9 +301,11 @@ RED.sidebar.info = (function() { } } } else { - var subflow = RED.nodes.subflow(RED.workspaces.active()); - if (subflow) { - refresh(subflow); + var activeWS = RED.workspaces.active(); + + var flow = RED.nodes.workspace(activeWS) || RED.nodes.subflow(activeWS); + if (flow) { + refresh(flow); } else { clear(); } diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss index 61efacb4e..9eccd7f32 100644 --- a/editor/sass/tab-info.scss +++ b/editor/sass/tab-info.scss @@ -19,18 +19,29 @@ } table.node-info { font-size: 14px; - margin: 0px; - width: 97%; + margin: 0 0 10px; + width: 100%; } table.node-info tr:not(.blank) { - border: 1px solid #ddd; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} +.node-info-property-expand { + font-size: 0.8em; + text-align: right; + line-height: 0.9em; + a { + padding-bottom: 5px; + } + } table.node-info tr.blank { border: none; th { text-align: left; - font-weight: bold; + font-weight: 500; color: #444; + padding: 6px 3px 3px; } >* { padding-top: 8px; @@ -38,20 +49,38 @@ table.node-info tr.blank { padding-left: 0px; } + a { display: block; - color: #444; + color: #666; &:hover,&:focus { - color: #444; + color: #666; text-decoration: none; } + &:not(.expanded) { + .node-info-property-show-more { + display: inline; + } + .node-info-property-show-less { + display: none; + } + } i { width: 10px; text-align: center; transition: transform 0.2s ease-in-out; } - &.expanded i { - transform: rotate(90deg); + + &.expanded { + .node-info-property-show-more { + display: none; + } + .node-info-property-show-less { + display: inline; + } + i { + transform: rotate(180deg); + } } } &.node-info-info-row > td { @@ -63,11 +92,11 @@ table.node-info tr:not(.blank) td:first-child{ color: #666; vertical-align: top; width: 90px; - padding: 3px; + padding: 3px 3px 3px 6px; border-right: 1px solid #ddd; } table.node-info tr:not(.blank) td:last-child{ - padding-left: 5px; + padding: 3px 3px 3px 6px; color: #666; } div.node-info { @@ -78,33 +107,33 @@ div.node-info { line-height: 1.5em; h1 { font-weight: 500; - font-size: 23px; + font-size: 1.296em; line-height: 1.3em; margin: 8px auto; } h2 { font-weight: 500; - font-size: 18px; + font-size: 1.215em; margin: 8px auto; line-height: 1.3em; } h3 { font-weight: 500; - font-size: 16px; + font-size: 1.138em; margin: 7px auto 5px; line-height: 1.3em; } h4, h5 { font-weight: 500; - font-size: 14px; + font-size: 1.067em; line-height: 1.3em; margin: 8px auto 5px; } & > span > p:first-child { } dl.message-properties { - border: 1px solid #eee; + border: 1px solid #ddd; border-radius: 2px; margin: 5px auto 10px; @@ -115,9 +144,6 @@ div.node-info { margin: 5px 3px 1px; color: #AD1625; white-space: nowrap; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; - border-radius: 2px; &.optional { font-style: italic; @@ -136,17 +162,21 @@ div.node-info { } } &>dd { - margin: 1px 8px 10px 10px; + margin: 0px 8px 2px 13px; + vertical-align: top; } } ol.node-ports { margin: 0; li { - border: 1px solid #eee; + border: 1px solid #ddd; border-radius: 2px; list-style-position: inside; padding: 3px; margin-bottom: 5px; + dl.message-properties { + border: none; + } } } @@ -164,5 +194,13 @@ div.node-info { background-color: #fff; @include disable-selection; cursor: default; + box-sizing: border-box; + + &.collapsed { + top: auto; + bottom: 0; + height: 150px; + border-top: 1px solid $secondary-border-color; + } } diff --git a/nodes/core/core/75-exec.html b/nodes/core/core/75-exec.html index 670a78423..2285689d5 100644 --- a/nodes/core/core/75-exec.html +++ b/nodes/core/core/75-exec.html @@ -44,14 +44,19 @@