Added folder searching in Folder Manager

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