Nemcio/Redmine
1
0
Fork 0
mirror of https://github.com/redmine/redmine.git synced 2025-11-08 22:36:02 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

25
public/javascripts/application.js
View File

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

13
public/stylesheets/application.css
View File

@@ -901,7 +901,7 @@ p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
#content .tabs ul li a.selected:hover {background-color: #fff;} #content .tabs ul li a.selected:hover {background-color: #fff;}
div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; } div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
button.tab-left, button.tab-right { button.tab-left, button.tab-right {
font-size: 0.9em; font-size: 0.9em;
@@ -914,6 +914,12 @@ button.tab-left, button.tab-right {
width: 20px; width: 20px;
bottom: -1px; bottom: -1px;
} }
button.tab-left:hover, button.tab-right:hover {
background-color: #f5f5f5;
}
button.tab-left:focus, button.tab-right:focus {
outline: 0;
}
button.tab-left { button.tab-left {
right: 20px; right: 20px;
@@ -927,6 +933,11 @@ button.tab-right {
border-top-right-radius:3px; border-top-right-radius:3px;
} }
button.tab-left.disabled, button.tab-right.disabled {
background-color: #ccc;
cursor: unset;
}
/***** Diff *****/ /***** Diff *****/
.diff_out { background: #fcc; } .diff_out { background: #fcc; }
.diff_out span { background: #faa; } .diff_out span { background: #faa; }