Changeset 3d122f0 in github

Timestamp:

Jun 29, 2012 5:44:47 AM (11 months ago)

Author:

Aleksander Machniak <alec@…>

Children:

8ba01c0

Parents:

e154154

Message:

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

Location:

skins/larry

Files:

• mail.css (modified) (5 diffs)
• styles.css (modified) (8 diffs)
• ui.js (modified) (3 diffs)

skins/larry/mail.css

@@ -68 +68 @@
 #messagelistcontainer {
         top: 0;
-        bottom: 32px;
+        bottom: 28px;
         overflow: auto;
 }
@@ -77 +77 @@
         left: 0;
         right: 0;
-        height: 26px;
-        padding: 2px;
+        height: 22px;
+        padding: 2px 4px;
 }
 
@@ -93 +93 @@
         display: inline-block;
         margin-right: 2em;
+        vertical-align: middle;
 }
 
@@ -303 +304 @@
 #searchfilter {
         width: 16em;
+    top: 8px;
+        position: absolute;
+}
+
+#searchfilter select {
+        height: 24px;
 }
 
@@ -332 +339 @@
         position: absolute;
         top: 4px;
-        right: 2px;
+        right: 0;
         width: 20px;
         height: 18px;

skins/larry/styles.css

@@ -42 +42 @@
 textarea {
         margin: 0; /* Safari by default adds a margin */
-        padding: 4px;
+        padding: 3px;
         border: 1px solid #b2b2b2;
         border-radius: 4px;
@@ -267 +267 @@
         height: 16px;
         vertical-align: middle;
+        margin-bottom: 1px;
 }
 
@@ -323 +324 @@
 .pagenavbuttons {
         position: relative;
-        top: -2px;
 }
 
@@ -1282 +1282 @@
         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;
 }
@@ -1457 +1459 @@
         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;
@@ -1476 +1480 @@
         background: linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
         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;
 }
 
@@ -1506 +1495 @@
 html.opera select.decorated {
         opacity: 1;
-        height: auto;
 }
 
@@ -1516 +1504 @@
         border-bottom: 1px solid #333;
         text-shadow: 0px 1px 1px #333;
-        padding: 6px 10px;
+        padding: 4px 6px;
         outline: none;
 }

skins/larry/ui.js

@@ -109 +109 @@
 
         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();
@@ -171 +171 @@
       }
 
-      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 new_select = $('<a class="menuselector"><span class="handle">' + title + '</span></a>')
+        .css('position', 'absolute')
+        .offset(select.position())
+        .insertAfter(select);
+
+      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);
-        });
-
-      $('<a class="menuselector dropdownselector"><span class="handle">' + title + '</span></a>')
-        .css('position', 'absolute')
-        .offset(select.position())
-        .insertAfter(select)
-        .children().width(select.outerWidth() - 10);
-
-      select.parent().css('position', 'relative');
+        })
+        .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());
     });
 
@@ -335 +342 @@
   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');
   }