frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add info tips back to the sidebar

Browse Source
This commit is contained in:
Nick O'Leary 2017-04-07 11:21:30 +01:00
parent 624befd704
commit 67da853146
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 54 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@ RED.sidebar.info = (function() {
var nodeSection;
var infoSection;
var tipBox;
var tipContainer;
var expandedSections = {
"property": false
@ -41,13 +42,12 @@ RED.sidebar.info = (function() {
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);
var stackContainer = $("<div>",{class:"sidebar-node-info-stack"}).appendTo(content);
sections = RED.stack.create({
container: content
container: stackContainer
}).hide();
nodeSection = sections.add({
@ -60,6 +60,10 @@ RED.sidebar.info = (function() {
});
infoSection.content.css("padding","6px");
infoSection.container.css("border-bottom","none");
tipContainer = $('<div class="node-info-tips"></div>').appendTo(content);
tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
RED.sidebar.addTab({
id: "info",
label: RED._("sidebar.info.label"),
@ -67,6 +71,9 @@ RED.sidebar.info = (function() {
content: content,
enableOnEdit: true
});
tips.start();
}
function show() {
@ -100,7 +107,6 @@ RED.sidebar.info = (function() {
return el;
}
function refresh(node) {
tips.stop();
sections.show();
$(nodeSection.content).empty();
$(infoSection.content).empty();
@ -108,6 +114,7 @@ RED.sidebar.info = (function() {
var table = $('<table class="node-info"></table>');
var tableBody = $('<tbody>').appendTo(table);
var propRow;
var subflowNode;
if (node.type === "tab") {
nodeSection.title.html("Flow");
propRow = $('<tr class="node-info-node-row"><td>Name</td><td></td></tr>').appendTo(tableBody);
@ -127,7 +134,6 @@ RED.sidebar.info = (function() {
RED.utils.createObjectElement(node.id).appendTo(propRow.children()[1]);
var m = /^subflow(:(.+))?$/.exec(node.type);
var subflowNode;
if (!m && node.type != "subflow" && node.type != "comment") {
if (node._def) {
@ -199,7 +205,6 @@ RED.sidebar.info = (function() {
var tips = (function() {
var started = false;
var enabled = true;
var startDelay = 1000;
var cycleDelay = 15000;
@ -213,9 +218,7 @@ RED.sidebar.info = (function() {
} else {
enabled = state;
if (enabled) {
if (started) {
startTips();
}
startTips();
} else {
stopTips();
}
@ -250,7 +253,7 @@ RED.sidebar.info = (function() {
})
}
function startTips() {
started = true;
$(".sidebar-node-info").addClass('show-tips');
if (enabled) {
if (!startTimeout && !refreshTimeout) {
if (tipCount === -1) {
@ -263,12 +266,11 @@ RED.sidebar.info = (function() {
}
}
function stopTips() {
started = false;
$(".sidebar-node-info").removeClass('show-tips');
clearInterval(refreshTimeout);
clearTimeout(startTimeout);
refreshTimeout = null;
startTimeout = null;
tipBox.hide();
}
return {
start: startTips,
@ -277,13 +279,12 @@ RED.sidebar.info = (function() {
})();
function clear() {
console.log("clear');");
sections.hide();
tips.start();
//
}
function set(html) {
tips.stop();
// tips.stop();
sections.show();
$(infoSection.content).html(html);
}

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

@ -181,26 +181,51 @@ div.node-info {
}
}
.node-info-tip {
.sidebar-node-info-stack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
.node-info-tips {
display: none;
position: absolute;
top: 40%;
left:0;
right:0;
bottom: 0;
height: 150px;
box-sizing: border-box;
border-top: 1px solid $secondary-border-color;
background-color: #fff;
padding: 20px;
}
.sidebar-node-info.show-tips {
.sidebar-node-info-stack {
bottom: 150px;
}
.node-info-tips {
display: block;
}
}
.node-info-tips:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.node-info-tip {
display: inline-block;
vertical-align: middle;
width: calc(100% - 30px);
font-size: 16px;
text-align: center;
line-height: 1.9em;
color : #bbb;
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;
}
}