Merge branch 'Hide-Tabs'

Author: Dave Conway-Jones

dist/css/app.min.less

@@ -427,6 +427,10 @@ md-select-menu md-option:focus:not([disabled]):not([selected]) {
     md-list {
         padding: unset;
     }
+    md-list-item[disabled] {
+        color: #808080;
+        // text-decoration: line-through;
+    }
     md-list-item {
         min-height: @nrUnitHeight * 2;
         height: @nrUnitHeight * 2;

dist/dashboard.appcache

@@ -19,4 +19,4 @@ weather-icons-lite/fonts/weather-icons-lite.woff2
 NETWORK:
 *
 
-# hash: d32b62bc0f3d82d84d13550bca84c7402ad2b017381da5561a2a98cd0e45aaff
+# hash: 84582e1a4998226b40219d89c869226f8828f92fb9ba5abb104ebd5d6c8f9b28

dist/js/app.min.js

@@ -4,8 +4,18 @@
             "home" : "Home",
             "tab" : "Tab",
             "name" : "Name",
-            "icon" : "Icon"
+            "icon" : "Icon",
+            "state" : "State",
+            "navmenu" : "Nav. Menu",
+            "enabled" : "Enabled",
+            "disabled" : "Disabled",
+            "visible" : "Visible",
+            "hidden" : "Hidden"
         },
-	"tip" : "The <b>Icon</b> field can be either a <a href=\"https://design.google.com/icons/\" target=\"_blank\">Material Design icon</a> <i>(e.g. 'check', 'close')</i> or a <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(e.g. 'fa-fire')</i>, or a <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css/weather-icons-lite.css\" target=\"_blank\">Weather icon</a> <i>(e.g. 'wi-wu-sunny')</i>.</p>"
+        "info": {
+            "disabled": " Tab is inactive in Dashboard.",
+            "hidden": " Tab is not shown in Navigation Menu."
+        },
+        "tip" : "The <b>Icon</b> field can be either a <a href=\"https://design.google.com/icons/\" target=\"_blank\">Material Design icon</a> <i>(e.g. 'check', 'close')</i> or a <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">Font Awesome icon</a> <i>(e.g. 'fa-fire')</i>, or a <a href=\"https://github.com/Paul-Reed/weather-icons-lite/blob/master/css/weather-icons-lite.css\" target=\"_blank\">Weather icon</a> <i>(e.g. 'wi-wu-sunny')</i>.</p>"
     }
 }

nodes/locales/en-US/ui_tab.json

@@ -46,6 +46,12 @@
     .nr-db-sb-list-header:hover {
         color: #333;
     }
+    .nr-db-sb-title-hidden {
+        text-decoration: line-through;
+    }
+    .nr-db-sb-title-disabled {
+        color: #999;
+    }
     .nr-db-sb-tab-list-header {
         background: #f3f3f3;
         padding:5px;
@@ -1222,8 +1228,12 @@
                             container.addClass("nr-db-sb-tab-list-item");
                             $('<i class="nr-db-sb-list-handle nr-db-sb-tab-list-handle fa fa-bars"></i>').appendTo(titleRow);
                             var chevron = $('<i class="fa fa-angle-down nr-db-sb-list-chevron">',{style:"width:10px;"}).appendTo(titleRow);
-                            $('<i class="nr-db-sb-icon nr-db-sb-tab-icon fa fa-file-o"></i>').appendTo(titleRow);
-                            var title = $('<span class="nr-db-sb-title">').html(item.node.name||"").appendTo(titleRow);
+                            var tabicon = "fa-object-group";
+                            //var tabicon = item.node.disabled ? "fa-window-close-o" : item.node.hidden ? "fa-eye-slash" : "fa-object-group";
+                            $('<i>',{class:"nr-db-sb-icon nr-db-sb-tab-icon fa "+tabicon}).appendTo(titleRow);
+                            var tabhide = item.node.hidden ? " nr-db-sb-title-hidden" : "";
+                            var tabable = item.node.disabled ? " nr-db-sb-title-disabled" : "";
+                            $('<span>',{class:"nr-db-sb-title"+tabhide+tabable}).html(item.node.name||"").appendTo(titleRow);
                             break;
                         }
                         case 'ui_link': {
@@ -1974,6 +1984,12 @@
                                 if (node.type === "ui_group") {
                                     refresh();
                                 }
+                                else {
+                                    if (node.hidden === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-hidden'); }
+                                    else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-hidden'); }
+                                    if (node.disabled === true) { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").addClass('nr-db-sb-title-disabled'); }
+                                    else { listElements[node.id].children(".nr-db-sb-list-header").find(".nr-db-sb-title").removeClass('nr-db-sb-title-disabled'); }
+                                }
                             }
                             else if (node.type === "ui_tab") {
                                 // Adding a tab

nodes/ui_base.html

@@ -1,18 +1,20 @@
 <script type="text/javascript">
     // convert to i18 text
-    function c_(x) {
+    function c_ui_group(x) {
         return RED._("node-red-dashboard/ui_group:ui_group."+x);
     }
 
     RED.nodes.registerType('ui_group',{
         category: 'config',
         defaults: {
-            name: {value: c_("label.default")},
+            name: {value: c_ui_group("label.default")},
             tab: {type:"ui_tab", required: true },
             order: {value: 0},
             disp: {value: true},
             width: {value: 6},
-            collapse: {value: false}
+            collapse: {value: false},
+            disabled: {value: false},
+            hidden: {value: false}
         },
         sort: function(A,B) {
             if (A.tab !== B.tab) {
@@ -34,9 +36,9 @@
         label: function() {
             var tabNode = RED.nodes.node(this.tab);
             if (tabNode) {
-                return "["+(tabNode.name||c_("label.tab"))+"] " + (this.name || c_("label.group"));
+                return "["+(tabNode.name||c_ui_group("label.tab"))+"] " + (this.name || c_ui_group("label.group"));
             }
-            return "["+c_("label.unassigned")+"] " + (this.name || c_("label.group"));
+            return "["+c_ui_group("label.unassigned")+"] " + (this.name || c_ui_group("label.group"));
         },
         oneditprepare: function() {
             $("#node-input-size").elementSizer({

nodes/ui_group.html

@@ -1,20 +1,67 @@
 <script type="text/javascript">
     // convert to i18 text
-    function c_(x) {
+    function c_ui_tab(x) {
         return RED._("node-red-dashboard/ui_tab:ui_tab."+x);
     }
 
     RED.nodes.registerType('ui_tab',{
         category: 'config',
         defaults: {
-            name: {value: c_("label.home")},
+            name: {value: c_ui_tab("label.home")},
             icon: {value: 'dashboard'},
-            order: {value: 0}
+            order: {value: 0},
+            disabled: {value: false},
+            hidden: {value: false}
         },
         paletteLabel: 'dashboard tab',
-        label: function() { return this.name || c_("label.tab"); },
+        label: function() { return this.name || c_ui_tab("label.tab"); },
         sort: function(A,B) {
             return A.order - B.order;
+        },
+        oneditprepare: function() {
+            $("#node-config-input-disabled-btn").on("click", function(e) {
+                var i = $(this).find("i");
+                var active = i.hasClass("fa-toggle-on");
+                var newCls = "fa fa-toggle-" + (active ? "off" : "on");
+                i.attr("class", newCls);
+                $("#node-config-input-disabled").prop('checked',active);
+
+                var newTxt = c_ui_tab(active ? "label.disabled" : "label.enabled");
+                $("#node-config-input-disabled-label").text(newTxt);
+
+                var info = $("#node-config-input-disabled-info");
+                var done = active ? info.show() : info.hide();
+            });
+            if (this.disabled) {
+                $("#node-config-input-disabled-btn").click();
+            }
+            else {
+                $("#node-config-input-disabled-label").text(c_ui_tab("label.enabled"));
+            }
+
+            $("#node-config-input-hidden-btn").on("click", function(e) {
+                var i = $(this).find("i");
+                var active = i.hasClass("fa-toggle-on");
+                var newCls = "fa fa-toggle-" + (active ? "off" : "on");
+                i.attr("class", newCls);
+                $("#node-config-input-hidden").prop('checked',active);
+
+                var newTxt = c_ui_tab(active ? "label.hidden" : "label.visible");
+                $("#node-config-input-hidden-label").text(newTxt);
+
+                var info = $("#node-config-input-hidden-info");
+                var done = active ? info.show() : info.hide();
+            });
+            if (this.hidden) {
+                $("#node-config-input-hidden-btn").click();
+            }
+            else {
+                $("#node-config-input-hidden-label").text(c_ui_tab("label.visible"));
+            }
+        },
+        oneditsave: function() {
+            this.disabled = $("#node-config-input-disabled").prop("checked");
+            this.hidden = $("#node-config-input-hidden").prop("checked");
         }
     });
 </script>
@@ -28,11 +75,29 @@
         <label for="node-config-input-icon"><i class="fa fa-file-image-o"></i> <span data-i18n="ui_tab.label.icon"></span></label>
         <input type="text" id="node-config-input-icon">
     </div>
+    <div class="form-row">
+        <label for="node-config-input-disabled-btn"><i class="fa fa-ban"></i> <span data-i18n="ui_tab.label.state"></span></label>
+        <button id="node-config-input-disabled-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-disabled-label"></span></button>
+        <input type="checkbox" id="node-config-input-disabled" style="display:none;"/>
+        <span id="node-config-input-disabled-info" data-i18n="[html]ui_tab.info.disabled" style="display:none;"></span>
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-hidden-btn"><i class="fa fa-eye-slash"></i> <span data-i18n="ui_tab.label.navmenu"></span></label>
+        <button id="node-config-input-hidden-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-hidden-label"></span></button>
+        <input type="checkbox" id="node-config-input-hidden" style="display:none;"/>
+        <span id="node-config-input-hidden-info" data-i18n="[html]ui_tab.info.hidden" style="display:none;"></span>
+    </div>
     <div class="form-tips" data-i18n="[html]ui_tab.tip"></div>
 </script>
 
 <script type="text/x-red" data-help-name="ui_tab">
     <p>Tab configuration for Dashboard</p>
+    <p><b>Disabled</b> pages are not included in the Dashboard app, and are therefore not functional.
+       The tab name still appears in the Navigation Menu (unless it is also hidden).
+    </p>
+    <p><b>Hidden</b> pages are not listed in the Left-hand Navigation Menu.
+       However, they are still active in the Dashboard, and can be shown by using a `ui_control` msg.
+    </p>
     <p>The <b>Icon</b> field can be either
     <a href="https://design.google.com/icons/" target="_blank">Material Design icons</a> <i>(e.g. 'check', 'close')</i>
     or <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icons</a> <i>(e.g. 'fa-fire')</i>,

nodes/ui_tab.html

@@ -5,7 +5,9 @@ module.exports = function(RED) {
         this.config = {
             name: config.name,
             order: config.order || 0,
-            icon: config.icon || ''
+            icon: config.icon || '',
+            disabled: config.disabled || false,
+            hidden: config.hidden || false
         };
     }
 

nodes/ui_tab.js

@@ -82,11 +82,15 @@ app.controller('MainController', ['$mdSidenav', '$window', 'UiEvents', '$locatio
             var len = main.menu.length;
             if (len > 1) {
                 //var i = parseInt($location.path().substr(1));
-                var i = tabId;
-                i = (i + d) % len;
-                if (i < 0) { i += len; }
-                main.open(main.menu[i], i);
-                tabId = i;
+                for (var i = tabId + d; i != tabId; i += d) {
+                    i = i % len;
+                    if (i < 0) { i += len; }
+                    if (!main.menu[i].disabled && !main.menu[i].hidden) {
+                        main.select(i);
+                        tabId = i;
+                        return;
+                    }
+                }
             }
         }
 
@@ -341,18 +345,23 @@ app.controller('MainController', ['$mdSidenav', '$window', 'UiEvents', '$locatio
                 hideGroups();
                 done();
             }
-            if (!isNaN(prevTabIndex) && prevTabIndex < main.menu.length) {
+            if (!isNaN(prevTabIndex) && prevTabIndex < main.menu.length && !main.menu[prevTabIndex].disabled) {
                 main.selectedTab = main.menu[prevTabIndex];
                 finishLoading();
             }
             else {
                 $timeout( function() {
-                    // open first menu, which is not new tab link
+                    // open first menu, which is not new tab link, and is not disabled
                     var indexToOpen = null;
                     main.menu.some(function (menu, i) {
                         if (menu.target === undefined || menu.target === 'iframe') {
-                            indexToOpen = i;
-                            return true;
+                            if (!menu.disabled) {
+                                indexToOpen = i;
+                                return true;
+                            }
+                            else {
+                                return false;
+                            }
                         }
                     })
                     if (indexToOpen !== null) {
@@ -508,20 +517,23 @@ app.controller('MainController', ['$mdSidenav', '$window', 'UiEvents', '$locatio
                     for (var i in main.menu) {
                         // is it the name of a tab ?
                         if (msg.tab == main.menu[i].header) {
-                            main.select(i);
+                            if (!main.menu[i].disabled) { main.select(i); }
                             return;
                         }
                         // or the name of a link ?
                         else if (msg.tab == main.menu[i].name) {
-                            main.open(main.menu[i], i);
+                            if (!main.menu[i].disabled) { main.open(main.menu[i], i); }
                             return;
                         }
                     }
                 }
                 // or is it a valid index number ?
                 var index = parseInt(msg.tab);
                 if (Number.isNaN(index) || index < 0) { return; }
-                if (index < main.menu.length) { main.open(main.menu[index], index); }
+                if (index < main.menu.length) {
+                    if (!main.menu[index].disabled) { main.open(main.menu[index], index); }
+                    return;
+                }
             }
             if (msg.hasOwnProperty("group")) {  // it's to control a group item
                 if (typeof msg.group === 'object') {

src/main.js

@@ -11,7 +11,7 @@ <h1 ng-show="!main.lockMenu && main.loaded">{{main.selectedTab.header || main.se
 <section layout="row" flex>
     <md-sidenav ng-hide="main.len <= 1" class="md-sidenav-left" md-component-id="left" md-is-locked-open="main.lockMenu">
         <md-list>
-            <md-list-item ng-repeat="obj in main.menu" ng-click="main.open(obj, $index)" ng-class="{ 'nr-menu-item-active': obj.id == main.selectedTab.id }">
+            <md-list-item ng-repeat="obj in main.menu" ng-disabled="obj.disabled" ng-if="!obj.hidden" ng-click="main.open(obj, $index)">
                 <ui-icon icon="{{obj.icon}}" style="margin:5px"></ui-icon>
                 <p>{{main.getMenuName(obj)}}</p>
             </md-list-item>