jro_apps/redmine Commit - r14867:d2001dc949cd

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

Jean-Philippe Lang -

r14867:d2001dc949cd

parent child

Context file:

r14867:d2001dc949cd

Collapse all files

public/javascripts/application.js +20 -5

             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) {
               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');
               }
             }
               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);
                 }
               });
             }

public/stylesheets/application.css +12 -1

             #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;
               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;
               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; }

General Comments 0

Write
Preview

You need to be logged in to leave comments. Login now

No TODOs yet

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages