Patch #20632 » 0002-Tab-buttons-add-some-user-feedback.patch
| public/javascripts/application.js | ||
|---|---|---|
| 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 | 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 | 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 |
} |
| public/stylesheets/application.css | ||
|---|---|---|
| 932 | 932 | |
| 933 | 933 |
#content .tabs ul li a.selected:hover {background-color: #fff;}
|
| 934 | 934 | |
| 935 |
div.tabs-buttons { position:absolute; right: 0; width: 48px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
|
|
| 935 |
div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
|
|
| 936 | 936 | |
| 937 | 937 |
button.tab-left, button.tab-right {
|
| 938 | 938 |
font-size: 0.9em; |
| ... | ... | |
| 945 | 945 |
width: 20px; |
| 946 | 946 |
bottom: -1px; |
| 947 | 947 |
} |
| 948 |
button.tab-left:hover, button.tab-right:hover {
|
|
| 949 |
background-color: #f5f5f5; |
|
| 950 |
} |
|
| 951 |
button.tab-left:focus, button.tab-right:focus {
|
|
| 952 |
outline: 0; |
|
| 953 |
} |
|
| 948 | 954 | |
| 949 | 955 |
button.tab-left {
|
| 950 | 956 |
right: 20px; |
| ... | ... | |
| 957 | 963 |
background: #eeeeee url(../images/bullet_arrow_right.png) no-repeat 50% 50%; |
| 958 | 964 |
border-top-right-radius:3px; |
| 959 | 965 |
} |
| 966 |
button.tab-left.disabled, button.tab-right.disabled {
|
|
| 967 |
background-color: #ccc; |
|
| 968 |
cursor: unset; |
|
| 969 |
} |
|
| 960 | 970 | |
| 961 | 971 |
/***** Diff *****/ |
| 962 | 972 |
.diff_out { background: #fcc; }
|
