Tasks: Implement task lists overview

remotes/origin/stable4
Bart Visscher 2012-04-16 15:17:32 +07:00
parent 947d2e5705
commit 8afeb0fedb
3 changed files with 70 additions and 20 deletions

@ -1,14 +1,22 @@
#tasks p.loading{margin:15px;}
#tasks{position:fixed; overflow: auto; top:6.4em; width:50em; background:#f8f8f8; border-right:1px solid #ddd; }
#tasks{position:fixed; overflow: auto; top:6.4em;width:71em;}
#tasks_lists,#tasks_list{height:100%;background:#f8f8f8; border-right:1px solid #ddd;float:left;}
#tasks_lists{width:20em;}
#tasks_lists .done{color:#C7C7C7;}
#tasks_list{width:50em;}
#task_details{position:absolute;left:63em;top:6.4em;}
#task_details th{padding:2px;text-align:right;vertical-align:top; }
#task_details td{padding:2px;text-align:left;vertical-align:top; }
.error_msg{color:red;}
.error{border-color:red;border-width:2px;}
.task{position:relative;padding:0.5em 1em;}
#tasks_lists div{position:relative;padding:0.5em 1em;}
#tasks_lists .active{font-weight:bold;}
.task_actions{display:none;}
#tasks h1{background-color:#1D2D44;color:white;font-size:120%;padding:0 0.5em;}
.task{border-radius:0.4em;position:relative;padding:0.5em 1em;}
.task:hover {background-color:#DDDDDD;}
.task .priority{background-color:black;color:white;position:absolute;top:0.5em}
.task .priority-n{height:2.66ex;width:0.6em;}
.task .priority-1{background:rgb(255,0,0);}
@ -31,7 +39,8 @@
.task .tag.active{border-color:black;opacity:0.6;}
.task .tag.active:hover{opacity:0.8;}
.task .categories{position:absolute;right:6em;text-align:right;top:0.5em}
.task .categories{position:absolute;right:6em;text-align:right;top:0.4em}
.task .categories a{background-color:#1d2d44;color:white;}
.task .categories .tag.active{display:none}
.task .location{background-color:#442d44;color:white;position:absolute;right:0.6em;width:4.2em;text-align:left;top:0.5em}
.task .location{background-color:#442d44;color:white;position:absolute;right:0.6em;width:4.2em;text-align:left;top:0.4em}

@ -64,12 +64,7 @@ OC.Tasks = {
filter:function(tag, find_filter) {
var tag_text = $(tag).text();
var filter = !$(tag).hasClass('active');
var show_count = $('#tasks').data('show_count');
show_count += filter ? +1 : -1;
$('#tasks').data('show_count', show_count);
$('#tasks .task').each(function(i, task_container){
task_container = $(task_container);
var task = task_container.data('task');
OC.Tasks.filterUpdate(filter, function(task_container){
var found = 0;
task_container.find(find_filter).each(function(){
if ($(this).text() == tag_text) {
@ -77,6 +72,17 @@ OC.Tasks = {
found = 1;
}
});
return found;
});
},
filterUpdate:function(filter, find_filter) {
var show_count = $('#tasks_list').data('show_count');
show_count += filter ? +1 : -1;
$('#tasks_list').data('show_count', show_count);
$('#tasks .task').each(function(i, task_container){
task_container = $(task_container);
var task = task_container.data('task');
var found = find_filter(task_container);
var hide_count = task_container.data('show_count');
if (!filter) {
hide_count-=found;
@ -98,7 +104,7 @@ OC.Tasks = {
tasks.sort(sort);
var current = null;
tasks.detach();
var $tasks = $('#tasks').empty();
var $tasks = $('#tasks_list').empty();
var container = $tasks;
tasks.each(function(){
if (get_property) {
@ -134,28 +140,51 @@ OC.Tasks = {
alert(jsondata.data.message);
}
}, 'json');
},
List: {
create_list_div:function(category){
return $('<div>').text(category)
.click(function(){
OC.Tasks.filter(this, 'div.categories .tag');
$(this).toggleClass('active');
});
}
}
};
$(document).ready(function(){
fillHeight($('#tasks'));
//fillHeight($('#tasks_lists'));
//fillHeight($('#tasks_list'));
//fillWindow($('#task_details'));
/*-------------------------------------------------------------------------
* Actions for startup
*-----------------------------------------------------------------------*/
$.getJSON(OC.filePath('tasks', 'ajax', 'gettasks.php'), function(jsondata) {
var tasks = $('#tasks').empty().data('show_count', 0);
var tasks = $('#tasks_list').empty().data('show_count', 0);
var actions = $('#task_actions_template');
$(jsondata).each(function(i, task) {
tasks.append(OC.Tasks.create_task_div(task));
});
if( $('#tasks div').length > 0 ){
$('#tasks div').first().addClass('active');
if( $('#tasks_list div').length > 0 ){
$('#tasks_list div').first().addClass('active');
}
$(categories).each(function(i, category) {
$('#tasks_lists .all').after(OC.Tasks.List.create_list_div(category));
});
$('#tasks_lists .all').click(function(){
$('#tasks_lists .active').click();
});
$('#tasks_lists .done').click(function(){
var filter = !$(this).hasClass('active');
OC.Tasks.filterUpdate(filter, function(task_container){
return task_container.hasClass('done');
});
$(this).toggleClass('active');
});
});
fillHeight($('#tasks'));
fillWindow($('#task_details'));
/*-------------------------------------------------------------------------
* Event handlers
*-----------------------------------------------------------------------*/
@ -180,6 +209,12 @@ $(document).ready(function(){
$('#tasks div.categories .tag').live('click',function(){
OC.Tasks.filter(this, 'div.categories .tag');
var tag_text = $(this).text();
$('#tasks_lists div:not(".all"):not(".done")').each(function(){
if ($(this).text() == tag_text) {
$(this).toggleClass('active');
}
});
});
$('#tasks .priority.tag').live('click',function(){
@ -217,7 +252,7 @@ $(document).ready(function(){
}
labels.sort();
tasks.detach();
var $tasks = $('#tasks').empty();
var $tasks = $('#tasks_list').empty();
for (var index in labels) {
var label = labels[index];
var container = $('<div>').appendTo($tasks);
@ -299,7 +334,7 @@ $(document).ready(function(){
if(jsondata.status == 'success'){
$('#task_details').data('id',jsondata.data.id);
$('#task_details').html(jsondata.data.page);
$('#tasks').append(OC.Tasks.create_task_div(jsondata.data.task));
$('#tasks_list').append(OC.Tasks.create_task_div(jsondata.data.task));
}
else{
alert(jsondata.data.message);

@ -8,8 +8,14 @@
<input type="button" id="tasks_order_label" value="<?php echo $l->t('Order Label'); ?>">
</div>
<div id="tasks">
<div id="tasks_lists">
<div class="all">All</div>
<div class="done">Done</div>
</div>
<div id="tasks_list">
<p class="loading"><?php echo $l->t('Loading tasks...') ?></p>
</div>
</div>
<div id="task_details">
</div>
<p id="task_actions_template" class="task_actions">