summaryrefslogtreecommitdiff
path: root/skins/larry
diff options
context:
space:
mode:
authorthomascube <thomas@roundcube.net>2012-02-29 08:44:16 +0000
committerthomascube <thomas@roundcube.net>2012-02-29 08:44:16 +0000
commit7a32e9c7e82a884d58ec2774d0148e5075a4791c (patch)
treed66d9f2d804b7b3ac04c4a58da6d4a0a911b40d3 /skins/larry
parent2fdc7cdd053e3f02fa438b3cde045b34b23eabb2 (diff)
Decorate search filter drop-down with a more Larry like style
Diffstat (limited to 'skins/larry')
-rw-r--r--skins/larry/styles.css22
-rw-r--r--skins/larry/templates/mail.html2
-rw-r--r--skins/larry/ui.js38
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