preview images in taskview

6 files changed, 149 insertions, 22 deletions

diff --git a/app/Controller/Task.php b/app/Controller/Task.php
index 741db61e..d94c5908 100644
--- a/app/Controller/Task.php
+++ b/app/Controller/Task.php
@@ -68,7 +68,8 @@ class Task extends Base
 
         $this->response->html($this->taskLayout('task/show', array(
             'project' => $this->project->getById($task['project_id']),
-            'files' => $this->file->getAll($task['id']),
+            'files' => $this->file->getAllDocuments($task['id']),
+            'images' => $this->file->getAllImages($task['id']),
             'comments' => $this->comment->getAll($task['id']),
             'subtasks' => $subtasks,
             'links' => $this->taskLink->getLinks($task['id']),
diff --git a/app/Model/File.php b/app/Model/File.php
index f069c8cf..46710658 100644
--- a/app/Model/File.php
+++ b/app/Model/File.php
@@ -111,6 +111,38 @@ class File extends Base
             ->asc('name')
             ->findAll();
     }
+    
+    /**
+     * Get all images for a given task
+     *
+     * @access public
+     * @param  integer   $task_id    Task id
+     * @return array
+     */
+    public function getAllImages($task_id)
+    {
+        return $this->db->table(self::TABLE)
+            ->eq('task_id', $task_id)
+            ->eq('is_image', 1)
+            ->asc('name')
+            ->findAll();
+    }
+    
+    /**
+     * Get all files without images for a given task
+     *
+     * @access public
+     * @param  integer   $task_id    Task id
+     * @return array
+     */
+    public function getAllDocuments($task_id)
+    {
+        return $this->db->table(self::TABLE)
+            ->eq('task_id', $task_id)
+            ->eq('is_image', 0)
+            ->asc('name')
+            ->findAll();
+    }
 
     /**
      * Check if a filename is an image
diff --git a/app/Template/file/show.php b/app/Template/file/show.php
index 298976f6..2af5a7aa 100644
--- a/app/Template/file/show.php
+++ b/app/Template/file/show.php
@@ -1,23 +1,53 @@
-<?php if (! empty($files)): ?>
-<div id="attachments" class="task-show-section">
+<?php if (!empty($files) || !empty($images)): ?>
+    <div id="attachments" class="task-show-section">
 
-    <div class="page-header">
-        <h2><?= t('Attachments') ?></h2>
-    </div>
+        <div class="page-header">
+            <h2><?= t('Attachments') ?></h2>
+        </div>
+        <?php if (!empty($images)): ?>
+            <h3>
+                <?= t('Images') ?>
+            </h3>
+            <ul class="task-show-images">
+                <?php foreach ($images as $file): ?>
+                    <li>
+                        <div class="img_container">
+                            <img src="<?= $this->u('file', 'image', array('file_id' => $file['id'], 'project_id' => $task['project_id'], 'task_id' => $file['task_id'])) ?>" alt="<?= $this->e($file['name']) ?>"/>
+                        </div>
+                        <p>
+                            <?= $this->e($file['name']) ?>
+                        </p>
+                        <span class="task-show-file-actions task-show-image-actions">
+                            <i class="fa fa-eye"></i> <?= $this->a(t('open'), 'file', 'open', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), false, 'popover') ?>
+                            <i class="fa fa-trash"></i> <?= $this->a(t('remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                            <i class="fa fa-download"></i> <?= $this->a(t('download'), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                        </span>
+                    </li>                    
+                <?php endforeach ?>
+            </ul>            
+        <?php endif
+        ?>
+        <?php if (!empty($files)): ?>
+            <h3>
+                <?= t('Files') ?>
+            </h3>
+            <ul class="task-show-files">
+                <?php foreach ($files as $file): ?>
+                    <li>
+                        <?= $this->a($this->e($file['name']), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                        <span class="task-show-file-actions">                            
+                            <i class="fa fa-trash"></i> <?= $this->a(t('remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                        </span>
+                    </li>
+                <?php endforeach ?>
+            </ul>
 
-    <ul class="task-show-files">
-    <?php foreach ($files as $file): ?>
-        <li>
-            <?= $this->a($this->e($file['name']), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-            <span class="task-show-file-actions">
-                <?php if ($file['is_image']): ?>
-                    <?= $this->a(t('open'), 'file', 'open', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), false, 'popover') ?>,
-                <?php endif ?>
-                <?= $this->a(t('remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-            </span>
-        </li>
-    <?php endforeach ?>
-    </ul>
+        </div>
+    <?php endif
+    ?>
+    <?php
 
-</div>
-<?php endif ?>
\ No newline at end of file
+
+
+
+ endif ?>
\ No newline at end of file
diff --git a/app/Template/task/show.php b/app/Template/task/show.php
index 1ff2ef43..45485e53 100644
--- a/app/Template/task/show.php
+++ b/app/Template/task/show.php
@@ -4,5 +4,5 @@
 <?= $this->render('tasklink/show', array('task' => $task, 'links' => $links)) ?>
 <?= $this->render('subtask/show', array('task' => $task, 'subtasks' => $subtasks)) ?>
 <?= $this->render('task/timesheet', array('task' => $task)) ?>
-<?= $this->render('file/show', array('task' => $task, 'files' => $files)) ?>
+<?= $this->render('file/show', array('task' => $task, 'files' => $files, 'images' => $images)) ?>
 <?= $this->render('task/comments', array('task' => $task, 'comments' => $comments, 'project' => $project)) ?>
diff --git a/assets/css/app.css b/assets/css/app.css
index f0446f30..a304d27f 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1551,3 +1551,35 @@ td li.dropit-trigger {
 .task-board .dropit-submenu a:hover {
     text-decoration: none;
 }
+.task-show-images {
+    list-style-type: none;
+}
+.task-show-images li img {
+    width: 100%;
+}
+.task-show-images li .img_container {
+    width: 250px;
+    height: 100px;            
+    overflow: hidden;
+}
+.task-show-images li {
+    padding: 10px;
+    overflow: auto;
+    width: 250px;
+    min-height: 120px;
+    display: inline-block;
+    vertical-align: top;
+}
+.task-show-images li p{
+    padding: 5px;
+    font-weight: bold;
+}
+.task-show-images li:hover {
+    background: #eee;
+}
+.task-show-image-actions {
+    margin-left: 5px;
+}
+.task-show-images li .img_container:hover {
+    height: 100%;
+}
\ No newline at end of file
diff --git a/assets/css/src/task.css b/assets/css/src/task.css
index b7a5cb9c..5cb7b969 100644
--- a/assets/css/src/task.css
+++ b/assets/css/src/task.css
@@ -245,3 +245,35 @@ span.task-board-date-overdue {
 .task-link-closed {
     text-decoration: line-through;
 }
+.task-show-images {
+    list-style-type: none;
+}
+.task-show-images li img {
+    width: 100%;
+}
+.task-show-images li .img_container {
+    width: 250px;
+    height: 100px;            
+    overflow: hidden;
+}
+.task-show-images li {
+    padding: 10px;
+    overflow: auto;
+    width: 250px;
+    min-height: 120px;
+    display: inline-block;
+    vertical-align: top;
+}
+.task-show-images li p{
+    padding: 5px;
+    font-weight: bold;
+}
+.task-show-images li:hover {
+    background: #eee;
+}
+.task-show-image-actions {
+    margin-left: 5px;
+}
+.task-show-images li .img_container:hover {
+    height: 100%;
+}