Skip to content

Commit

Permalink
Merge pull request #3930 from node-red/tab-context-menu
Browse files Browse the repository at this point in the history 
Improve UX around hiding flows via context menu
  • Loading branch information
@knolleary
knolleary committed Nov 30, 2022
2 parents 3390134 + a351cd9 commit 07c05c1
Show file tree
Hide file tree
Showing 9 changed files with 448 additions and 270 deletions.
10 changes: 7 additions & 3 deletions packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,22 @@
"addFlowToRight": "Add flow to the right",
"hideFlow": "Hide flow",
"hideOtherFlows": "Hide other flows",
"showAllFlows": "Show all flows",
"showAllFlows": "Show all flows (__count__ hidden)",
"hideAllFlows": "Hide all flows",
"hiddenFlows": "List __count__ hidden flow",
"hiddenFlows_plural": "List __count__ hidden flows",
"showLastHiddenFlow": "Show last hidden flow",
"showLastHiddenFlow": "Reopen hidden flow",
"listFlows": "List flows",
"listSubflows": "List subflows",
"status": "Status",
"enabled": "Enabled",
"disabled": "Disabled",
"info": "Description",
"selectNodes": "Click nodes to select"
"selectNodes": "Click nodes to select",
"enableFlow": "Enable flow",
"disableFlow": "Disable flow",
"moveToStart": "Move flow to start",
"moveToEnd": "Move flow to end"
},
"menu": {
"label": {
Expand Down
2 changes: 1 addition & 1 deletion packages/node_modules/@node-red/editor-client/src/js/nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2834,7 +2834,7 @@ RED.nodes = (function() {
},
addWorkspace: addWorkspace,
removeWorkspace: removeWorkspace,
getWorkspaceOrder: function() { return workspacesOrder },
getWorkspaceOrder: function() { return [...workspacesOrder] },
setWorkspaceOrder: function(order) { workspacesOrder = order; },
workspace: getWorkspace,

Expand Down
21 changes: 13 additions & 8 deletions packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -423,11 +423,10 @@ RED.clipboard = (function() {
}
}

function showImportNodes(mode) {
function showImportNodes(library = 'clipboard') {
if (disabled) {
return;
}
mode = mode || "clipboard";

dialogContainer.empty();
dialogContainer.append($(importNodesDialog));
Expand Down Expand Up @@ -533,8 +532,8 @@ RED.clipboard = (function() {
$("#red-ui-clipboard-dialog-import-file-upload").trigger("click");
})

tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+mode);
if (mode === 'clipboard') {
tabs.activateTab("red-ui-clipboard-dialog-import-tab-"+library);
if (library === 'clipboard') {
setTimeout(function() {
$("#red-ui-clipboard-dialog-import-text").trigger("focus");
},100)
Expand All @@ -558,13 +557,16 @@ RED.clipboard = (function() {
});
}

function showExportNodes(mode) {
/**
* Show the export dialog
* @params library which export destination to show
* @params mode whether to default to 'auto' (default) or 'flow'
**/
function showExportNodes(library = 'clipboard', mode = 'auto' ) {
if (disabled) {
return;
}

mode = mode || "clipboard";

dialogContainer.empty();
dialogContainer.append($(exportNodesDialog));

Expand Down Expand Up @@ -766,12 +768,15 @@ RED.clipboard = (function() {
}
}
}
if (mode === 'flow' && !$("#red-ui-clipboard-dialog-export-rng-flow").hasClass('disabled')) {
$("#red-ui-clipboard-dialog-export-rng-flow").trigger("click");
}
if (format === "red-ui-clipboard-dialog-export-fmt-full") {
$("#red-ui-clipboard-dialog-export-fmt-full").trigger("click");
} else {
$("#red-ui-clipboard-dialog-export-fmt-mini").trigger("click");
}
tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+mode);
tabs.activateTab("red-ui-clipboard-dialog-export-tab-"+library);

var dialogHeight = 400;
var winHeight = $(window).height();
Expand Down
4 changes: 2 additions & 2 deletions packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ RED.menu = (function() {

var link = $(linkContent).appendTo(item);
opt.link = link;
if (typeof opt.onselect === 'string') {
var shortcut = RED.keyboard.getShortcut(opt.onselect);
if (typeof opt.onselect === 'string' || opt.shortcut) {
var shortcut = opt.shortcut || RED.keyboard.getShortcut(opt.onselect);
if (shortcut && shortcut.key) {
opt.shortcutSpan = $('<span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span>').appendTo(link.find(".red-ui-menu-label"));
}
Expand Down
49 changes: 37 additions & 12 deletions packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,29 @@ RED.tabs = (function() {
})
}


if (options.contextmenu) {
wrapper.on('contextmenu', function(evt) {
let clickedTab
let target = evt.target
while(target.nodeName !== 'A' && target.nodeName !== 'UL' && target.nodeName !== 'BODY') {
target = target.parentNode
}
if (target.nodeName === 'A') {
const href = target.getAttribute('href')
if (href) {
clickedTab = tabs[href.slice(1)]
}
}
evt.preventDefault()
evt.stopPropagation()
RED.contextMenu.show({
x:evt.clientX-5,
y:evt.clientY-5,
options: options.contextmenu(clickedTab)
})
return false
})
}

var scrollLeft;
var scrollRight;
Expand Down Expand Up @@ -809,17 +831,17 @@ RED.tabs = (function() {
});
RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
}
if (tab.hideable) {
li.addClass("red-ui-tabs-closeable")
var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close red-ui-tab-hide"}).appendTo(li);
closeLink.append('<i class="fa fa-eye" />');
closeLink.append('<i class="fa fa-eye-slash" />');
closeLink.on("click",function(event) {
event.preventDefault();
hideTab(tab.id);
});
RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
}
// if (tab.hideable) {
// li.addClass("red-ui-tabs-closeable")
// var closeLink = $("<a/>",{href:"#",class:"red-ui-tab-close red-ui-tab-hide"}).appendTo(li);
// closeLink.append('<i class="fa fa-eye" />');
// closeLink.append('<i class="fa fa-eye-slash" />');
// closeLink.on("click",function(event) {
// event.preventDefault();
// hideTab(tab.id);
// });
// RED.popover.tooltip(closeLink,RED._("workspace.hideFlow"));
// }

var badges = $('<span class="red-ui-tabs-badges"></span>').appendTo(li);
if (options.onselect) {
Expand Down Expand Up @@ -938,6 +960,9 @@ RED.tabs = (function() {
activeIndex: function() {
return ul.find("li.active").index()
},
getTabIndex: function (id) {
return ul.find("a[href='#"+id+"']").parent().index()
},
contains: function(id) {
return ul.find("a[href='#"+id+"']").length > 0;
},
Expand Down
Loading

0 comments on commit 07c05c1

Please sign in to comment.