Add UI elements to expand/collapse all tasks (#2291)

This commit is contained in:
Thomas Bruederli 2013-10-23 17:12:42 +02:00
parent a694b7ad9e
commit d525574c48
5 changed files with 83 additions and 9 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -66,7 +66,7 @@ body.attachmentwin #topnav .topright {
} }
#taskselector { #taskselector {
margin: -4px 0 0; margin: -4px 40px 0 0;
padding: 0; padding: 0;
} }
@ -336,6 +336,27 @@ body.attachmentwin #topnav .topright {
background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%); background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
background: linear-gradient(top, #eee 0%, #dfdfdf 100%); background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
position: relative;
}
#tasksview .buttonbar .buttonbar-right {
position: absolute;
top: 6px;
right: 8px;
}
.buttonbar-right .listmenu {
display: inline-block;
cursor: pointer;
}
.buttonbar-right .listmenu .inner {
display: inline-block;
height: 18px;
width: 20px;
padding: 0;
background: url(sprites.png) 0 -237px no-repeat;
text-indent: -5000px;
} }
#thelist { #thelist {
@ -547,11 +568,24 @@ body.attachmentwin #topnav .topright {
border-top: 1px solid #219de6; border-top: 1px solid #219de6;
} }
ul.toolbarmenu li span.add { ul.toolbarmenu li span.add,
ul.toolbarmenu li span.expand,
ul.toolbarmenu li span.collapse {
background-image: url(sprites.png); background-image: url(sprites.png);
}
ul.toolbarmenu li span.add {
background-position: 0 -100px; background-position: 0 -100px;
} }
ul.toolbarmenu li span.expand {
background-position: 0 -258px;
}
ul.toolbarmenu li span.collapse {
background-position: 0 -280px;
}
ul.toolbarmenu li span.delete { ul.toolbarmenu li span.delete {
background-position: 0 -1508px; background-position: 0 -1508px;
} }

View file

@ -59,6 +59,10 @@
<li class="nodate"><a href="#nodate"><roundcube:label name="tasklist.nodate" ucfirst="true" /></a></li> <li class="nodate"><a href="#nodate"><roundcube:label name="tasklist.nodate" ucfirst="true" /></a></li>
<li class="complete"><a href="#complete"><roundcube:label name="tasklist.complete" /><span class="count"></span></a></li> <li class="complete"><a href="#complete"><roundcube:label name="tasklist.complete" /><span class="count"></span></a></li>
</ul> </ul>
<div class="buttonbar-right">
<roundcube:button name="taskviewmenulink" id="taskviewmenulink" type="link" title="tasklist.viewoptions" class="listmenu viewoptions" onclick="UI.show_popup('taskviewmenu');return false" innerClass="inner" content="&#9881;" />
</div>
</div> </div>
<div class="scroller"> <div class="scroller">
@ -92,6 +96,13 @@
</ul> </ul>
</div> </div>
<div id="taskviewmenu" class="popupmenu">
<ul class="toolbarmenu">
<li><roundcube:button command="expand-all" label="expand-all" class="icon" classAct="icon active" innerclass="icon expand" /></li>
<li><roundcube:button command="collapse-all" label="collapse-all" class="icon" classAct="icon active" innerclass="icon collapse" /></li>
</ul>
</div>
<div id="taskshow"> <div id="taskshow">
<div class="form-section" id="task-parent-title"></div> <div class="form-section" id="task-parent-title"></div>
<div class="form-section"> <div class="form-section">

View file

@ -92,6 +92,7 @@ function rcube_tasklist_ui(settings)
this.add_childtask = add_childtask; this.add_childtask = add_childtask;
this.quicksearch = quicksearch; this.quicksearch = quicksearch;
this.reset_search = reset_search; this.reset_search = reset_search;
this.expand_collapse = expand_collapse;
this.list_remove = list_remove; this.list_remove = list_remove;
this.list_edit_dialog = list_edit_dialog; this.list_edit_dialog = list_edit_dialog;
this.unlock_saving = unlock_saving; this.unlock_saving = unlock_saving;
@ -519,6 +520,30 @@ function rcube_tasklist_ui(settings)
}) })
} }
/**
* Expand/collapse all task items with childs
*/
function expand_collapse(expand)
{
var collapsed = !expand;
$('.taskitem .childtasks')[(collapsed ? 'hide' : 'show')]();
$('.taskitem .childtoggle')
.removeClass(collapsed ? 'expanded' : 'collapsed')
.addClass(collapsed ? 'collapsed' : 'expanded')
.html(collapsed ? '&#9654;' : '&#9660;');
// store new toggle collapse states
var ids = [];
for (var id in listdata) {
if (listdata[id].children && listdata[id].children.length)
ids.push(id);
}
if (ids.length) {
rcmail.http_post('tasks/task', { action:'collapse', t:{ id:ids.join(',') }, collapsed:collapsed?1:0 });
}
}
/** /**
* *
*/ */
@ -1781,6 +1806,8 @@ window.rcmail && rcmail.addEventListener('init', function(evt) {
rcmail.register_command('search', function(){ rctasks.quicksearch(); }, true); rcmail.register_command('search', function(){ rctasks.quicksearch(); }, true);
rcmail.register_command('reset-search', function(){ rctasks.reset_search(); }, true); rcmail.register_command('reset-search', function(){ rctasks.reset_search(); }, true);
rcmail.register_command('expand-all', function(){ rctasks.expand_collapse(true); }, true);
rcmail.register_command('collapse-all', function(){ rctasks.expand_collapse(false); }, true);
rctasks.init(); rctasks.init();
}); });

View file

@ -248,14 +248,16 @@ class tasklist extends rcube_plugin
break; break;
case 'collapse': case 'collapse':
foreach (explode(',', $rec['id']) as $rec_id) {
if (intval(get_input_value('collapsed', RCUBE_INPUT_GPC))) { if (intval(get_input_value('collapsed', RCUBE_INPUT_GPC))) {
$this->collapsed_tasks[] = $rec['id']; $this->collapsed_tasks[] = $rec_id;
} }
else { else {
$i = array_search($rec['id'], $this->collapsed_tasks); $i = array_search($rec_id, $this->collapsed_tasks);
if ($i !== false) if ($i !== false)
unset($this->collapsed_tasks[$i]); unset($this->collapsed_tasks[$i]);
} }
}
$this->rc->user->save_prefs(array('tasklist_collapsed_tasks' => join(',', array_unique($this->collapsed_tasks)))); $this->rc->user->save_prefs(array('tasklist_collapsed_tasks' => join(',', array_unique($this->collapsed_tasks))));
return; // avoid further actions return; // avoid further actions