summaryrefslogtreecommitdiff
path: root/skins
diff options
context:
space:
mode:
Diffstat (limited to 'skins')
-rw-r--r--skins/classic/common.css19
-rw-r--r--skins/classic/functions.js35
-rw-r--r--skins/classic/settings.css10
-rw-r--r--skins/classic/templates/folders.html12
-rw-r--r--skins/larry/settings.css13
-rw-r--r--skins/larry/styles.css1
-rw-r--r--skins/larry/templates/folders.html14
-rw-r--r--skins/larry/ui.js32
8 files changed, 134 insertions, 2 deletions
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 74de5e407..1edc1fa16 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -1010,6 +1010,25 @@ div.searchbox > input
width: 97%;
}
+.listsearchbox
+{
+ border-bottom: solid 1px #ddd;
+ padding: 2px 4px 1px;
+ display: none;
+ background-color: #f2f2f2;
+}
+
+.listsearchbox a.iconbutton.reset
+{
+ background: url(images/icons/reset.gif) no-repeat 0 0;
+ width: 13px;
+ height: 13px;
+ text-indent: 50000px;
+ position: absolute;
+ top: 3px;
+ left: 165px;
+ overflow: hidden;
+}
/***** roundcube webmail pre-defined classes *****/
diff --git a/skins/classic/functions.js b/skins/classic/functions.js
index b521be3bb..f17f393c2 100644
--- a/skins/classic/functions.js
+++ b/skins/classic/functions.js
@@ -636,6 +636,36 @@ enable_command: function(p)
var label = rcmail.gettext(p.status ? 'replylist' : 'replyall');
$('a.button.replyAll').attr('title', label);
}
+},
+
+folder_search_init: function(container)
+{
+ // animation to unfold list search box
+ $('.boxtitle a.search', container).click(function(e) {
+ var title = $('.boxtitle', container),
+ box = $('.listsearchbox', container),
+ dir = box.is(':visible') ? -1 : 1;
+
+ box.slideToggle({
+ duration: 160,
+ progress: function(animation, progress) {
+ if (dir < 0) progress = 1 - progress;
+ $('.boxlistcontent', container).css('top', (title.outerHeight() + 24 * progress) + 'px');
+ },
+ complete: function() {
+ box.toggleClass('expanded');
+ if (box.is(':visible')) {
+ box.find('input[type=text]').focus();
+ }
+ else {
+ $('a.reset', box).click();
+ }
+ // TODO: save state in cookie
+ }
+ });
+
+ return false;
+ });
}
};
@@ -1012,5 +1042,10 @@ function rcube_init_mail_ui()
rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); })
.gui_object('dragmenu', 'dragmenu');
}
+ else if (rcmail.env.task == 'settings') {
+ if (rcmail.env.action == 'folders') {
+ rcmail_ui.folder_search_init($('#folder-manager'));
+ }
+ }
});
}
diff --git a/skins/classic/settings.css b/skins/classic/settings.css
index fb4303f2b..cd250d57e 100644
--- a/skins/classic/settings.css
+++ b/skins/classic/settings.css
@@ -11,6 +11,16 @@
background-color: #FFFFA6;
}
+#folderlist-title a.iconbutton.search {
+ background: url(images/icons/glass.png) no-repeat 0 0;
+ cursor: pointer;
+ position: absolute;
+ right: 4px;
+ top: 2px;
+ width: 16px;
+ text-indent: 50000px;
+}
+
#identities-table,
#sections-table
{
diff --git a/skins/classic/templates/folders.html b/skins/classic/templates/folders.html
index 7ca4ac49f..8ed0b5fdc 100644
--- a/skins/classic/templates/folders.html
+++ b/skins/classic/templates/folders.html
@@ -19,7 +19,17 @@
<div id="mainscreen">
<div id="folder-manager">
-<div id="folderlist-title" class="boxtitle"><span class="rightalign"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></div>
+<div id="folderlist-title" class="boxtitle">
+ <roundcube:label name="folders" />
+ <a href="#folders" class="iconbutton search" title="<roundcube:label name='findfolders' />" tabindex="0"><roundcube:label name='findfolders' /></a>
+</div>
+<div class="listsearchbox">
+ <div class="searchbox" role="search">
+ <input type="text" name="q" id="foldersearch" placeholder="<roundcube:label name='findfolders' />" />
+ <a class="iconbutton searchicon"></a>
+ <roundcube:button command="reset-foldersearch" id="folderlistsearch-reset" class="iconbutton reset" title="resetsearch" width="13" height="13" />
+ </div>
+</div>
<div id="folderlist-content" class="boxlistcontent">
<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table"
summary="Folder subscription table" class="treelist folderlist" />
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index b5b05c235..cda47b631 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -211,6 +211,19 @@
background-position: 4px -550px;
}
+#folderslist .boxtitle a.iconbutton.search {
+ background-position: -2px -317px;
+ cursor: pointer;
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ width: 16px;
+}
+
+#folderslist .listsearchbox + .scroller {
+ top: 34px;
+}
+
#folderslist,
#identitieslist {
position: absolute;
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 529eb199d..456ce4924 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -1959,6 +1959,7 @@ ul.proplist li {
position: relative;
padding: 4px;
background: #c7e3ef;
+ display: none;
}
.listsearchbox input {
diff --git a/skins/larry/templates/folders.html b/skins/larry/templates/folders.html
index f48169cd4..3d016cad1 100644
--- a/skins/larry/templates/folders.html
+++ b/skins/larry/templates/folders.html
@@ -17,7 +17,19 @@
<div id="settings-right" role="main">
<div id="folderslist" class="uibox listbox">
-<h2 id="folderslist-header" class="boxtitle"><span style="float:right"><roundcube:label name="subscribed" /></span><roundcube:label name="folders" /></h2>
+<h2 id="folderslist-header" class="boxtitle">
+ <roundcube:label name="folders" />
+ <a href="#folders" class="iconbutton search" title="<roundcube:label name='findfolders' />" tabindex="0"><roundcube:label name='findfolders' /></a>
+</h2>
+<div class="listsearchbox">
+ <div class="searchbox" role="search" aria-labelledby="aria-label-foldersearchform">
+ <h3 id="aria-label-foldersearchform" class="voice"><roundcube:label name="arialabelfoldersearchform" /></h3>
+ <label for="foldersearch" class="voice"><roundcube:label name="arialabelsearchterms" /></label>
+ <input type="text" name="q" id="foldersearch" placeholder="<roundcube:label name='findfolders' />" />
+ <a class="iconbutton searchicon"></a>
+ <roundcube:button command="reset-foldersearch" id="folderlistsearch-reset" class="iconbutton reset" title="resetsearch" label="resetsearch" />
+ </div>
+</div>
<div id="folderslist-content" class="scroller withfooter">
<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="treelist listing folderlist" />
</div>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index f6c390929..1eb8e899a 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -47,6 +47,7 @@ function rcube_mail_ui()
this.update_quota = update_quota;
this.get_pref = get_pref;
this.save_pref = save_pref;
+ this.folder_search_init = folder_search_init;
// set minimal mode on small screens (don't wait for document.ready)
@@ -255,6 +256,8 @@ function rcube_mail_ui()
orientation:'v', relative:true, start:266, min:180, size:12 }).init();
rcmail.addEventListener('setquota', update_quota);
+
+ folder_search_init($('#folderslist'));
}
else if (rcmail.env.action == 'identities') {
new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details',
@@ -531,6 +534,35 @@ function rcube_mail_ui()
}
}
+ function folder_search_init(container)
+ {
+ // animation to unfold list search box
+ $('.boxtitle a.search', container).click(function(e) {
+ var title = $('.boxtitle', container),
+ box = $('.listsearchbox', container),
+ dir = box.is(':visible') ? -1 : 1;
+
+ box.slideToggle({
+ duration: 160,
+ progress: function(animation, progress) {
+ if (dir < 0) progress = 1 - progress;
+ $('.scroller', container).css('top', (title.outerHeight() + 34 * progress) + 'px');
+ },
+ complete: function() {
+ box.toggleClass('expanded');
+ if (box.is(':visible')) {
+ box.find('input[type=text]').focus();
+ }
+ else {
+ $('a.reset', box).click();
+ }
+ // TODO: save state in localStorage
+ }
+ });
+
+ return false;
+ });
+ }
function enable_command(p)
{