0002-Tab-buttons-add-some-user-feedback.patch

Daniel Ritz, 2016-01-25 22:39

Download (4.04 KB)

View differences:

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