From 8afeb0fedbeadfee7beca9997817cb75eff6e29f Mon Sep 17 00:00:00 2001 From: Bart Visscher Date: Mon, 16 Apr 2012 15:17:32 +0200 Subject: Tasks: Implement task lists overview --- apps/tasks/css/style.css | 17 ++++++++--- apps/tasks/js/tasks.js | 67 ++++++++++++++++++++++++++++++++---------- apps/tasks/templates/tasks.php | 6 ++++ 3 files changed, 70 insertions(+), 20 deletions(-) (limited to 'apps') diff --git a/apps/tasks/css/style.css b/apps/tasks/css/style.css index 52c7178e973..f5c3378bc4f 100644 --- a/apps/tasks/css/style.css +++ b/apps/tasks/css/style.css @@ -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} diff --git a/apps/tasks/js/tasks.js b/apps/tasks/js/tasks.js index 719c49f7891..fac1708b5ee 100644 --- a/apps/tasks/js/tasks.js +++ b/apps/tasks/js/tasks.js @@ -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 $('
').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 = $('
').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); diff --git a/apps/tasks/templates/tasks.php b/apps/tasks/templates/tasks.php index 8df2a100b69..63e0629e6af 100644 --- a/apps/tasks/templates/tasks.php +++ b/apps/tasks/templates/tasks.php @@ -8,8 +8,14 @@
+
+
All
+
Done
+
+

t('Loading tasks...') ?>

+

-- cgit v1.2.3