Tab-buttons: add some user-feedback (#20632).

* Hover color
* Enable/disable buttons (visually at least) when no more change is possible
* Width calculation with jQuery only, no longer hard-coded
* Remove ugly outline in Chrome (at least on Mac)

Patch by Daniel Ritz.

git-svn-id: http://svn.redmine.org/redmine/trunk@15249 e93f8b46-1217-0410-a6f0-8f06a7374b81
This commit is contained in:
Jean-Philippe Lang
2016-03-15 22:07:58 +00:00
parent 36908166cf
commit d2001dc949
2 changed files with 32 additions and 6 deletions

View File

@@ -331,16 +331,22 @@ function showTab(name, url) {
function moveTabRight(el) {
var lis = $(el).parents('div.tabs').first().find('ul').children();
var bw = $(el).parents('div.tabs-buttons').outerWidth(true);
var tabsWidth = 0;
var i = 0;
lis.each(function() {
if ($(this).is(':visible')) {
tabsWidth += $(this).width() + 6;
tabsWidth += $(this).outerWidth(true);
}
});
if (tabsWidth < $(el).parents('div.tabs').first().width() - 60) { return; }
if (tabsWidth < $(el).parents('div.tabs').first().width() - bw) { return; }
$(el).siblings('.tab-left').removeClass('disabled');
while (i<lis.length && !lis.eq(i).is(':visible')) { i++; }
var w = lis.eq(i).width();
lis.eq(i).hide();
if (tabsWidth - w < $(el).parents('div.tabs').first().width() - bw) {
$(el).addClass('disabled');
}
}
function moveTabLeft(el) {
@@ -349,6 +355,10 @@ function moveTabLeft(el) {
while (i < lis.length && !lis.eq(i).is(':visible')) { i++; }
if (i > 0) {
lis.eq(i-1).show();
$(el).siblings('.tab-right').removeClass('disabled');
}
if (i <= 1) {
$(el).addClass('disabled');
}
}
@@ -356,19 +366,24 @@ function displayTabsButtons() {
var lis;
var tabsWidth;
var el;
var numHidden;
$('div.tabs').each(function() {
el = $(this);
lis = el.find('ul').children();
tabsWidth = 0;
numHidden = 0;
lis.each(function(){
if ($(this).is(':visible')) {
tabsWidth += $(this).width() + 6;
tabsWidth += $(this).outerWidth(true);
} else {
numHidden++;
}
});
if ((tabsWidth < el.width() - 60) && (lis.first().is(':visible'))) {
var bw = $(el).parents('div.tabs-buttons').outerWidth(true);
if ((tabsWidth < el.width() - bw) && (lis.first().is(':visible'))) {
el.find('div.tabs-buttons').hide();
} else {
el.find('div.tabs-buttons').show();
el.find('div.tabs-buttons').show().children('button.tab-left').toggleClass('disabled', numHidden == 0);
}
});
}