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

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

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