CSS improvements in mail screen: - don't display full-circle image for quot...

Aleksander Machniak

2012-06-29 3d122f054cfb12752df43bb95af48d8405b9f370

CSS improvements in mail screen:
- don't display full-circle image for quota below 100% (but close to, e.g.97%)
- unified selects style/height,
- improvements in search box and messagelist footer

 skins/larry/mail.css

@@ -67,7 +67,7 @@

#messagelistcontainer {
    top: 0;
    bottom: 32px;
    bottom: 28px;
    overflow: auto;
}

@@ -76,8 +76,8 @@
    bottom: 0;
    left: 0;
    right: 0;
    height: 26px;
    padding: 2px;
    height: 22px;
    padding: 2px 4px;
}

#messagelistfooter.rightalign {
@@ -92,6 +92,7 @@
#messagelistfooter #listselectors {
    display: inline-block;
    margin-right: 2em;
    vertical-align: middle;
}

a.iconbutton.listmode {
@@ -302,6 +303,12 @@

#searchfilter {
    width: 16em;
    top: 8px;
    position: absolute;
}

#searchfilter select {
    height: 24px;
}

#mailview-left select.mailboxlist {
@@ -331,7 +338,7 @@
    display: block;
    position: absolute;
    top: 4px;
    right: 2px;
    right: 0;
    width: 20px;
    height: 18px;
    background: url(images/buttons.png) -3px -458px no-repeat;

 skins/larry/styles.css

@@ -41,7 +41,7 @@
input[type="password"],
textarea {
    margin: 0; /* Safari by default adds a margin */
    padding: 4px;
    padding: 3px;
    border: 1px solid #b2b2b2;
    border-radius: 4px;
    box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
@@ -266,6 +266,7 @@
    padding: 1px 3px;
    height: 16px;
    vertical-align: middle;
    margin-bottom: 1px;
}

.pagenav a.button span.inner {
@@ -322,7 +323,6 @@

.pagenavbuttons {
    position: relative;
    top: -2px;
}

a.iconbutton {
@@ -1281,22 +1281,24 @@
#quicksearchbar input {
    width: 176px;
    margin: 0;
    padding: 5px 26px 2px 38px;
    margin-top: 8px;
    padding: 2px 30px 2px 34px;
    height: 18px;
    background: #f1f1f1;
    border-color: #a3a3a3;
    border-color: #ababab;
    font-weight: bold;
    font-size: 11px;
}

#quicksearchbar #searchmenulink {
    position: absolute;
    top: 5px;
    left: 8px;
    top: 12px;
    left: 6px;
}

#quicksearchbar #searchreset {
    position: absolute;
    top: 4px;
    top: 11px;
    right: 1px;
}

@@ -1456,12 +1458,14 @@
    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

a.menuselector .handle {
    display: inline-block;
    padding: 3px 32px 0 8px;
    min-height: 18px;
    padding: 0 32px 0 6px;
    height: 20px;
    line-height: 19px;
    text-shadow: 0px 1px 1px #fff;
    background: url(images/selector.png) right center no-repeat;
    border-radius: 4px;
@@ -1477,21 +1481,6 @@
    text-decoration: none;
}

a.dropdownselector {
    position: absolute;
    padding: 1px 0;
    z-index: 1;
}

a.dropdownselector .handle {
    margin: -1px 0;
    padding-top: 5px;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

select.decorated {
    position: relative;
    z-index: 10;
@@ -1505,7 +1494,6 @@

html.opera select.decorated {
    opacity: 1;
    height: auto;
}

select.decorated option {
@@ -1515,7 +1503,7 @@
    border-top: 1px solid #5a5a5a;
    border-bottom: 1px solid #333;
    text-shadow: 0px 1px 1px #333;
    padding: 6px 10px;
    padding: 4px 6px;
    outline: none;
}


 skins/larry/ui.js

@@ -108,7 +108,7 @@
        $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });

        mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
          orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
          orientation:'h', relative:true, start:310, min:150, size:0, offset:-18 });
        if (previewframe)
          mailviewsplit.init();

@@ -170,23 +170,30 @@
        return;
      }

      var title = $('option', this).first().text();
      var select = $(this),
        height = Math.max(select.height(), 24) - 2,
        width = select.width() - 22,
        title = $('option', this).first().text();

      if ($('option:selected', this).val() != '')
        title = $('option:selected', this).text();

      var select = $(this)
        .change(function(){
          var val = $('option:selected', this).text();
          $(this).next().children().html(val);
        });

      $('<a class="menuselector dropdownselector"><span class="handle">' + title + '</span></a>')
      var new_select = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
        .css('position', 'absolute')
        .offset(select.position())
        .insertAfter(select)
        .children().width(select.outerWidth() - 10);
        .insertAfter(select);

      select.parent().css('position', 'relative');
      new_select.children().width(width).height(height).css('line-height', (height - 1) + 'px');

      select.change(function() {
          var val = $('option:selected', this).text();
          $(this).next().children().html(val);
        })
        .parent().css('position', 'relative');

      // re-set original select width to fix click action and options width in Chrome
      if (bw.chrome)
        select.width(new_select.width());
    });

    $(document.body)
@@ -334,7 +341,13 @@

  function update_quota(p)
  {
    var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0;
    var step = 24, step_count = 20,
      y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0;

    // never show full-circle if quota is close to 100% but below.
    if (p.total && y == step * step_count && p.percent < 100)
      y -= step;

    $('#quotadisplay').css('background-position', '0 -'+y+'px');
  }