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

Better fade effect when hiding tabs

Browse Source
This commit is contained in:
Nick O'Leary 2021-09-24 22:10:53 +01:00
parent 6ab74951f4
commit 901a5ce9d2
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,9 +100,17 @@ 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) {
var menuButtonLink = menuButton.find('a')
var menuOpen = false;
menuButtonLink.on("click", function(evt) {
evt.stopPropagation();
evt.preventDefault();
if (menuOpen) {
menu.remove();
menuOpen = false;
return;
}
menuOpen = true;
var menuOptions = [];
if (typeof options.searchButton === 'function') {
menuOptions = options.menu()
@ -122,6 +130,7 @@ RED.tabs = (function() {
$(".red-ui-menu.red-ui-menu-dropdown").hide();
$(document).on("click.red-ui-tabmenu", function(evt) {
$(document).off("click.red-ui-tabmenu");
menuOpen = false;
menu.remove();
});
menu.show();
@ -373,8 +382,8 @@ RED.tabs = (function() {
if (link.length === 0) {
return;
}
if (link.parent().hasClass("hide")) {
link.parent().removeClass("hide");
if (link.parent().hasClass("hide-tab")) {
link.parent().removeClass("hide-tab").removeClass("hide");
if (options.onshow) {
options.onshow(tabs[link.attr('href').slice(1)])
}
@ -421,9 +430,8 @@ RED.tabs = (function() {
return;
}
var allTabs = ul.find("li.red-ui-tab");
var tabs = allTabs.filter(":not(.hide)");
var hiddenTabs = allTabs.filter(".hide");
var tabs = allTabs.filter(":not(.hide-tab)");
var hiddenTabs = allTabs.filter(".hide-tab");
var width = wrapper.width();
var tabCount = tabs.length;
var tabWidth;
@ -544,19 +552,24 @@ RED.tabs = (function() {
}
}
}
li.remove();
if (tabs[id].pinned) {
pinnedTabsCount--;
}
if (options.onremove) {
options.onremove(tabs[id]);
}
delete tabs[id];
updateTabWidths();
if (collapsibleMenu) {
collapsibleMenu.remove();
collapsibleMenu = null;
}
li.one("transitionend", function(evt) {
li.remove();
if (tabs[id].pinned) {
pinnedTabsCount--;
}
if (options.onremove) {
options.onremove(tabs[id]);
}
delete tabs[id];
updateTabWidths();
if (collapsibleMenu) {
collapsibleMenu.remove();
collapsibleMenu = null;
}
})
li.addClass("hide-tab");
li.width(0);
}
function findPreviousVisibleTab(li) {
@ -564,7 +577,7 @@ RED.tabs = (function() {
li = ul.find("li.active").parent();
}
var previous = li.prev();
while(previous.length > 0 && previous.hasClass("hide")) {
while(previous.length > 0 && previous.hasClass("hide-tab")) {
previous = previous.prev();
}
return previous;
@ -574,7 +587,7 @@ RED.tabs = (function() {
li = ul.find("li.active").parent();
}
var next = ul.find("li.active").next();
while(next.length > 0 && next.hasClass("hide")) {
while(next.length > 0 && next.hasClass("hide-tab")) {
next = next.next();
}
return next;
@ -582,9 +595,9 @@ RED.tabs = (function() {
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) {
if (li.hasClass("hide-tab")) {
li.removeClass("hide-tab").removeClass("hide");
if (ul.find("li.red-ui-tab:not(.hide-tab)").length === 1) {
activateTab(li.find("a"))
}
updateTabWidths();
@ -597,7 +610,7 @@ RED.tabs = (function() {
function hideTab(id) {
if (tabs[id]) {
var li = ul.find("a[href='#"+id+"']").parent();
if (!li.hasClass("hide")) {
if (!li.hasClass("hide-tab")) {
if (li.hasClass("active")) {
var tab = findPreviousVisibleTab(li);
if (tab.length === 0) {
@ -612,11 +625,15 @@ RED.tabs = (function() {
}
}
li.removeClass("active");
li.addClass("hide");
updateTabWidths();
if (options.onhide) {
options.onhide(tabs[id])
}
li.one("transitionend", function(evt) {
li.addClass("hide");
updateTabWidths();
if (options.onhide) {
options.onhide(tabs[id])
}
})
li.addClass("hide-tab");
li.css({width:0})
}
}
}
@ -777,7 +794,6 @@ RED.tabs = (function() {
link.on("click", function(evt) { evt.preventDefault(); })
link.on("dblclick", function(evt) { evt.stopPropagation(); evt.preventDefault(); })
$('<span class="red-ui-tabs-fade"></span>').appendTo(li);
if (tab.closeable) {
@ -805,11 +821,11 @@ RED.tabs = (function() {
$('<i class="red-ui-tabs-badge-selected fa fa-check-circle"></i>').appendTo(badges);
}
link.attr("title",tab.label);
if (options.onadd) {
options.onadd(tab);
}
link.attr("title",tab.label);
if (ul.find("li.red-ui-tab").length == 1) {
activateTab(link);
}

3
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -21,6 +21,9 @@
height: 35px;
box-sizing: border-box;
.hide-tab {
transition: width 0.1s ease-in;
}
.red-ui-tabs-scroll-container {
height: 60px;
overflow-x: scroll;