Add workspace statusBar

Gruntfile.js

@@ -150,6 +150,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js",

packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+ /*!
+ RED.statusBar.add({
+     id: "widget-identifier",
+     align: "left|right",
+     element: widgetElement
+ })
+*/
+
+RED.statusBar = (function() {
+
+    var widgets = {};
+    var leftBucket;
+    var rightBucket;
+
+    function addWidget(options) {
+        widgets[options.id] = options;
+        var el = $('<span class="red-ui-statusbar-widget"></span>');
+        options.element.appendTo(el);
+        if (options.align === 'left') {
+            leftBucket.append(el);
+        } else if (options.align === 'right') {
+            rightBucket.prepend(el);
+        }
+    }
+
+    return {
+        init: function() {
+            leftBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-left">').appendTo("#workspace-footer");
+            rightBucket = $('<span class="red-ui-statusbar-bucket red-ui-statusbar-bucket-right">').appendTo("#workspace-footer");
+        },
+        add: addWidget
+    }
+
+})();

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -74,13 +74,13 @@ RED.sidebar.info = (function() {
         tipBox = $('<div class="node-info-tip"></div>').appendTo(tipContainer);
         var tipButtons = $('<div class="node-info-tips-buttons"></div>').appendTo(tipContainer);
 
-        var tipRefresh = $('<a href="#" class="workspace-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
+        var tipRefresh = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-refresh"></a>').appendTo(tipButtons);
         tipRefresh.on("click", function(e) {
             e.preventDefault();
             tips.next();
         })
 
-        var tipClose = $('<a href="#" class="workspace-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
+        var tipClose = $('<a href="#" class="red-ui-footer-button"><i class="fa fa-times"></a>').appendTo(tipButtons);
         tipClose.on("click", function(e) {
             e.preventDefault();
             RED.actions.invoke("core:toggle-show-tips");

packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js

@@ -153,6 +153,11 @@
 
              navVis = navBox.append("svg:g")
 
+             RED.statusBar.add({
+                 id: "view-navigator",
+                 align: "right",
+                 element: $('<button class="red-ui-footer-button-toggle single" id="btn-navigate"><i class="fa fa-map-o"></i></button>')
+             })
 
             $("#btn-navigate").on("click", function(evt) {
                 evt.preventDefault();

packages/node_modules/@node-red/editor-client/src/js/ui/view.js

@@ -321,6 +321,7 @@ RED.view = (function() {
     }
 
     function init() {
+        RED.statusBar.init();
 
         RED.events.on("workspace:change",function(event) {
             if (event.old !== 0) {
@@ -363,7 +364,18 @@ RED.view = (function() {
 
         RED.view.navigator.init();
 
+        RED.statusBar.add({
+            id: "view-zoom-controls",
+            align: "right",
+            element: $('<span>'+
+            '<button class="red-ui-footer-button" id="btn-zoom-out"><i class="fa fa-minus"></i></button>'+
+            '<button class="red-ui-footer-button" id="btn-zoom-zero"><i class="fa fa-circle-o"></i></button>'+
+            '<button class="red-ui-footer-button" id="btn-zoom-in"><i class="fa fa-plus"></i></button>'+
+            '</span>')
+        })
+
         $("#btn-zoom-out").on("click", function() {zoomOut();});
+
         RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
         $("#btn-zoom-zero").on("click", function() {zoomZero();});
         RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');

packages/node_modules/@node-red/editor-client/src/sass/mixins.scss

@@ -227,7 +227,7 @@
     left: 0;
     right: 0;
     height: 25px;
-    line-height: 23px;
+    line-height: 25px;
     padding: 0 10px;
     user-select: none;
 
@@ -239,10 +239,11 @@
 
 @mixin component-footer-button {
     @include workspace-button;
-    font-size: 11px;
+    font-size: 12px;
-    line-height: 17px;
+    line-height: 18px;
-    width: 18px;
+    width: 19px;
-    height: 18px;
+    height: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -250,10 +251,11 @@
 }
 @mixin component-footer-button-toggle {
     @include workspace-button-toggle;
-    font-size: 11px;
+    font-size: 12px;
-    line-height: 17px;
+    line-height: 18px;
-    height: 18px;
+    height: 19px;
-    width: 18px;
+    width: 19px;
+    padding: 0;
     &.text-button {
         width: auto;
         padding: 0 5px;
@@ -278,3 +280,42 @@
 .component-shade {
     @include shade
 }
+
+
+.red-ui-component-footer {
+    @include component-footer;
+}
+
+.red-ui-footer-button {
+    @include component-footer-button;
+}
+
+.red-ui-footer-button-toggle {
+    @include component-footer-button-toggle;
+}
+
+.red-ui-statusbar-widget {
+    margin: 0 2px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    line-height: 20px;
+}
+
+.red-ui-statusbar-bucket {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+}
+.red-ui-statusbar-bucket-left {
+    left: 10px;
+    .red-ui-statusbar-widget:first-child {
+        margin-left: 0;
+    }
+}
+.red-ui-statusbar-bucket-right {
+    right: 10px;
+    .red-ui-statusbar-widget:last-child {
+        margin-right: 0;
+    }
+}

packages/node_modules/@node-red/editor-client/src/sass/palette.scss

@@ -32,8 +32,7 @@
     #palette { width: 8px; }
     #palette-search { display: none; }
     #palette-container { display: none; }
-    #palette-collapse-all { display: none; }
+    #palette-footer { display: none; }
-    #palette-expand-all { display: none; }
 }
 
 .palette-expanded {
@@ -75,13 +74,6 @@
     box-sizing:border-box;
 }
 
-#palette-footer {
-    @include component-footer;
-}
-.palette-button {
-    @include component-footer-button;
-}
-
 .palette-category {
     border-bottom: 1px solid #ccc;
 }

packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss

@@ -74,10 +74,6 @@
     white-space: nowrap;
 }
 
-#sidebar-footer {
-    @include component-footer;
-}
-
 .sidebar-footer-button {
     @include component-footer-button;
 }

packages/node_modules/@node-red/editor-client/src/sass/workspace.scss

@@ -48,15 +48,17 @@
     left: 7px;
 }
 
-.workspace-footer-button {
+// .workspace-footer-button {
-    @include component-footer-button;
+//     @include component-footer-button;
-}
+//     margin-left: 2px;
-.workspace-footer-button-toggle {
+//     margin-right: 2px;
-    @include component-footer-button-toggle;
+// }
-}
+//
-#workspace-footer {
+// .workspace-footer-button-toggle {
-    @include component-footer;
+//     @include component-footer-button-toggle;
-}
+//     margin-left: 2px;
+//     margin-right: 2px;
+// }
 
 #workspace-tabs:not(.workspace-focussed) {
     opacity:0.8;

packages/node_modules/@node-red/editor-client/templates/index.mst

@@ -47,12 +47,7 @@
         <ul id="workspace-tabs"></ul>
         <div id="chart" tabindex="1"></div>
         <div id="workspace-toolbar"></div>
-        <div id="workspace-footer">
+        <div id="workspace-footer" class="red-ui-component-footer"></div>
-            <a class="workspace-footer-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
-            <a class="workspace-footer-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
-            <a class="workspace-footer-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
-            <a class="workspace-footer-button-toggle single" id="btn-navigate" href="#"><i class="fa fa-map-o"></i></a>
-        </div>
         <div id="editor-shade" class="hide"></div>
     </div>
     <div id="editor-stack"></div>
@@ -62,16 +57,16 @@
             <input type="text" data-i18n="[placeholder]palette.filter"></input>
         </div>
         <div id="palette-container" class="palette-scroll hide"></div>
-        <div id="palette-footer">
+        <div id="palette-footer" class="red-ui-component-footer">
-            <a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
+            <a class="red-ui-footer-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
-            <a class="palette-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
+            <a class="red-ui-footer-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
         </div>
         <div id="palette-shade" class="hide"></div>
     </div><!-- /palette -->
     <div id="sidebar">
         <ul id="sidebar-tabs"></ul>
         <div id="sidebar-content"></div>
-        <div id="sidebar-footer"></div>
+        <div id="sidebar-footer" class="red-ui-component-footer"></div>
         <div id="sidebar-shade" class="hide"></div>
     </div>