Add sort col selector for notes list

plugins/kolab_notes/kolab_notes.php

@@ -27,6 +27,7 @@
 class kolab_notes extends rcube_plugin
 {
     public $task = '?(?!login|logout).*';
+    public $allowed_prefs = array('kolab_notes_sort_col');
     public $rc;
 
     private $ui;

plugins/kolab_notes/kolab_notes_ui.php

@@ -57,8 +57,10 @@ class kolab_notes_ui
 
         $this->plugin->include_stylesheet($this->plugin->local_skin_path() . '/tagedit.css');
 
-        // TODO: load config options and user prefs relevant for the UI
+        // load config options and user prefs relevant for the UI
-        $settings = array();
+        $settings = array(
+            'sort_col' => $this->rc->config->get('kolab_notes_sort_col', 'changed'),
+        );
 
         if (!empty($_REQUEST['_list'])) {
             $settings['selected_list'] = rcube_utils::get_input_value('_list', RCUBE_INPUT_GPC);

plugins/kolab_notes/localization/en_US.inc

@@ -11,6 +11,7 @@ $labels['notags'] = 'No tags';
 $labels['removetag'] = 'Remove tag';
 $labels['created'] = 'Created';
 $labels['changed'] = 'Last Modified';
+$labels['title'] = 'Title';
 $labels['now'] = 'Now';
 $labels['createlist'] = 'New Notebook';
 $labels['editlist'] = 'Edit Notebook';

plugins/kolab_notes/notes.js

@@ -53,6 +53,7 @@ function rcube_kolab_notes_ui(settings)
         rcmail.register_command('list-create', function(){ list_edit_dialog(null); }, true);
         rcmail.register_command('list-edit', function(){ list_edit_dialog(me.selected_list); }, false);
         rcmail.register_command('list-remove', function(){ list_remove(me.selected_list); }, false);
+        rcmail.register_command('list-sort', list_set_sort, true);
         rcmail.register_command('save', save_note, true);
         rcmail.register_command('delete', delete_notes, false);
         rcmail.register_command('search', quicksearch, true);
@@ -147,6 +148,10 @@ function rcube_kolab_notes_ui(settings)
             .init();
         }
 
+        if (settings.sort_col) {
+            $('#notessortmenu a.by-' + settings.sort_col).addClass('selected');
+        }
+
         // click-handler on tags list
         $(rcmail.gui_objects.notestagslist).on('click', function(e){
             var item = e.target.nodeName == 'LI' ? $(e.target) : $(e.target).closest('li'),
@@ -434,6 +439,36 @@ function rcube_kolab_notes_ui(settings)
         }
     }
 
+    /**
+     * Change notes list sort order
+     */
+    function list_set_sort(col)
+    {
+        if (settings.sort_col != col) {
+            settings.sort_col = col;
+            $('#notessortmenu a').removeClass('selected').filter('.by-' + col).addClass('selected');
+            rcmail.save_pref({ name: 'kolab_notes_sort_col', value: col });
+
+            // re-sort table in DOM
+            $(noteslist.tbody).children().sortElements(function(la, lb){
+                var a_id = String(la.id).replace(/^rcmrow/, ''),
+                    b_id = String(lb.id).replace(/^rcmrow/, ''),
+                    a = notesdata[a_id],
+                    b = notesdata[b_id];
+
+                if (!a || !b) {
+                    return 0;
+                }
+                else if (settings.sort_col == 'title') {
+                    return String(a.title).toLowerCase() > String(b.title).toLowerCase() ? 1 : -1;
+                }
+                else {
+                    return b.changed_ - a.changed_;
+                }
+            });
+        }
+    }
+
     /**
      * Execute search
      */
@@ -535,7 +570,12 @@ function rcube_kolab_notes_ui(settings)
     function data_ready(data)
     {
         data.data.sort(function(a,b){
-            return b.changed_ - a.changed_;
+            if (settings.sort_col == 'title') {
+                return String(a.title).toLowerCase() > String(b.title).toLowerCase() ? 1 : -1;
+            }
+            else {
+                return b.changed_ - a.changed_;
+            }
         });
 
         var i, id, rec;
@@ -639,7 +679,11 @@ function rcube_kolab_notes_ui(settings)
             editor.setContent(html);
             node = editor.getContentAreaContainer().childNodes[0];
             if (node) node.tabIndex = content.get(0).tabIndex;
-            editor.getBody().focus();
+
+            if (me.selected_note.uid)
+                editor.getBody().focus();
+            else
+                $('.notetitle', rcmail.gui_objects.noteviewtitle).focus().select();
 
             // read possibly re-formatted content back from editor for later comparison
             me.selected_note.description = editor.getContent({ format:'html' })
@@ -1069,6 +1113,27 @@ function rcube_kolab_notes_ui(settings)
 }
 
 
+// extend jQuery
+// from http://james.padolsey.com/javascript/sorting-elements-with-jquery/
+jQuery.fn.sortElements = (function(){
+    var sort = [].sort;
+
+    return function(comparator, getSortable) {
+        getSortable = getSortable || function(){ return this };
+
+        var last = null;
+        return sort.call(this, comparator).each(function(i){
+            // at this point the array is sorted, so we can just detach each one from wherever it is, and add it after the last
+            var node = $(getSortable.call(this));
+            var parent = node.parent();
+            if (last) last.after(node);
+            else      parent.prepend(node);
+            last = node;
+        });
+    };
+})();
+
+
 /* notes plugin UI initialization */
 var kolabnotes;
 window.rcmail && rcmail.addEventListener('init', function(evt) {

plugins/kolab_notes/skins/larry/notes.css

@@ -94,6 +94,14 @@
 	font-weight: normal;
 }
 
+.notesview .boxpagenav a.icon.sortoptions {
+	background: url(sprites.png) center -93px no-repeat;
+}
+
+.notesview .toolbarmenu.iconized .selected span.icon {
+	background: url(sprites.png) -5px -109px no-repeat;
+}
+
 .notesview #notedetailsbox {
 	position: absolute;
 	top: 0;

plugins/kolab_notes/skins/larry/templates/notes.html

@@ -11,6 +11,7 @@
 <div id="mainscreen">
     <div id="notestoolbar" class="toolbar">
         <roundcube:button command="createnote" type="link" class="button createnote disabled" classAct="button createnote" classSel="button createnote pressed" label="kolab_notes.create" title="kolab_notes.createnote" />
+        <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" />
         <roundcube:container name="toolbar" id="notestoolbar" />
 
         <div id="quicksearchbar">
@@ -49,6 +50,9 @@
                 <roundcube:button command="delete" type="link" title="delete" class="listbutton delete disabled" classAct="listbutton delete" innerClass="inner" content="-" />
                 <roundcube:object name="plugin.recordsCountDisplay" class="countdisplay" label="fromtoshort" />
             </div>
+            <div class="boxpagenav">
+                <roundcube:button name="notessortmenulink" id="notessortmenulink" type="link" title="kolab_notes.sortby" class="icon sortoptions" onclick="UI.show_popup('notessortmenu');return false" innerClass="inner" content="v" />
+            </div>
         </div>
 
         <div id="notedetailsbox" class="uibox contentbox">
@@ -59,7 +63,6 @@
                 <roundcube:button command="save" type="input" class="button mainaction" label="save" />
             </div>
         </div>
-
     </div>
 
 </div>
@@ -74,6 +77,13 @@
     </ul>
 </div>
 
+<div id="notessortmenu" class="popupmenu">
+    <ul class="toolbarmenu iconized">
+        <li><roundcube:button command="list-sort" prop="changed" type="link" label="kolab_notes.changed" class="icon active by-changed" innerclass="icon" /></li>
+        <li><roundcube:button command="list-sort" prop="title" type="link" label="kolab_notes.title" class="icon active by-title" innerclass="icon" /></li>
+    </ul>
+</div>
+
 <div id="notebookeditform" class="uidialog">
     <roundcube:container name="notebookeditform" id="notebookeditform" />
     <roundcube:label name="loading" />