Redesign task list view

9 files changed, 222 insertions, 74 deletions

diff --git a/app/Template/board/task_footer.php b/app/Template/board/task_footer.php
index 74c1b74d..79b7c3e9 100644
--- a/app/Template/board/task_footer.php
+++ b/app/Template/board/task_footer.php
@@ -57,11 +57,11 @@
         <?php endif ?>
 
         <?php if (! empty($task['date_due'])): ?>
-            <span class="task-board-date
+            <span class="task-date
                 <?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
-                     task-board-date-today
+                     task-date-today
                 <?php elseif (time() > $task['date_due']): ?>
-                     task-board-date-overdue
+                     task-date-overdue
                 <?php endif ?>
                 ">
                 <i class="fa fa-calendar"></i>
@@ -117,9 +117,9 @@
         <?php endif ?>
 
         <?php if ($task['is_active'] == 1): ?>
-            <div class="task-board-age">
-                <span title="<?= t('Task age in days')?>" class="task-board-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
-                <span title="<?= t('Days in this column')?>" class="task-board-age-column"><?= $this->dt->age($task['date_moved']) ?></span>
+            <div class="task-icon-age">
+                <span title="<?= t('Task age in days')?>" class="task-icon-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
+                <span title="<?= t('Days in this column')?>" class="task-icon-age-column"><?= $this->dt->age($task['date_moved']) ?></span>
             </div>
         <?php else: ?>
             <span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span>
diff --git a/app/Template/board/task_private.php b/app/Template/board/task_private.php
index 1be64fcf..c4afc0bf 100644
--- a/app/Template/board/task_private.php
+++ b/app/Template/board/task_private.php
@@ -32,6 +32,7 @@
         </div>
     <?php else: ?>
         <div class="task-board-expanded">
+            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
             <div class="task-board-header">
                 <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
                     <?= $this->render('task/dropdown', array('task' => $task)) ?>
@@ -54,8 +55,6 @@
             </div>
             <?= $this->hook->render('template:board:private:task:after-title', array('task' => $task)) ?>
 
-            <div class="task-board-saving-icon" style="display: none;"><i class="fa fa-spinner fa-pulse fa-2x"></i></div>
-
             <?= $this->render('board/task_footer', array(
                 'task' => $task,
                 'not_editable' => $not_editable,
diff --git a/app/Template/task_list/listing.php b/app/Template/task_list/listing.php
new file mode 100644
index 00000000..76803a5c
--- /dev/null
+++ b/app/Template/task_list/listing.php
@@ -0,0 +1,35 @@
+<section id="main">
+    <?= $this->projectHeader->render($project, 'TaskListController', 'show') ?>
+
+    <?php if ($paginator->isEmpty()): ?>
+        <p class="alert"><?= t('No tasks found.') ?></p>
+    <?php elseif (! $paginator->isEmpty()): ?>
+        <div class="task-list">
+            <div class="task-list-header">
+                <?= $this->render('task_list/sort_menu', array('paginator' => $paginator)) ?>
+            </div>
+            <?php foreach ($paginator->getCollection() as $task): ?>
+                <div class="task-list-row color-<?= $task['color_id'] ?>">
+                    <?= $this->render('task_list/task_title', array(
+                        'task' => $task,
+                    )) ?>
+
+                    <?= $this->render('task_list/task_details', array(
+                        'task' => $task,
+                    )) ?>
+
+                    <?= $this->render('task_list/task_avatars', array(
+                        'task' => $task,
+                    )) ?>
+
+                    <?= $this->render('task_list/task_icons', array(
+                        'project' => $project,
+                        'task'    => $task,
+                    )) ?>
+                </div>
+            <?php endforeach ?>
+        </div>
+
+        <?= $paginator ?>
+    <?php endif ?>
+</section>
diff --git a/app/Template/task_list/show.php b/app/Template/task_list/show.php
deleted file mode 100644
index 8454d13f..00000000
--- a/app/Template/task_list/show.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<section id="main">
-    <?= $this->projectHeader->render($project, 'TaskListController', 'show') ?>
-
-    <?php if ($paginator->isEmpty()): ?>
-        <p class="alert"><?= t('No tasks found.') ?></p>
-    <?php elseif (! $paginator->isEmpty()): ?>
-        <table class="table-striped table-scrolling table-small">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'tasks.id') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Swimlane'), 'tasks.swimlane_id') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Column'), 'tasks.column_id') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Category'), 'tasks.category_id') ?></th>
-                <th class="column-6"><?= $paginator->order(t('Priority'), \Kanboard\Model\TaskModel::TABLE.'.priority') ?></th>
-                <th><?= $paginator->order(t('Title'), 'tasks.title') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Assignee'), 'users.username') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Due date'), 'tasks.date_due') ?></th>
-                <th class="column-5"><?= $paginator->order(t('Status'), 'tasks.is_active') ?></th>
-            </tr>
-            <?php foreach ($paginator->getCollection() as $task): ?>
-            <tr>
-                <td class="color-<?= $task['color_id'] ?>">
-                    <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
-                        <?= $this->render('task/dropdown', array('task' => $task)) ?>
-                    <?php else: ?>
-                        #<?= $task['id'] ?>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->text->e($task['swimlane_name']) ?>
-                </td>
-                <td>
-                    <?= $this->text->e($task['column_name']) ?>
-                </td>
-                <td>
-                    <?= $this->text->e($task['category_name']) ?>
-                </td>
-                <td>
-                    P<?= $this->text->e($task['priority'])?>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($task['title']), 'TaskViewController', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, '', t('View this task')) ?>
-                </td>
-                <td>
-                    <?php if ($task['assignee_username']): ?>
-                        <?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?>
-                    <?php else: ?>
-                        <?= t('Unassigned') ?>
-                    <?php endif ?>
-                </td>
-                <td>
-                    <?= $this->dt->date($task['date_due']) ?>
-                </td>
-                <td>
-                    <?php if ($task['is_active'] == \Kanboard\Model\TaskModel::STATUS_OPEN): ?>
-                        <?= t('Open') ?>
-                    <?php else: ?>
-                        <?= t('Closed') ?>
-                    <?php endif ?>
-                </td>
-            </tr>
-            <?php endforeach ?>
-        </table>
-
-        <?= $paginator ?>
-    <?php endif ?>
-</section>
diff --git a/app/Template/task_list/sort_menu.php b/app/Template/task_list/sort_menu.php
new file mode 100644
index 00000000..48081fe0
--- /dev/null
+++ b/app/Template/task_list/sort_menu.php
@@ -0,0 +1,32 @@
+<div class="dropdown">
+    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><strong><?= t('Sort') ?> <i class="fa fa-caret-down"></i></strong></a>
+    <ul>
+        <li>
+            <?= $paginator->order(t('Task ID'), \Kanboard\Model\TaskModel::TABLE.'.id') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Swimlane'), 'swimlane_name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Column'), 'column_name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Category'), 'category_name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Priority'), \Kanboard\Model\TaskModel::TABLE.'.priority') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Title'), \Kanboard\Model\TaskModel::TABLE.'.title') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Assignee'), 'assignee_name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Due date'), \Kanboard\Model\TaskModel::TABLE.'.date_due') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Status'), \Kanboard\Model\TaskModel::TABLE.'.is_active') ?>
+        </li>
+    </ul>
+</div>
diff --git a/app/Template/task_list/task_avatars.php b/app/Template/task_list/task_avatars.php
new file mode 100644
index 00000000..6a43b1a6
--- /dev/null
+++ b/app/Template/task_list/task_avatars.php
@@ -0,0 +1,20 @@
+<?php if (! empty($task['owner_id'])): ?>
+    <div class="task-list-avatars">
+        <span
+            <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
+            class="task-board-change-assignee"
+            data-url="<?= $this->url->href('TaskModificationController', 'edit', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+        <?php else: ?>
+            class="task-board-assignee">
+        <?php endif ?>
+            <?= $this->avatar->small(
+                $task['owner_id'],
+                $task['assignee_username'],
+                $task['assignee_name'],
+                $task['assignee_email'],
+                $task['assignee_avatar_path'],
+                'avatar-inline'
+            ) ?><span class="task-avatar-assignee"><?= $this->text->e($task['assignee_name'] ?: $task['assignee_username']) ?></span>
+        </span>
+    </div>
+<?php endif ?>
\ No newline at end of file
diff --git a/app/Template/task_list/task_details.php b/app/Template/task_list/task_details.php
new file mode 100644
index 00000000..33ae380a
--- /dev/null
+++ b/app/Template/task_list/task_details.php
@@ -0,0 +1,23 @@
+<div class="task-list-details">
+    <?= $this->text->e($task['project_name']) ?> &gt;
+    <?= $this->text->e($task['swimlane_name']) ?> &gt;
+    <?= $this->text->e($task['column_name']) ?>
+
+    <?php if (! empty($task['category_id'])): ?>
+        <span class="task-list-category">
+            <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
+                <?= $this->url->link(
+                    $this->text->e($task['category_name']),
+                    'TaskModificationController',
+                    'edit',
+                    array('task_id' => $task['id'], 'project_id' => $task['project_id']),
+                    false,
+                    'js-modal-medium' . (! empty($task['category_description']) ? ' tooltip' : ''),
+                    ! empty($task['category_description']) ? $this->text->markdownAttribute($task['category_description']) : t('Change category')
+                ) ?>
+            <?php else: ?>
+                <?= $this->text->e($task['category_name']) ?>
+            <?php endif ?>
+        </span>
+    <?php endif ?>
+</div>
\ No newline at end of file
diff --git a/app/Template/task_list/task_icons.php b/app/Template/task_list/task_icons.php
new file mode 100644
index 00000000..da08a43f
--- /dev/null
+++ b/app/Template/task_list/task_icons.php
@@ -0,0 +1,94 @@
+<div class="task-list-icons">
+    <?php if ($task['reference']): ?>
+        <span class="task-board-reference" title="<?= t('Reference') ?>">
+            <?= $this->text->e($task['reference']) ?>
+        </span>
+    <?php endif ?>
+    <?php if ($task['is_milestone'] == 1): ?>
+        <span title="<?= t('Milestone') ?>">
+            <i class="fa fa-flag flag-milestone"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($task['score']): ?>
+        <span class="task-score" title="<?= t('Complexity') ?>">
+            <i class="fa fa-trophy"></i>
+        <?= $this->text->e($task['score']) ?>
+        </span>
+    <?php endif ?>
+
+    <?php if (! empty($task['time_estimated']) || ! empty($task['time_spent'])): ?>
+        <span class="task-time-estimated" title="<?= t('Time spent and estimated') ?>">
+            <?= $this->text->e($task['time_spent']) ?>/<?= $this->text->e($task['time_estimated']) ?>h
+        </span>
+    <?php endif ?>
+
+    <?php if (! empty($task['date_due'])): ?>
+        <span class="task-date
+            <?php if (date('Y-m-d') == date('Y-m-d', $task['date_due'])): ?>
+                 task-date-today
+            <?php elseif (time() > $task['date_due']): ?>
+                 task-date-overdue
+            <?php endif ?>
+            ">
+            <i class="fa fa-calendar"></i>
+        <?= $this->dt->date($task['date_due']) ?>
+        </span>
+    <?php endif ?>
+
+    <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
+        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
+    <?php endif ?>
+
+    <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
+        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
+    <?php endif ?>
+
+    <?php if (! empty($task['nb_links'])): ?>
+        <span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
+    <?php endif ?>
+
+    <?php if (! empty($task['nb_external_links'])): ?>
+        <span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
+    <?php endif ?>
+
+    <?php if (! empty($task['nb_subtasks'])): ?>
+        <span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
+    <?php endif ?>
+
+    <?php if (! empty($task['nb_files'])): ?>
+        <span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
+    <?php endif ?>
+
+    <?php if ($task['nb_comments'] > 0): ?>
+        <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
+            <?= $this->modal->medium(
+                'comments-o',
+                $task['nb_comments'],
+                'CommentListController',
+                'show',
+                array('task_id' => $task['id'], 'project_id' => $task['project_id']),
+                $task['nb_comments'] == 1 ? t('%d comment', $task['nb_comments']) : t('%d comments', $task['nb_comments'])
+            ) ?>
+        <?php else: ?>
+            <span title="<?= $task['nb_comments'] == 1 ? t('%d comment', $task['nb_comments']) : t('%d comments', $task['nb_comments']) ?>"><i class="fa fa-comments-o"></i>&nbsp;<?= $task['nb_comments'] ?></span>
+        <?php endif ?>
+    <?php endif ?>
+
+    <?php if (! empty($task['description'])): ?>
+        <span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+            <i class="fa fa-file-text-o"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($task['is_active'] == 1): ?>
+        <div class="task-icon-age">
+            <span title="<?= t('Task age in days')?>" class="task-icon-age-total"><?= $this->dt->age($task['date_creation']) ?></span>
+            <span title="<?= t('Days in this column')?>" class="task-icon-age-column"><?= $this->dt->age($task['date_moved']) ?></span>
+        </div>
+    <?php else: ?>
+        <span class="task-board-closed"><i class="fa fa-ban fa-fw"></i><?= t('Closed') ?></span>
+    <?php endif ?>
+
+    <?= $this->task->formatPriority($project, $task) ?>
+</div>
diff --git a/app/Template/task_list/task_title.php b/app/Template/task_list/task_title.php
new file mode 100644
index 00000000..5e9c7284
--- /dev/null
+++ b/app/Template/task_list/task_title.php
@@ -0,0 +1,11 @@
+<div>
+    <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
+        <?= $this->render('task/dropdown', array('task' => $task)) ?>
+    <?php else: ?>
+        <strong><?= '#'.$task['id'] ?></strong>
+    <?php endif ?>
+
+    <span class="task-list-title <?= $task['is_active'] == 0 ? 'task-closed' : '' ?>">
+        <?= $this->url->link($this->text->e($task['title']), 'TaskViewController', 'show', array('project_id' => $task['project_id'], 'task_id' => $task['id'])) ?>
+    </span>
+</div>