1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Add flow tab bar menu

This commit is contained in:
Nick O'Leary 2021-08-31 14:46:11 +01:00
parent c880cc0987
commit ed8e7afdf6
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 157 additions and 36 deletions

View File

@ -53,8 +53,15 @@
"confirmDelete": "Confirm delete", "confirmDelete": "Confirm delete",
"delete": "Are you sure you want to delete '__label__'?", "delete": "Are you sure you want to delete '__label__'?",
"dropFlowHere": "Drop the flow here", "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", "status": "Status",
"enabled": "Enabled", "enabled": "Enabled",
"disabled":"Disabled", "disabled":"Disabled",

View File

@ -26,8 +26,8 @@
"ctrl-g v": "core:show-version-control-tab", "ctrl-g v": "core:show-version-control-tab",
"ctrl-shift-l": "core:show-event-log", "ctrl-shift-l": "core:show-event-log",
"ctrl-shift-p":"core:show-action-list", "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": { "red-ui-sidebar-node-config": {
"backspace": "core:delete-config-selection", "backspace": "core:delete-config-selection",

View File

@ -38,6 +38,7 @@ RED.tabs = (function() {
if (options.vertical) { if (options.vertical) {
wrapper.addClass("red-ui-tabs-vertical"); wrapper.addClass("red-ui-tabs-vertical");
} }
if (options.addButton) { if (options.addButton) {
wrapper.addClass("red-ui-tabs-add"); 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); 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) { 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"); 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); 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) { 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 scrollLeft;
var scrollRight; var scrollRight;

View File

@ -354,8 +354,55 @@ RED.workspaces = (function() {
scrollable: true, scrollable: true,
addButton: "core:add-flow", addButton: "core:add-flow",
addButtonCaption: RED._("workspace.addFlow"), 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; 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",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:edit-flow",editWorkspace);
RED.actions.add("core:remove-flow",removeWorkspace); RED.actions.add("core:remove-flow",removeWorkspace);
RED.actions.add("core:enable-flow",enableWorkspace); RED.actions.add("core:enable-flow",enableWorkspace);
RED.actions.add("core:disable-flow",disableWorkspace); 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(); var selection = workspace_tabs.selection();
if (selection.length === 0) { if (selection.length === 0) {
selection = [{id:activeWorkspace}] selection = [{id:activeWorkspace}]
@ -428,7 +476,7 @@ RED.workspaces = (function() {
workspace_tabs.clearSelection(); workspace_tabs.clearSelection();
}) })
RED.actions.add("core:hide-other-tabs", function() { RED.actions.add("core:hide-other-flows", function() {
var selection = workspace_tabs.selection(); var selection = workspace_tabs.selection();
if (selection.length === 0) { if (selection.length === 0) {
selection = [{id:activeWorkspace}] 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(); var currentTabs = workspace_tabs.listTabs();
currentTabs.forEach(function(id) { currentTabs.forEach(function(id) {
RED.workspaces.hide(id); RED.workspaces.hide(id);
@ -460,32 +508,37 @@ RED.workspaces = (function() {
} }
workspace_tabs.clearSelection(); workspace_tabs.clearSelection();
}) })
RED.actions.add("core:show-all-tabs", function() { RED.actions.add("core:show-all-flows", function() {
var currentTabs = workspace_tabs.listTabs(); var currentTabs = workspace_tabs.listTabs();
currentTabs.forEach(function(id) { currentTabs.forEach(function(id) {
RED.workspaces.show(id, null, true) 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(); var id = hideStack.pop();
if (id) { if (id) {
if (typeof id === 'string') { if (typeof id === 'string') {
RED.workspaces.show(id); RED.workspaces.show(id);
} else { } else {
var last = id.pop();
id.forEach(function(i) { 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.add("core:list-flows",function() {
RED.actions.invoke("core:search","type:tab "); 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() { RED.actions.add("core:go-to-previous-location", function() {
if (viewStackPos > 0) { if (viewStackPos > 0) {
if (viewStackPos === viewStack.length) { if (viewStackPos === viewStack.length) {

View File

@ -142,13 +142,18 @@
padding-right: 21px; padding-right: 21px;
} }
&.red-ui-tabs-add { &.red-ui-tabs-add {
padding-right: 35px; padding-right: 29px;
} }
&.red-ui-tabs-add.red-ui-tabs-scrollable { &.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 { &.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 { &.red-ui-tabs-collapsible {
@ -232,13 +237,14 @@
a { a {
@include workspace-button; @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-top: 3px;
margin-right:3px; margin-bottom: 3px;
margin-left:3px; border: none;
border: 1px solid $primary-border-color;
z-index: 2; z-index: 2;
} }
} }
@ -280,6 +286,8 @@
border-left: none; border-left: none;
border-right: none; border-right: none;
border-top: none; border-top: none;
border-bottom: 1px solid $primary-border-color;
line-height: 34px;
} }
} }
.red-ui-tab-scroll-left { .red-ui-tab-scroll-left {
@ -296,15 +304,30 @@
} }
.red-ui-tabs.red-ui-tabs-add .red-ui-tab-scroll-right { .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 { .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 { .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 { .red-ui-tabs-fade {
position: absolute; position: absolute;
bottom: 0; bottom: 0;