mirror of https://github.com/node-red/node-red.git
Better fade effect when hiding tabs
This commit is contained in:
Nick O'Leary
parent
6ab74951f4
commit
901a5ce9d2
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue