frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Restructure info tab

This commit is contained in:
Nick O'Leary 2017-04-06 23:17:06 +01:00
parent 203539841d
commit 624befd704
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
7 changed files with 242 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
editor/js/ui/common/stack.js
View File

@ -20,37 +20,46 @@ RED.stack = (function() {
var entries = [];
var visible = true;
return {
add: function(entry) {
entries.push(entry);
var entryContainer = $('<div class="palette-category">').appendTo(container);
var header = $('<div class="palette-header"></div>').appendTo(entryContainer);
var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
$('<span></span>').html(entry.title).appendTo(header);
entry.content = $('<div class="editor-tray-content"></div>').appendTo(entryContainer);
if (entry.expanded) {
icon.addClass("expanded");
} else {
entry.content.hide();
entry.container = $('<div class="palette-category">').appendTo(container);
if (!visible) {
entry.container.hide();
}
header.click(function() {
if (options.singleExpanded) {
if (!entry.isExpanded()) {
for (var i=0;i<entries.length;i++) {
if (entries[i].isExpanded()) {
entries[i].collapse();
var header = $('<div class="palette-header"></div>').appendTo(entry.container);
entry.content = $('<div></div>').appendTo(entry.container);
if (entry.collapsible !== false) {
header.click(function() {
if (options.singleExpanded) {
if (!entry.isExpanded()) {
for (var i=0;i<entries.length;i++) {
if (entries[i].isExpanded()) {
entries[i].collapse();
}
}
entry.expand();
}
entry.expand();
} else {
entry.toggle();
}
});
var icon = $('<i class="fa fa-angle-down"></i>').appendTo(header);
if (entry.expanded) {
icon.addClass("expanded");
} else {
entry.toggle();
entry.content.hide();
}
});
} else {
header.css("cursor","default");
}
entry.title = $('<span></span>').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;
}
}
}

6
editor/js/ui/editor.js
View File

@ -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");

4
editor/js/ui/palette.js
View File

@ -101,7 +101,7 @@ RED.palette = (function() {
if (label != type) {
l = "<p><b>"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
}
popOverContent = $(l+(info?info:$("script[data-help-name$='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
popOverContent = $(l+(info?info:$("script[data-help-name='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").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 = '<div class="node-help">'+helpText+"</div>";
RED.sidebar.info.set(help);

182
editor/js/ui/tab-info.js
View File

@ -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 = $('<div class="node-info-tip collapsed hide"></div>').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 = $('<table class="node-info"></table>');
var tableBody = $('<tbody>').appendTo(table);
$('<tr class="blank"><th colspan="2"><a href="#" class="node-info-node-header'+(expandedSections.node?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.node")+'</a></th></tr>').appendTo(tableBody);
var propRow;
if (node.type === "tab") {
nodeSection.title.html("Flow");
propRow = $('<tr class="node-info-node-row"><td>Name</td><td></td></tr>').appendTo(tableBody);
$(propRow.children()[1]).html('&nbsp;'+(node.label||""))
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
propRow = $('<tr class="node-info-node-row"><td>Enabled</td><td></td></tr>').appendTo(tableBody);
RED.utils.createObjectElement((!!!node.disabled)).appendTo(propRow.children()[1]);
if (node.type != "subflow" && node.name) {
$('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
}
$('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
$('<tr class="node-info-node-row'+(expandedSections.node?"":" hide")+'"><td>'+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>").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) {
$('<tr class="node-info-node-row"><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>').appendTo(tableBody);
}
$('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>").appendTo(tableBody);
propRow = $('<tr class="node-info-node-row"><td>'+RED._("sidebar.info.id")+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
$('<tr class="blank"><th colspan="2"><a href="#" class="node-info-subflow-header'+(expandedSections.subflow?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.subflow")+'</a></th></tr>').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++;
}
});
$('<tr class="node-info-subflow-row'+(expandedSections.subflow?"":" hide")+'"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>').appendTo(tableBody);
$('<tr class="node-info-subflow-row'+(expandedSections.subflow?"":" hide")+'"><td>'+RED._("sidebar.info.instances")+"</td><td>"+userCount+'</td></tr>').appendTo(tableBody);
}
if (!m && node.type != "subflow" && node.type != "comment") {
$('<tr class="blank"><th colspan="2"><a href="#" class="node-info-property-header'+(expandedSections.property?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.properties")+'</a></th></tr>').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 = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").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 = $('<tr class="node-info-property-row'+(expandedSections.property?"":" hide")+'"><td>'+n+"</td><td></td></tr>").appendTo(tableBody);
RED.utils.createObjectElement(val).appendTo(propRow.children()[1]);
}
}
if (count > 0) {
$('<tr class="node-info-property-expand blank"><td colspan="2"><a href="#" class=" node-info-property-header'+(expandedSections.property?" expanded":"")+'"><span class="node-info-property-show-more">show more</span><span class="node-info-property-show-less">show less</span> <i class="fa fa-caret-down"></i></a></td></tr>').appendTo(tableBody);
}
}
}
if (m) {
if (m[2]) {
subflowNode = RED.nodes.subflow(m[2]);
} else {
subflowNode = node;
}
$('<tr class="blank"><th colspan="2"><a href="#" class="node-info-subflow-header">'+RED._("sidebar.info.subflow")+'</a></th></tr>').appendTo(tableBody);
var userCount = 0;
var subflowType = "subflow:"+subflowNode.id;
RED.nodes.eachNode(function(n) {
if (n.type === subflowType) {
userCount++;
}
});
$('<tr class="node-info-subflow-row"><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>').appendTo(tableBody);
$('<tr class="node-info-subflow-row"><td>'+RED._("sidebar.info.instances")+"</td><td>"+userCount+'</td></tr>').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) {
$('<tr class="blank"><th colspan="2"><a href="#" class="node-info-info-header'+(expandedSections.info?" expanded":"")+'"><i class="fa fa-angle-right"></i> '+RED._("sidebar.info.info")+'</a></th></tr>').appendTo(tableBody);
addTargetToExternalLinks($('<tr class="blank node-info-info-row'+(expandedSections.info?"":" hide")+'"><td colspan="2"><div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div></td></tr>')).appendTo(tableBody);
addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).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]));
}
$('<div class="node-info-tip hide">'+tip+'</div>').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();
}

78
editor/sass/tab-info.scss
View File

@ -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;
}
}

19
nodes/core/core/75-exec.html
View File

@ -44,14 +44,19 @@
</script>
<script type="text/x-red" data-help-name="exec">
<p>Calls out to a system command.</p>
<p>Runs a system command and returns its output.</p>
<p>The node can be configured to either wait until the command completes, or to
send its output as the command generates it.</p>
<p>The command that is run can be configured in the node or provided by the received
message.</p>
<h3>Inputs</h3>
<dl class="message-properties">
<dt class="optional">msg.payload <span class="property-type">string</span></dt>
<dt class="optional">payload <span class="property-type">string</span></dt>
<dd>if configured to do so, will be appended to the executed command.</dd>
<dt class="optional">msg.kill <span class="property-type">string</span></dt>
<dt class="optional">kill <span class="property-type">string</span></dt>
<dd>the type of kill signal to send an existing exec node process.</dd>
<dt class="optional">msg.pid <span class="property-type">number|string</span></dt>
<dt class="optional">pid <span class="property-type">number|string</span></dt>
<dd>the process ID of an existing exec node process to kill.</dd>
</dl>
@ -59,20 +64,20 @@
<ol class="node-ports">
<li>Standard output
<dl class="message-properties">
<dt>msg.payload <span class="property-type">string</span></dt>
<dt>payload <span class="property-type">string</span></dt>
<dd>the standard output of the command.</dd>
</dl>
</li>
<li>Standard error
<dl class="message-properties">
<dt>msg.payload <span class="property-type">string</span></dt>
<dt>payload <span class="property-type">string</span></dt>
<dd>the standard error of the command.</dd>
</dl>
</li>
<li>Return code
<dl class="message-properties">
<dt>msg.payload <span class="property-type">number</span></dt>
<dt>payload <span class="property-type">number</span></dt>
<dd>the return code of the command.</dd>
</dl>
</li>

16
nodes/core/io/10-mqtt.html
View File

@ -38,13 +38,13 @@
<p>Connects to a MQTT broker and subscribes to messages from the specified topic.</p>
<h3>Outputs</h3>
<dl class="message-properties">
<dt>msg.payload <span class="property-type">string | buffer</span></dt>
<dt>payload <span class="property-type">string | buffer</span></dt>
<dd>a string unless detected as a binary buffer.</dd>
<dt>msg.topic <span class="property-type">string</span></dt>
<dt>topic <span class="property-type">string</span></dt>
<dd>the MQTT topic, uses / as a heirarchy separator.</dd>
<dt>msg.qos <span class="property-type">number</span> </dt>
<dt>qos <span class="property-type">number</span> </dt>
<dd>0, fire and forget - 1, at least once - 2, once and once only.</dd>
<dt>msg.retain <span class="property-type">boolean</span></dt>
<dt>retain <span class="property-type">boolean</span></dt>
<dd>true indicates the message was retained and may be old.</dd>
</dl>
<h3>Details</h3>
@ -115,16 +115,16 @@
<p>Connects to a MQTT broker and publishes messages.</p>
<h3>Inputs</h3>
<dl class="message-properties">
<dt>msg.payload <span class="property-type">string | buffer</span></dt>
<dt>payload <span class="property-type">string | buffer</span></dt>
<dd> most users prefer simple text payloads, but binary buffers can also be published.</dd>
<dt class="optional">msg.topic <span class="property-type">string</span></dt>
<dt class="optional">topic <span class="property-type">string</span></dt>
<dd> the MQTT topic to publish to.</dd>
<dt class="optional">msg.qos <span class="property-type">number</span></dt>
<dt class="optional">qos <span class="property-type">number</span></dt>
<dd>0, fire and forget - 1, at least once - 2, once and once only. Default 0.</dd>
<dt class="optional">msg.retain <span class="property-type">boolean</span></dt>
<dt class="optional">retain <span class="property-type">boolean</span></dt>
<dd>set to true to retain the message on the broker. Default false.</dd>
</dl>
<h3>Details</h3>