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

2 files changed, 32 insertions, 6 deletions

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index c9ac34302..971741432 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -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);
     }
   });
 }
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index f7963dd33..9122f90c8 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -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;}
 
-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 {
   font-size: 0.9em;
@@ -914,6 +914,12 @@ button.tab-left, button.tab-right {
   width: 20px;
   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 {
   right: 20px;
@@ -927,6 +933,11 @@ button.tab-right {
   border-top-right-radius:3px;
 }
 
+button.tab-left.disabled, button.tab-right.disabled {
+  background-color: #ccc;
+  cursor: unset;
+}
+
 /***** Diff *****/
 .diff_out { background: #fcc; }
 .diff_out span { background: #faa; }