Add UI elements to expand/collapse all tasks (#2291)
This commit is contained in:
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 |
|
@ -66,7 +66,7 @@ body.attachmentwin #topnav .topright {
|
|||
}
|
||||
|
||||
#taskselector {
|
||||
margin: -4px 0 0;
|
||||
margin: -4px 40px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
@ -336,6 +336,27 @@ body.attachmentwin #topnav .topright {
|
|||
background: -ms-linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
background: linear-gradient(top, #eee 0%, #dfdfdf 100%);
|
||||
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 {
|
||||
|
@ -547,11 +568,24 @@ body.attachmentwin #topnav .topright {
|
|||
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);
|
||||
}
|
||||
|
||||
ul.toolbarmenu li span.add {
|
||||
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 {
|
||||
background-position: 0 -1508px;
|
||||
}
|
||||
|
|
|
@ -59,6 +59,10 @@
|
|||
<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>
|
||||
</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="⚙" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroller">
|
||||
|
@ -92,6 +96,13 @@
|
|||
</ul>
|
||||
</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 class="form-section" id="task-parent-title"></div>
|
||||
<div class="form-section">
|
||||
|
|
|
@ -92,6 +92,7 @@ function rcube_tasklist_ui(settings)
|
|||
this.add_childtask = add_childtask;
|
||||
this.quicksearch = quicksearch;
|
||||
this.reset_search = reset_search;
|
||||
this.expand_collapse = expand_collapse;
|
||||
this.list_remove = list_remove;
|
||||
this.list_edit_dialog = list_edit_dialog;
|
||||
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 ? '▶' : '▼');
|
||||
|
||||
// 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('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();
|
||||
});
|
||||
|
|
|
@ -248,14 +248,16 @@ class tasklist extends rcube_plugin
|
|||
break;
|
||||
|
||||
case 'collapse':
|
||||
foreach (explode(',', $rec['id']) as $rec_id) {
|
||||
if (intval(get_input_value('collapsed', RCUBE_INPUT_GPC))) {
|
||||
$this->collapsed_tasks[] = $rec['id'];
|
||||
$this->collapsed_tasks[] = $rec_id;
|
||||
}
|
||||
else {
|
||||
$i = array_search($rec['id'], $this->collapsed_tasks);
|
||||
$i = array_search($rec_id, $this->collapsed_tasks);
|
||||
if ($i !== false)
|
||||
unset($this->collapsed_tasks[$i]);
|
||||
}
|
||||
}
|
||||
|
||||
$this->rc->user->save_prefs(array('tasklist_collapsed_tasks' => join(',', array_unique($this->collapsed_tasks))));
|
||||
return; // avoid further actions
|
||||
|
|
Loading…
Add table
Reference in a new issue