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

thomascube

2012-02-29 7a32e9c7e82a884d58ec2774d0148e5075a4791c

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

 skins/larry/styles.css

@@ -66,10 +66,6 @@
    color: #aaa;
}

select.selector {
    padding: 2px 4px;
}

.bold {
    font-weight: bold;
}
@@ -1446,6 +1442,24 @@
    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 ***/


 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 -->

 skins/larry/ui.js

@@ -173,7 +173,29 @@
    // turn a group of fieldsets into tabs
    $('.tabbed').each(function(idx, elem){ init_tabs(elem); })

    $(document.body).bind('mouseup', body_mouseup)
    // 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) {