Add sort col selector for notes list

This commit is contained in:
Thomas Bruederli 2014-04-09 18:56:13 +02:00
parent f397684092
commit d35132c882
7 changed files with 92 additions and 5 deletions

View file

@ -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;

View file

@ -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
$settings = array();
// load config options and user prefs relevant for the UI
$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);

View file

@ -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';

View file

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

View file

@ -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;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -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" />