diff --git a/editor/js/ui/tab-info.js b/editor/js/ui/tab-info.js
index e2f476ba3..f2a1e3133 100644
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@@ -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 = $('
",{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 = $('
').appendTo(content);
+ tipBox = $('
').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 = $('
');
var tableBody = $('
').appendTo(table);
var propRow;
+ var subflowNode;
if (node.type === "tab") {
nodeSection.title.html("Flow");
propRow = $('Name | |
').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);
}
diff --git a/editor/sass/tab-info.scss b/editor/sass/tab-info.scss
index 9eccd7f32..bc74edd75 100644
--- a/editor/sass/tab-info.scss
+++ b/editor/sass/tab-info.scss
@@ -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;
- }
-
}