Add flow tab bar menu

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -53,8 +53,15 @@
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here",
-        "addFlow": "Add Flow",
+        "addFlow": "Add flow",
-        "listFlows": "List Flows",
+        "addFlowToRight": "Add flow to the right",
+        "hideFlow": "Hide flow",
+        "hideOtherFlows": "Hide other flows",
+        "showAllFlows": "Show all flows",
+        "hideAllFlows": "Hide all flows",
+        "showLastHiddenFlow": "Show last hidden flow",
+        "listFlows": "List flows",
+        "listSubflows": "List subflows",
         "status": "Status",
         "enabled": "Enabled",
         "disabled":"Disabled",

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -26,8 +26,8 @@
         "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log",
         "ctrl-shift-p":"core:show-action-list",
-        "alt-w": "core:hide-tab",
+        "alt-w": "core:hide-flow",
-        "alt-shift-w": "core:show-last-hidden-tab"
+        "alt-shift-w": "core:show-last-hidden-flow"
     },
     "red-ui-sidebar-node-config": {
         "backspace": "core:delete-config-selection",

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

@@ -38,6 +38,7 @@ RED.tabs = (function() {
         if (options.vertical) {
             wrapper.addClass("red-ui-tabs-vertical");
         }
+
         if (options.addButton) {
             wrapper.addClass("red-ui-tabs-add");
             var addButton = $('<div class="red-ui-tab-button red-ui-tabs-add"><a href="#"><i class="fa fa-plus"></i></a></div>').appendTo(wrapper);
@@ -75,6 +76,8 @@ RED.tabs = (function() {
             });
         }
         if (options.searchButton) {
+            // This is soft-deprecated as we don't use this in the core anymore
+            // We no use the `menu` option to provide a drop-down list of actions
             wrapper.addClass("red-ui-tabs-search");
             var searchButton = $('<div class="red-ui-tab-button red-ui-tabs-search"><a href="#"><i class="fa fa-list-ul"></i></a></div>').appendTo(wrapper);
             searchButton.find('a').on("click", function(evt) {
@@ -94,6 +97,39 @@ RED.tabs = (function() {
             }
 
         }
+        if (options.menu) {
+            wrapper.addClass("red-ui-tabs-menu");
+            var menuButton = $('<div class="red-ui-tab-button red-ui-tabs-menu"><a href="#"><i class="fa fa-caret-down"></i></a></div>').appendTo(wrapper);
+            menuButton.find('a').on("click", function(evt) {
+                evt.stopPropagation();
+                evt.preventDefault();
+                var menuOptions = [];
+                if (typeof options.searchButton === 'function') {
+                    menuOptions = options.menu()
+                } else if (Array.isArray(options.menu)) {
+                    menuOptions = options.menu;
+                }
+                var menu = RED.menu.init({options: menuOptions});
+                menu.css({
+                    position: "absolute"
+                })
+                menu.appendTo("body");
+                var elementPos = menuButton.offset();
+                menu.css({
+                    top: (elementPos.top+menuButton.height()-2)+"px",
+                    left: (elementPos.left - menu.width() + menuButton.width())+"px"
+                })
+                $(".red-ui-menu.red-ui-menu-dropdown").hide();
+                $(document).on("click.red-ui-tabmenu", function(evt) {
+                    $(document).off("click.red-ui-tabmenu");
+                    menu.remove();
+                });
+                menu.show();
+            })
+        }
+
+
+
         var scrollLeft;
         var scrollRight;
 

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

@@ -354,8 +354,55 @@ RED.workspaces = (function() {
             scrollable: true,
             addButton: "core:add-flow",
             addButtonCaption: RED._("workspace.addFlow"),
-            searchButton: "core:list-flows",
+            menu: [
-            searchButtonCaption: RED._("workspace.listFlows")
+                {
+                    id:"red-ui-tabs-menu-option-search-flows",
+                    label: RED._("workspace.listFlows"),
+                    onselect: "core:list-flows"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-search-subflows",
+                    label: RED._("workspace.listSubflows"),
+                    onselect: "core:list-subflows"
+                },
+                null,
+                {
+                    id:"red-ui-tabs-menu-option-add-flow",
+                    label: RED._("workspace.addFlow"),
+                    onselect: "core:add-flow"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-flow-right",
+                    label: RED._("workspace.addFlowToRight"),
+                    onselect: "core:add-flow-to-right"
+                },
+                null,
+                {
+                    id:"red-ui-tabs-menu-option-add-hide-flows",
+                    label: RED._("workspace.hideFlow"),
+                    onselect: "core:hide-flow"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-hide-other-flows",
+                    label: RED._("workspace.hideOtherFlows"),
+                    onselect: "core:hide-other-flows"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-show-all-flows",
+                    label: RED._("workspace.showAllFlows"),
+                    onselect: "core:show-all-flows"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-hide-all-flows",
+                    label: RED._("workspace.hideAllFlows"),
+                    onselect: "core:hide-all-flows"
+                },
+                {
+                    id:"red-ui-tabs-menu-option-add-show-last-flow",
+                    label: RED._("workspace.showLastHiddenFlow"),
+                    onselect: "core:show-last-hidden-flow"
+                }
+            ]
         });
         workspaceTabCount = 0;
     }
@@ -406,12 +453,13 @@ RED.workspaces = (function() {
         });
 
         RED.actions.add("core:add-flow",function(opts) { addWorkspace(undefined,undefined,opts?opts.index:undefined)});
+        RED.actions.add("core:add-flow-to-right",function(opts) { addWorkspace(undefined,undefined,workspace_tabs.activeIndex()+1)});
         RED.actions.add("core:edit-flow",editWorkspace);
         RED.actions.add("core:remove-flow",removeWorkspace);
         RED.actions.add("core:enable-flow",enableWorkspace);
         RED.actions.add("core:disable-flow",disableWorkspace);
 
-        RED.actions.add("core:hide-tab", function() {
+        RED.actions.add("core:hide-flow", function() {
             var selection = workspace_tabs.selection();
             if (selection.length === 0) {
                 selection = [{id:activeWorkspace}]
@@ -428,7 +476,7 @@ RED.workspaces = (function() {
             workspace_tabs.clearSelection();
         })
 
-        RED.actions.add("core:hide-other-tabs", function() {
+        RED.actions.add("core:hide-other-flows", function() {
             var selection = workspace_tabs.selection();
             if (selection.length === 0) {
                 selection = [{id:activeWorkspace}]
@@ -449,7 +497,7 @@ RED.workspaces = (function() {
             }
         })
 
-        RED.actions.add("core:hide-all-tabs", function() {
+        RED.actions.add("core:hide-all-flows", function() {
             var currentTabs = workspace_tabs.listTabs();
             currentTabs.forEach(function(id) {
                 RED.workspaces.hide(id);
@@ -460,32 +508,37 @@ RED.workspaces = (function() {
             }
             workspace_tabs.clearSelection();
         })
-        RED.actions.add("core:show-all-tabs", function() {
+        RED.actions.add("core:show-all-flows", function() {
             var currentTabs = workspace_tabs.listTabs();
             currentTabs.forEach(function(id) {
                 RED.workspaces.show(id, null, true)
             })
         })
-        RED.actions.add("core:toggle-tabs", function() {
+        // RED.actions.add("core:toggle-flows", function() {
-            var currentTabs = workspace_tabs.listTabs();
+        //     var currentTabs = workspace_tabs.listTabs();
-            var visibleCount = workspace_tabs.count();
+        //     var visibleCount = workspace_tabs.count();
-            currentTabs.forEach(function(id) {
+        //     currentTabs.forEach(function(id) {
-                if (visibleCount === 0) {
+        //         if (visibleCount === 0) {
-                    RED.workspaces.show(id)
+        //             RED.workspaces.show(id)
-                } else {
+        //         } else {
-                    RED.workspaces.hide(id)
+        //             RED.workspaces.hide(id)
-                }
+        //         }
-            })
+        //     })
-        })
+        // })
-        RED.actions.add("core:show-last-hidden-tab", function() {
+        RED.actions.add("core:show-last-hidden-flow", function() {
             var id = hideStack.pop();
             if (id) {
                 if (typeof id === 'string') {
                     RED.workspaces.show(id);
                 } else {
+                    var last = id.pop();
                     id.forEach(function(i) {
-                        RED.workspaces.show(i);
+                        RED.workspaces.show(i, null, true);
                     })
+                    setTimeout(function() {
+                        RED.workspaces.show(last);
+                    },150)
+
                 }
             }
         })
@@ -493,7 +546,9 @@ RED.workspaces = (function() {
         RED.actions.add("core:list-flows",function() {
             RED.actions.invoke("core:search","type:tab ");
         })
-
+        RED.actions.add("core:list-subflows",function() {
+            RED.actions.invoke("core:search","type:subflow ");
+        })
         RED.actions.add("core:go-to-previous-location", function() {
             if (viewStackPos > 0) {
                 if (viewStackPos === viewStack.length) {

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

@@ -142,13 +142,18 @@
         padding-right: 21px;
     }
     &.red-ui-tabs-add {
-        padding-right: 35px;
+        padding-right: 29px;
     }
     &.red-ui-tabs-add.red-ui-tabs-scrollable {
-        padding-right: 59px;
+        padding-right: 53px;
     }
+    &.red-ui-tabs-add.red-ui-tabs-menu.red-ui-tabs-scrollable,
     &.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-scrollable {
-        padding-right: 95px;
+        padding-right: 83px;
+    }
+
+    &.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-menu.red-ui-tabs-scrollable {
+        padding-right: 113px;
     }
 
     &.red-ui-tabs-collapsible {
@@ -232,13 +237,14 @@
 
     a {
         @include workspace-button;
-        line-height: 32px;
+        line-height: 30px;
-        height: 32px;
+        height: 28px;
-        width: 32px;
+        width: 28px;
+        margin-left: 2px;
+        margin-right: 2px;
         margin-top: 3px;
-        margin-right:3px;
+        margin-bottom: 3px;
-        margin-left:3px;
+        border: none;
-        border: 1px solid $primary-border-color;
         z-index: 2;
     }
 }
@@ -280,6 +286,8 @@
         border-left: none;
         border-right: none;
         border-top: none;
+        border-bottom: 1px solid $primary-border-color;
+        line-height: 34px;
     }
 }
 .red-ui-tab-scroll-left {
@@ -296,15 +304,30 @@
 
 }
 .red-ui-tabs.red-ui-tabs-add .red-ui-tab-scroll-right {
-    right: 38px;
+    right: 32px;
 }
 
+.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-menu .red-ui-tab-scroll-right,
 .red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tab-scroll-right {
-    right: 76px;
+    right: 64px;
 }
+.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-menu .red-ui-tabs-add,
 .red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search .red-ui-tabs-add {
-    right: 38px;
+    right: 32px;
 }
+
+.red-ui-tabs.red-ui-tabs-add.red-ui-tabs-search.red-ui-tabs-menu {
+    .red-ui-tab-scroll-right {
+        right: 96px;
+    }
+    .red-ui-tabs-add {
+        right: 64px;
+    }
+    .red-ui-tabs-search {
+        right: 32px;
+    }
+}
+
 .red-ui-tabs-fade {
     position: absolute;
     bottom: 0;