Search box for folders in kolab_files (T162)

plugins/kolab_files/kolab_files.js

@@ -173,7 +173,7 @@ function kolab_directory_selector_dialog(id)
     if (!filename) {
       attach = attach.clone();
       $('.attachment-size', attach).remove();
-      filename = attach.text();
+      filename = $.trim(attach.text());
     }
 
     form.show();
@@ -196,6 +196,9 @@ function kolab_directory_selector_dialog(id)
   $('#foldercreatelink').attr('tabindex', 0);
 
   buttons[rcmail.gettext('kolab_files.save')] = function () {
+    if (!file_api.env.folder)
+      return;
+
     var lock = rcmail.set_busy(true, 'saving'),
       request = {
         act: 'save-file',
@@ -231,7 +234,7 @@ function kolab_directory_selector_dialog(id)
     button_classes: ['mainaction'],
     minWidth: 250,
     minHeight: 300,
-    height: 350,
+    height: 400,
     width: 300
   }, fn);
 
@@ -1171,15 +1174,18 @@ function kolab_files_ui()
     if (!this.response(response))
       return;
 
-    var first, rows = [],
+    var first, body, rows = [],
       elem = $('#files-folder-list'),
+      searchbox = $('#foldersearch'),
       list = $('<ul class="treelist listing folderlist"></ul>'),
       collections = !rcmail.env.action.match(/^(preview|show)$/) ? ['audio', 'video', 'image', 'document'] : [];
 
     // try parent window if the list element does not exist
     // i.e. called from dialog in parent window
     if (!elem.length && window.parent && parent.rcmail) {
-      elem = $('#files-folder-list', window.parent.document.body);
+      body = window.parent.document.body;
+      elem = $('#files-folder-list', body);
+      searchbox = $('#foldersearch', body);
     }
 
     elem.html('').append(list);
@@ -1212,6 +1218,7 @@ function kolab_files_ui()
         selectable: true,
         id_prefix: 'rcmli',
         parent_focus: true,
+        searchbox: searchbox,
         id_encode: rcmail.html_identifier_encode,
         id_decode: rcmail.html_identifier_decode,
         check_droptarget: function(node) {
@@ -1248,20 +1255,22 @@ function kolab_files_ui()
     if (rcmail.busy)
       return;
 
-    var is_collection = folder.match(/^folder-collection-/);
+    var is_collection = folder.match(/^folder-collection-(.*)$/),
+      collection = RegExp.$1 || null;
+
+    if (is_collection)
+      folder = null;
+
+    // search-reset can re-select the same folder, skip
+    if (this.env.folder == folder && this.env.collection == collection)
+      return;
+
+    this.env.folder = folder;
+    this.env.collection = collection;
 
     rcmail.enable_command('files-list', true);
     rcmail.enable_command('files-folder-delete', 'folder-rename', 'files-upload', !is_collection);
-
+    rcmail.command('files-list', is_collection ? {collection: collection} : {folder: folder});
-    if (is_collection) {
-      this.env.folder = null;
-      rcmail.command('files-list', {collection: folder.replace(/^folder-collection-/, '')});
-    }
-    else {
-      this.env.folder = folder;
-      this.env.collection = null;
-      rcmail.command('files-list', {folder: folder});
-    }
 
     this.quota();
   };

plugins/kolab_files/localization/en_US.inc

@@ -91,6 +91,7 @@ $labels['arialabelquicksearchbox'] = 'Search input';
 $labels['arialabellistoptions'] = 'Files list options';
 $labels['arialabelfolderoptions'] = 'Folder actions';
 $labels['arialabelfileeditform'] = 'File editing form';
+$labels['arialabelfilelist'] = 'List of files';
 $labels['arialabelfoldercreateform'] = 'Folder creation form';
 $labels['arialabelfoldereditform'] = 'Folder editing form';
 $labels['arialabelfoldermountform'] = 'External storage form';

plugins/kolab_files/skins/larry/style.css

@@ -106,6 +106,19 @@
   border: 0;
 }
 
+#folderlistbox .scroller {
+  top: 34px;
+}
+
+#folderlistbox .boxtitle a.iconbutton.search {
+  background-position: -2px -317px;
+  cursor: pointer;
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  width: 16px;
+}
+
 #files-folder-list ul li span.name {
   background: url(../../../../skins/larry/images/listicons.png) 6px 3px no-repeat;
   padding: 6px 8px 6px 32px;
@@ -327,7 +340,7 @@
 }
 
 #files-dialog #folderlistbox {
-  top: 5px;
+  top: 35px;
   bottom: 5px;
   left: 0;
   right: 0;
@@ -335,8 +348,20 @@
   box-shadow: none;
 }
 
+#files-dialog #folderlistbox .scroller {
+  top: 0;
+}
+
+#files-dialog .listsearchbox {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
 #files-dialog.saveas #folderlistbox {
-  top: 50px;
+  bottom: 40px;
 }
 
 #files-compose-dialog #filelistcontainer {
@@ -374,6 +399,11 @@ a.filesaveall {
 #file-save-as {
   height: 25px;
   white-space: nowrap;
+  position: absolute;
+  bottom: 8px;
+  left: 5px;
+  right: 5px;
+  text-align: center;
 }
 
 #file-save-as input {

plugins/kolab_files/skins/larry/templates/compose_plugin.html

@@ -10,11 +10,24 @@
 
     <div id="folderlistbox" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
         <h3 id="aria-label-folderlist" class="voice"><roundcube:label name="kolab_files.arialabelfolderlist" /></h3>
+        <h3 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>
+        </h3>
+        <div class="listsearchbox">
+            <div class="searchbox" role="search" aria-labelledby="aria-label-foldersearchform">
+                <h4 id="aria-label-foldersearchform" class="voice"><roundcube:label name="arialabelfoldersearchform" /></h4>
+                <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="files-folder-list" class="scroller"></div>
     </div>
 
     <div id="filelistcontainer" class="boxlistcontent uibox">
-        <h3 id="aria-label-filelist" class="voice"><roundcube:label name="arialabelfilelist" /></h3>
+        <h3 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h3>
         <roundcube:object name="filelist" id="filelist" class="records-table filelist sortheader fixedheader" aria-labelledby="aria-label-filelist" />
     </div>
 </div>
@@ -30,3 +43,9 @@
     <h3 id="aria-label-folderauthform" class="voice"><roundcube:label name="kolab_files.arialabelfolderauthform" /></h3>
     <roundcube:object name="folder-auth-options">
 </div>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        UI.folder_search_init($('#folderlistbox'));
+    });
+</script>

plugins/kolab_files/skins/larry/templates/files.html

@@ -33,8 +33,20 @@
 
 <div id="folderlistbox" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
     <h2 id="aria-label-folderlist" class="voice"><roundcube:label name="kolab_files.arialabelfolderlist" /></h2>
-    <div id="files-folder-list" class="scroller withfooter">
+    <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="files-folder-list" class="scroller withfooter"></div>
     <div id="folderlist-footer" class="boxfooter">
         <roundcube:button command="folder-create" type="link" title="kolab_files.foldercreate" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="folderoptions" id="folderoptionslink" type="link" title="moreactions" class="listbutton groupactions" onclick="return UI.toggle_popup('folderoptions', event)" innerClass="inner" content="&#9881;" aria-haspopup="true" aria-expanded="false" aria-owns="folderoptionsmenu" />
         <roundcube:if condition="env:files_quota" />
@@ -45,7 +57,7 @@
 </div>
 
 <div id="filelistcontainer" class="uibox droptarget">
-    <h2 id="aria-label-filelist" class="voice"><roundcube:label name="arialabelfilelist" /></h2>
+    <h2 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h2>
     <div id="filelistbox" class="boxlistcontent">
         <roundcube:object name="filelist" id="filelist" class="records-table filelist sortheader fixedheader" optionsmenuIcon="true" aria-labelledby="aria-label-filelist" />
     </div>

plugins/kolab_files/skins/larry/templates/message_plugin.html

@@ -1,8 +1,13 @@
 <div id="files-dialog" class="uidialog" data-editable="true" role="dialog" aria-labelledby="aria-label-filesavedialog" aria-hidden="true">
     <h3 id="aria-label-filesavedialog" class="voice"><roundcube:label name="kolab_files.arialabelfilesavedialog" /></h3>
-    <div id="file-save-as">
+    <div class="listsearchbox">
-        <label for="file-save-as-input"><roundcube:label name="kolab_files.saveas" /></label>
+        <div class="searchbox" role="search" aria-labelledby="aria-label-foldersearchform">
-        <input id="file-save-as-input" type="text" value="">
+            <h4 id="aria-label-foldersearchform" class="voice"><roundcube:label name="arialabelfoldersearchform" /></h4>
+            <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="folderlistbox" class="uibox listbox" role="navigation" aria-labelledby="aria-label-folderlist">
         <h3 id="aria-label-folderlist" class="voice"><roundcube:label name="kolab_files.arialabelfolderlist" /></h3>
@@ -11,6 +16,10 @@
             <roundcube:button command="folder-create" name="foldercreatelink" id="foldercreatelink" type="link" title="createfolder" class="listbutton add" classAct="listbutton add" innerClass="inner" content="+" />
         </div>
     </div>
+    <div id="file-save-as">
+        <label for="file-save-as-input"><roundcube:label name="kolab_files.saveas" /></label>
+        <input id="file-save-as-input" type="text" value="">
+    </div>
 </div>
 
 <div id="files-folder-create-dialog" role="dialog" aria-labelledby="aria-label-foldercreateform" aria-hidden="true">

plugins/kolab_files/skins/larry/ui.js

@@ -26,6 +26,8 @@ function kolab_files_ui_init()
     if (menu.length) {
       rcmail.gui_object('file_searchmenu', 'filesearchmenu');
     }
+
+    UI.folder_search_init($('#folderlistbox'));
   });
 
   kolab_files_upload_input('#filestoolbar a.upload');