diff options
Diffstat (limited to 'skins/larry')
| -rw-r--r-- | skins/larry/settings.css | 13 | ||||
| -rw-r--r-- | skins/larry/styles.css | 1 | ||||
| -rw-r--r-- | skins/larry/templates/folders.html | 14 | ||||
| -rw-r--r-- | skins/larry/ui.js | 32 |
4 files changed, 59 insertions, 1 deletions
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) { |