##// END OF EJS Templates
Tab-buttons: add some user-feedback (#20632)....
Jean-Philippe Lang -
r14867:d2001dc949cd
parent child
Show More
@@ -331,16 +331,22 function showTab(name, url) {
331 331
332 332 function moveTabRight(el) {
333 333 var lis = $(el).parents('div.tabs').first().find('ul').children();
334 var bw = $(el).parents('div.tabs-buttons').outerWidth(true);
334 335 var tabsWidth = 0;
335 336 var i = 0;
336 337 lis.each(function() {
337 338 if ($(this).is(':visible')) {
338 tabsWidth += $(this).width() + 6;
339 tabsWidth += $(this).outerWidth(true);
339 340 }
340 341 });
341 if (tabsWidth < $(el).parents('div.tabs').first().width() - 60) { return; }
342 if (tabsWidth < $(el).parents('div.tabs').first().width() - bw) { return; }
343 $(el).siblings('.tab-left').removeClass('disabled');
342 344 while (i<lis.length && !lis.eq(i).is(':visible')) { i++; }
345 var w = lis.eq(i).width();
343 346 lis.eq(i).hide();
347 if (tabsWidth - w < $(el).parents('div.tabs').first().width() - bw) {
348 $(el).addClass('disabled');
349 }
344 350 }
345 351
346 352 function moveTabLeft(el) {
@@ -349,6 +355,10 function moveTabLeft(el) {
349 355 while (i < lis.length && !lis.eq(i).is(':visible')) { i++; }
350 356 if (i > 0) {
351 357 lis.eq(i-1).show();
358 $(el).siblings('.tab-right').removeClass('disabled');
359 }
360 if (i <= 1) {
361 $(el).addClass('disabled');
352 362 }
353 363 }
354 364
@@ -356,19 +366,24 function displayTabsButtons() {
356 366 var lis;
357 367 var tabsWidth;
358 368 var el;
369 var numHidden;
359 370 $('div.tabs').each(function() {
360 371 el = $(this);
361 372 lis = el.find('ul').children();
362 373 tabsWidth = 0;
374 numHidden = 0;
363 375 lis.each(function(){
364 376 if ($(this).is(':visible')) {
365 tabsWidth += $(this).width() + 6;
377 tabsWidth += $(this).outerWidth(true);
378 } else {
379 numHidden++;
366 380 }
367 381 });
368 if ((tabsWidth < el.width() - 60) && (lis.first().is(':visible'))) {
382 var bw = $(el).parents('div.tabs-buttons').outerWidth(true);
383 if ((tabsWidth < el.width() - bw) && (lis.first().is(':visible'))) {
369 384 el.find('div.tabs-buttons').hide();
370 385 } else {
371 el.find('div.tabs-buttons').show();
386 el.find('div.tabs-buttons').show().children('button.tab-left').toggleClass('disabled', numHidden == 0);
372 387 }
373 388 });
374 389 }
@@ -901,7 +901,7 p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
901 901
902 902 #content .tabs ul li a.selected:hover {background-color: #fff;}
903 903
904 div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
904 div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
905 905
906 906 button.tab-left, button.tab-right {
907 907 font-size: 0.9em;
@@ -914,6 +914,12 button.tab-left, button.tab-right {
914 914 width: 20px;
915 915 bottom: -1px;
916 916 }
917 button.tab-left:hover, button.tab-right:hover {
918 background-color: #f5f5f5;
919 }
920 button.tab-left:focus, button.tab-right:focus {
921 outline: 0;
922 }
917 923
918 924 button.tab-left {
919 925 right: 20px;
@@ -927,6 +933,11 button.tab-right {
927 933 border-top-right-radius:3px;
928 934 }
929 935
936 button.tab-left.disabled, button.tab-right.disabled {
937 background-color: #ccc;
938 cursor: unset;
939 }
940
930 941 /***** Diff *****/
931 942 .diff_out { background: #fcc; }
932 943 .diff_out span { background: #faa; }
General Comments 0
You need to be logged in to leave comments. Login now