Decorate search filter drop-down with a more Larry like style

3 files changed, 49 insertions, 13 deletions

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 494a992af..ab704539c 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -66,10 +66,6 @@ textarea.placeholder {
 	color: #aaa;
 }
 
-select.selector {
-	padding: 2px 4px;
-}
-
 .bold {
 	font-weight: bold;
 }
@@ -1446,6 +1442,24 @@ a.menuselector:active {
 	text-decoration: none;
 }
 
+a.dropdownselector {
+	position: absolute;
+	z-index: 1;
+}
+
+select.decorated {
+	position: relative;
+	z-index: 10;
+	opacity: 0;
+	-khtml-appearance: none;
+	padding: 2px 4px;
+	cursor: pointer;
+}
+
+html.opera select.decorated {
+	opacity: 1;
+}
+
 
 /*** popup menus ***/
 
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index cb1e165d8..ca4ea4b73 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -45,7 +45,7 @@
 
 <!-- search filter -->
 <div id="searchfilter">
-	<roundcube:object name="searchfilter" class="searchfilter selector" />
+	<roundcube:object name="searchfilter" class="searchfilter decorated" />
 </div>
 
 <!-- toolbar -->
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index aed41bb21..5e1218639 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -173,15 +173,37 @@ function rcube_mail_ui()
     // turn a group of fieldsets into tabs
     $('.tabbed').each(function(idx, elem){ init_tabs(elem); })
 
-    $(document.body).bind('mouseup', body_mouseup)
-    .bind('keyup', function(e){
-      if (e.keyCode == 27) {
-        for (var id in popups) {
-          if (popups[id].is(':visible'))
-            show_popup(id, false);
+    // decorate select elements
+    if (!bw.opera) {
+      $('select.decorated').each(function(){
+        var 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>')
+          .offset(select.position())
+          .insertAfter(select)
+          .children().width(select.width() - 5);
+
+        select.parent().css('position', 'relative');
+      });
+    }
+
+    $(document.body)
+      .bind('mouseup', body_mouseup)
+      .bind('keyup', function(e){
+        if (e.keyCode == 27) {
+          for (var id in popups) {
+            if (popups[id].is(':visible'))
+              show_popup(id, false);
+          }
         }
-      }
-    });
+      });
 
     $('iframe').load(function(e){
       // this = iframe