From 262db23f7d9275e64538df2709437016788cf4fb Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 5 Apr 2017 16:19:23 +0100 Subject: [PATCH] First pass of new node-info style --- editor/js/ui/tab-info.js | 67 +++++++++-------- editor/sass/tab-info.scss | 116 ++++++++++++++++++++++++------ nodes/core/core/75-exec.html | 64 +++++++++++------ nodes/core/io/10-mqtt.html | 45 +++++++----- red/api/locales/en-US/editor.json | 1 + 5 files changed, 202 insertions(+), 91 deletions(-) diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js index f96fbdbf3..949d35554 100644 --- a/editor/js/ui/tab-info.js +++ b/editor/js/ui/tab-info.js @@ -32,7 +32,12 @@ RED.sidebar.info = (function() { content.style.paddingRight = "4px"; content.className = "sidebar-node-info" - var propertiesExpanded = false; + var expandedSections = { + "node": true, + "property": false, + "info": true, + "subflow": true + }; function init() { RED.sidebar.addTab({ @@ -80,12 +85,14 @@ RED.sidebar.info = (function() { $(content).empty(); var table = $('
'); var tableBody = $('').appendTo(table); - $(''+RED._("sidebar.info.node")+'').appendTo(tableBody); + $(' '+RED._("sidebar.info.node")+'').appendTo(tableBody); + + if (node.type != "subflow" && node.name) { - $(''+RED._("common.label.name")+' '+node.name+'').appendTo(tableBody); + $(''+RED._("common.label.name")+' '+node.name+'').appendTo(tableBody); } - $(""+RED._("sidebar.info.type")+" "+node.type+"").appendTo(tableBody); - $(""+RED._("sidebar.info.id")+" "+node.id+"").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; @@ -96,7 +103,7 @@ RED.sidebar.info = (function() { subflowNode = node; } - $(''+RED._("sidebar.info.subflow")+'').appendTo(tableBody); + $(' '+RED._("sidebar.info.subflow")+'').appendTo(tableBody); var userCount = 0; var subflowType = "subflow:"+subflowNode.id; @@ -105,54 +112,54 @@ RED.sidebar.info = (function() { userCount++; } }); - $(''+RED._("common.label.name")+''+subflowNode.name+'').appendTo(tableBody); - $(""+RED._("sidebar.info.instances")+""+userCount+"").appendTo(tableBody); + $(''+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); + $(' '+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); + var propRow = $(''+n+"").appendTo(tableBody); RED.utils.createObjectElement(val).appendTo(propRow.children()[1]); } } } } $(table).appendTo(content); - $("
").appendTo(content); + + var infoText = ""; + if (!subflowNode && node.type != "comment") { var helpText = $("script[data-help-name$='"+node.type+"']").html()||""; - addTargetToExternalLinks($('
'+helpText+'
').appendTo(content)); + infoText = helpText; } if (subflowNode) { - addTargetToExternalLinks($('
'+marked(subflowNode.info||"")+'
').appendTo(content)); + 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); - addTargetToExternalLinks($('
'+marked(textInfo)+'
').appendTo(content)); - //$('
'+(typeof info === "function" ? info.call(node) : info)+'
'; + infoText = marked(textInfo); + } + if (infoText) { + $(' '+RED._("sidebar.info.info")+'').appendTo(tableBody); + addTargetToExternalLinks($('
'+infoText+'
')).appendTo(tableBody); } - $(".node-info-property-header").click(function(e) { - var icon = $(this).find("i"); - if (icon.hasClass("fa-caret-right")) { - icon.removeClass("fa-caret-right"); - icon.addClass("fa-caret-down"); - $(".node-info-property-row").show(); - propertiesExpanded = true; - } else { - icon.addClass("fa-caret-right"); - icon.removeClass("fa-caret-down"); - $(".node-info-property-row").hide(); - propertiesExpanded = false; - } - e.preventDefault(); - }); + ["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]); + + }) + }) } diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss index f21deedf4..61efacb4e 100644 --- a/editor/sass/tab-info.scss +++ b/editor/sass/tab-info.scss @@ -22,64 +22,134 @@ table.node-info { margin: 0px; width: 97%; } -table.node-info tr { +table.node-info tr:not(.blank) { border: 1px solid #ddd; } table.node-info tr.blank { border: none; + th { + text-align: left; + font-weight: bold; + color: #444; + } + >* { + padding-top: 8px; + border: none; + padding-left: 0px; + } + + a { + display: block; + color: #444; + &:hover,&:focus { + color: #444; + text-decoration: none; + } + i { + width: 10px; + text-align: center; + transition: transform 0.2s ease-in-out; + } + &.expanded i { + transform: rotate(90deg); + } + } + &.node-info-info-row > td { + padding-left: 5px; + } } -table.node-info tr.blank td { - padding-top: 8px; - border: none; - font-weight: bold; - padding-left: 0px; -} -table.node-info td:first-child{ + +table.node-info tr:not(.blank) td:first-child{ color: #666; vertical-align: top; width: 90px; padding: 3px; border-right: 1px solid #ddd; } -table.node-info td:last-child{ +table.node-info tr:not(.blank) td:last-child{ padding-left: 5px; color: #666; } div.node-info { margin: 5px; } -.node-info-property-header { - color: #666; -} -.node-info-property-header:hover, -.node-info-property-header:focus { - color: #666; - text-decoration: none; -} .node-help { font-size: 14px; line-height: 1.5em; h1 { - font-weight: normal; + font-weight: 500; font-size: 23px; + line-height: 1.3em; margin: 8px auto; } h2 { - font-weight: normal; + font-weight: 500; font-size: 18px; margin: 8px auto; + line-height: 1.3em; } h3 { - font-weight: normal; + font-weight: 500; font-size: 16px; - margin: 8px auto; + margin: 7px auto 5px; + line-height: 1.3em; } h4, h5 { - font-weight: normal; + font-weight: 500; font-size: 14px; - margin: 8px auto; + line-height: 1.3em; + margin: 8px auto 5px; } + & > span > p:first-child { + } + dl.message-properties { + border: 1px solid #eee; + border-radius: 2px; + + margin: 5px auto 10px; + &>dt { + padding: 0px 3px 2px 3px; + font-family: monospace; + font-weight: normal; + margin: 5px 3px 1px; + color: #AD1625; + white-space: nowrap; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + border-radius: 2px; + &.optional { + font-style: italic; + + } + .property-type { + font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; + color: #666; + font-style: italic; + font-size: 11px; + float: right; + } + &:after { + content: ""; + display: table; + clear: both; + } + } + &>dd { + margin: 1px 8px 10px 10px; + } + } + ol.node-ports { + margin: 0; + li { + border: 1px solid #eee; + border-radius: 2px; + list-style-position: inside; + padding: 3px; + margin-bottom: 5px; + } + } + } .node-info-tip { position: absolute; diff --git a/nodes/core/core/75-exec.html b/nodes/core/core/75-exec.html index cd0e33fa9..670a78423 100644 --- a/nodes/core/core/75-exec.html +++ b/nodes/core/core/75-exec.html @@ -44,33 +44,55 @@