From 479579f971503aa68f06463850752195c397bc0e Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Fri, 29 Jun 2012 11:44:47 +0200 Subject: 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 | 15 +++++++++++---- skins/larry/styles.css | 40 ++++++++++++++-------------------------- skins/larry/ui.js | 39 ++++++++++++++++++++++++++------------- 3 files changed, 51 insertions(+), 43 deletions(-) diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 0e1083ba4..f9d361911 100644 --- a/skins/larry/mail.css +++ b/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 @@ a.iconbutton.threadmode.selected { #searchfilter { width: 16em; + top: 8px; + position: absolute; +} + +#searchfilter select { + height: 24px; } #mailview-left select.mailboxlist { @@ -331,7 +338,7 @@ a.iconbutton.threadmode.selected { display: block; position: absolute; top: 4px; - right: 2px; + right: 0; width: 20px; height: 18px; background: url(images/buttons.png) -3px -458px no-repeat; diff --git a/skins/larry/styles.css b/skins/larry/styles.css index 49e39e361..0c713fda5 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -41,7 +41,7 @@ input[type="text"], 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 @@ input.button:active { padding: 1px 3px; height: 16px; vertical-align: middle; + margin-bottom: 1px; } .pagenav a.button span.inner { @@ -322,7 +323,6 @@ input.button:active { .pagenavbuttons { position: relative; - top: -2px; } a.iconbutton { @@ -1281,22 +1281,24 @@ ul.proplist li { #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 @@ a.menuselector { 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 @@ a.menuselector:active { 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 @@ select.decorated { html.opera select.decorated { opacity: 1; - height: auto; } select.decorated option { @@ -1515,7 +1503,7 @@ select.decorated option { border-top: 1px solid #5a5a5a; border-bottom: 1px solid #333; text-shadow: 0px 1px 1px #333; - padding: 6px 10px; + padding: 4px 6px; outline: none; } diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 32cf467d2..bf4580eb1 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -110,7 +110,7 @@ function rcube_mail_ui() $('#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(); @@ -172,23 +172,30 @@ function rcube_mail_ui() 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); - }); - - $('' + title + '') + var new_select = $('' + title + '') .css('position', 'absolute') .offset(select.position()) - .insertAfter(select) - .children().width(select.outerWidth() - 10); + .insertAfter(select); + + new_select.children().width(width).height(height).css('line-height', (height - 1) + 'px'); - select.parent().css('position', 'relative'); + 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) @@ -336,7 +343,13 @@ function rcube_mail_ui() 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'); } -- cgit v1.2.3