frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Allow tabs to be hidden via x-button on tab

Browse Source
This commit is contained in:
Nick O'Leary 2021-08-25 11:34:41 +01:00
parent c8949f5eeb
commit 7962278475
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js vendored
View File

@ -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 = $("<a/>",{href:"#",class:"red-ui-tab-close"}).appendTo(li);
closeLink.append('<i class="fa fa-times" />');
closeLink.on("click",function(event) {
event.preventDefault();
hideTab(tab.id);
});
}
var badges = $('<span class="red-ui-tabs-badges"></span>').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+"']");

24
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@ -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)