[outliner] Fix positioning of tips box

node-red · May 7, 2020 · 17891d3 · 17891d3
1 parent 9f29149
commit 17891d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js
@@ -28,6 +28,7 @@ RED.sidebar.info = (function() {
 
     var selectedObject;
 
+    var tipContainer;
     var tipBox;
 
     // TODO: remove this
@@ -36,8 +37,10 @@ RED.sidebar.info = (function() {
     };
 
     function resizeStack() {
-        var h = $(content).parent().height();
-        panels.resize(h)
+        if (panels) {
+            var h = $(content).parent().height() - tipContainer.outerHeight();
+            panels.resize(h)
+        }
     }
     function init() {
 
@@ -119,7 +122,7 @@ RED.sidebar.info = (function() {
 
 
         // Tip Box
-        var tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
+        tipContainer = $('<div class="red-ui-help-tips"></div>').appendTo(content);
         tipBox = $('<div class="red-ui-help-tip"></div>').appendTo(tipContainer);
         var tipButtons = $('<div class="red-ui-help-tips-buttons"></div>').appendTo(tipContainer);
 
@@ -503,6 +506,7 @@ RED.sidebar.info = (function() {
         }
         function startTips() {
             $(".red-ui-sidebar-info").addClass('show-tips');
+            resizeStack();
             if (enabled) {
                 if (!startTimeout && !refreshTimeout) {
                     if (tipCount === -1) {
@@ -516,6 +520,7 @@ RED.sidebar.info = (function() {
         }
         function stopTips() {
             $(".red-ui-sidebar-info").removeClass('show-tips');
+            resizeStack();
             clearInterval(refreshTimeout);
             clearTimeout(startTimeout);
             refreshTimeout = null;

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -247,20 +247,23 @@ div.red-ui-info-table {
     left:0;
     right:0;
     bottom: 0;
-    height: 150px;
+    height: 0;
+    transition: height 0.2s, padding 0.2s;
     box-sizing: border-box;
     border-top: 1px solid $secondary-border-color;
     background-color: $secondary-background;
-    padding: 20px;
+    padding: 0;
     box-shadow: 0 5px 20px 0px $shadow;
     overflow-y: auto;
 }
 .red-ui-sidebar-info.show-tips {
     .red-ui-sidebar-info-stack {
-        bottom: 150px;
+        height: calc(100% - 150px);
     }
     .red-ui-help-tips {
         display: block;
+        height: 150px;
+        padding: 20px;
     }
 }