From 79622784753b1dab684f866e9cb7c3a50dbf0c5b Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 25 Aug 2021 11:34:41 +0100 Subject: [PATCH] Allow tabs to be hidden via x-button on tab --- .../editor-client/src/js/ui/common/tabs.js | 99 +++++++++++-------- .../editor-client/src/js/ui/workspaces.js | 24 ++--- 2 files changed, 70 insertions(+), 53 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js index 4185dad78..19b0d0ef2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js @@ -337,10 +337,11 @@ RED.tabs = (function() { if (link.length === 0) { return; } - var wasUnhidden = false; if (link.parent().hasClass("hide")) { - wasUnhidden = true; link.parent().removeClass("hide"); + if (options.onshow) { + options.onshow(tabs[link.attr('href').slice(1)]) + } } if (!link.parent().hasClass("active")) { ul.children().removeClass("active"); @@ -358,7 +359,7 @@ RED.tabs = (function() { } } if (options.onchange) { - options.onchange(tabs[link.attr('href').slice(1)],wasUnhidden); + options.onchange(tabs[link.attr('href').slice(1)]); } updateTabWidths(); setTimeout(function() { @@ -542,6 +543,47 @@ RED.tabs = (function() { } return next; } + function showTab(id) { + if (tabs[id]) { + var li = ul.find("a[href='#"+id+"']").parent(); + if (li.hasClass("hide")) { + li.removeClass("hide"); + if (ul.find("li.red-ui-tab:not(.hide)").length === 1) { + activateTab(li.find("a")) + } + updateTabWidths(); + if (options.onshow) { + options.onshow(tabs[id]) + } + } + } + } + function hideTab(id) { + if (tabs[id]) { + var li = ul.find("a[href='#"+id+"']").parent(); + if (!li.hasClass("hide")) { + if (li.hasClass("active")) { + var tab = findPreviousVisibleTab(li); + if (tab.length === 0) { + tab = findNextVisibleTab(li); + } + if (tab.length > 0) { + activateTab(tab.find("a")); + } else { + if (options.onchange) { + options.onchange(null); + } + } + } + li.removeClass("active"); + li.addClass("hide"); + updateTabWidths(); + if (options.onhide) { + options.onhide(tabs[id]) + } + } + } + } var tabAPI = { addTab: function(tab,targetIndex) { @@ -711,6 +753,15 @@ RED.tabs = (function() { removeTab(tab.id); }); } + if (tab.hideable) { + li.addClass("red-ui-tabs-closeable") + var closeLink = $("",{href:"#",class:"red-ui-tab-close"}).appendTo(li); + closeLink.append(''); + closeLink.on("click",function(event) { + event.preventDefault(); + hideTab(tab.id); + }); + } var badges = $('').appendTo(li); if (options.onselect) { @@ -831,45 +882,9 @@ RED.tabs = (function() { contains: function(id) { return ul.find("a[href='#"+id+"']").length > 0; }, - showTab: function(id) { - if (tabs[id]) { - var li = ul.find("a[href='#"+id+"']").parent(); - if (li.hasClass("hide")) { - li.removeClass("hide"); - if (ul.find("li.red-ui-tab:not(.hide)").length === 1) { - activateTab(li.find("a")) - } - updateTabWidths(); - return true; - } - } - return false; - }, - hideTab: function(id) { - if (tabs[id]) { - var li = ul.find("a[href='#"+id+"']").parent(); - if (!li.hasClass("hide")) { - if (li.hasClass("active")) { - var tab = findPreviousVisibleTab(li); - if (tab.length === 0) { - tab = findNextVisibleTab(li); - } - if (tab.length > 0) { - activateTab(tab.find("a")); - } else { - if (options.onchange) { - options.onchange(null); - } - } - } - li.removeClass("active"); - li.addClass("hide"); - updateTabWidths(); - return true; - } - } - return false; - }, + showTab: showTab, + hideTab: hideTab, + renameTab: function(id,label) { tabs[id].label = label; var tab = ul.find("a[href='#"+id+"']"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index 5d162b1d5..0df6354a4 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js @@ -35,6 +35,9 @@ RED.workspaces = (function() { function addWorkspace(ws,skipHistoryEntry,targetIndex) { if (ws) { + if (!ws.closeable) { + ws.hideable = true; + } workspace_tabs.addTab(ws,targetIndex); workspace_tabs.resize(); } else { @@ -43,7 +46,7 @@ RED.workspaces = (function() { workspaceIndex += 1; } while ($("#red-ui-workspace-tabs a[title='"+RED._('workspace.defaultName',{number:workspaceIndex})+"']").size() !== 0); - ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex})}; + ws = {type:"tab",id:tabId,disabled: false,info:"",label:RED._('workspace.defaultName',{number:workspaceIndex}), hideable: true}; RED.nodes.addWorkspace(ws,targetIndex); workspace_tabs.addTab(ws,targetIndex); workspace_tabs.activateTab(tabId); @@ -245,7 +248,7 @@ RED.workspaces = (function() { function createWorkspaceTabs() { workspace_tabs = RED.tabs.create({ id: "red-ui-workspace-tabs", - onchange: function(tab, wasUnhidden) { + onchange: function(tab) { var event = { old: activeWorkspace } @@ -260,9 +263,6 @@ RED.workspaces = (function() { window.location.hash = ''; } event.workspace = activeWorkspace; - if (wasUnhidden) { - RED.events.emit("workspace:show",event); - } RED.events.emit("workspace:change",event); RED.sidebar.config.refresh(); RED.view.focus(); @@ -322,6 +322,12 @@ RED.workspaces = (function() { $(".red-ui-sidebar-shade").show(); } }, + onhide: function(tab) { + RED.events.emit("workspace:hide",{workspace: tab.id}) + }, + onshow: function(tab) { + RED.events.emit("workspace:show",{workspace: tab.id}) + }, minimumActiveTabWidth: 150, scrollable: true, addButton: "core:add-flow", @@ -527,9 +533,7 @@ RED.workspaces = (function() { id = activeWorkspace; } if (workspace_tabs.contains(id)) { - if (workspace_tabs.hideTab(id)) { - RED.events.emit("workspace:hide",{workspace: id}) - } + workspace_tabs.hideTab(id); } }, show: function(id,skipStack,unhideOnly) { @@ -546,9 +550,7 @@ RED.workspaces = (function() { } } if (unhideOnly) { - if (workspace_tabs.showTab(id)) { - RED.events.emit("workspace:show",{workspace: id}) - } + workspace_tabs.showTab(id); } else { if (!skipStack && activeWorkspace !== id) { addToViewStack(activeWorkspace)