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;
+ }
+
+ $(' |
').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 @@