From 8a5f756bd25ab64403d3a5490f236770b1c5846a Mon Sep 17 00:00:00 2001
From: Daniel Ritz <daniel.ritz@gmx.ch>
Date: Mon, 25 Jan 2016 22:36:18 +0100
Subject: [PATCH] Tab-buttons: add some user-feedback

* 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)
---
 public/javascripts/application.js  | 25 ++++++++++++++++++++-----
 public/stylesheets/application.css | 12 +++++++++++-
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index c817c2d..b31ba46 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 539b65f..6fc3283 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -932,7 +932,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;
@@ -945,6 +945,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;
@@ -957,6 +963,10 @@ button.tab-right {
   background: #eeeeee url(../images/bullet_arrow_right.png) no-repeat 50% 50%;
   border-top-right-radius:3px;
 }
+button.tab-left.disabled, button.tab-right.disabled {
+  background-color: #ccc;
+  cursor: unset;
+}
 
 /***** Diff *****/
 .diff_out { background: #fcc; }
-- 
2.6.3