From 124f93dbadca4eb51eda378701042e564f0255b8 Mon Sep 17 00:00:00 2001
From: Frederic Guillot <fred@kanboard.net>
Date: Sat, 13 Feb 2016 22:51:58 -0500
Subject: Improve image thumbnails and files table

---
 app/Template/file/remove.php |  2 +-
 app/Template/file/show.php   | 92 ++++++++++++++++++++++++++++----------------
 2 files changed, 60 insertions(+), 34 deletions(-)

(limited to 'app/Template')

diff --git a/app/Template/file/remove.php b/app/Template/file/remove.php
index 37f648eb..24844835 100644
--- a/app/Template/file/remove.php
+++ b/app/Template/file/remove.php
@@ -10,6 +10,6 @@
     <div class="form-actions">
         <?= $this->url->link(t('Yes'), 'file', 'remove', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), true, 'btn btn-red') ?>
         <?= t('or') ?>
-        <?= $this->url->link(t('cancel'), 'task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>
+        <?= $this->url->link(t('cancel'), 'task', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'close-popover') ?>
     </div>
 </div>
\ No newline at end of file
diff --git a/app/Template/file/show.php b/app/Template/file/show.php
index 7a4d38b4..ed006299 100644
--- a/app/Template/file/show.php
+++ b/app/Template/file/show.php
@@ -5,50 +5,76 @@
         <h2><?= t('Attachments') ?></h2>
     </div>
     <?php if (! empty($images)): ?>
-        <h3><?= t('Images') ?></h3>
-        <ul class="task-show-images">
+        <div class="file-thumbnails">
             <?php foreach ($images as $file): ?>
-                <li>
-                    <div class="img_container">
-                        <img src="<?= $this->url->href('file', 'thumbnail', array('file_id' => $file['id'], 'project_id' => $task['project_id'], 'task_id' => $file['task_id'])) ?>" alt="<?= $this->e($file['name']) ?>"/>
+                <div class="file-thumbnail">
+                    <a href="<?= $this->url->href('file', 'open', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>" class="popover"><img src="<?= $this->url->href('file', 'thumbnail', array('file_id' => $file['id'], 'project_id' => $task['project_id'], 'task_id' => $file['task_id'])) ?>" title="<?= $this->e($file['name']) ?>" alt="<?= $this->e($file['name']) ?>"></a>
+                    <div class="file-thumbnail-content">
+                        <div class="file-thumbnail-title">
+                            <div class="dropdown">
+                            <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
+                            <ul>
+                                <?php if ($this->user->hasProjectAccess('file', 'remove', $task['project_id'])): ?>
+                                <li>
+                                    <i class="fa fa-trash fa-fw"></i>
+                                    <?= $this->url->link(t('Remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), false, 'popover') ?>
+                                </li>
+                                <?php endif ?>
+                                <li>
+                                    <i class="fa fa-download fa-fw"></i>
+                                    <?= $this->url->link(t('Download'), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                                </li>
+                            </ul>
+                            </div>
+                        </div>
+                        <div class="file-thumbnail-description">
+                            <span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
+                                <i class="fa fa-info-circle"></i>
+                            </span>
+                            <?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
+                        </div>
                     </div>
-                    <p>
-                        <?= $this->e($file['name']) ?>
-                        <span class="tooltip" title='<?= t('uploaded by: %s', $file['user_name'] ?: $file['username']).'<br>'.t('uploaded on: %s', $this->dt->datetime($file['date'])).'<br>'.t('size: %s', $this->text->bytes($file['size'])) ?>'>
-                            <i class="fa fa-info-circle"></i>
-                        </span>
-                    </p>
-                    <span class="task-show-file-actions task-show-image-actions">
-                        <i class="fa fa-eye"></i> <?= $this->url->link(t('open file'), 'file', 'open', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), false, 'popover') ?>
-                        <?php if ($this->user->hasProjectAccess('file', 'remove', $task['project_id'])): ?>
-                            <i class="fa fa-trash"></i> <?= $this->url->link(t('remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-                        <?php endif ?>
-                        <i class="fa fa-download"></i> <?= $this->url->link(t('download'), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-                    </span>
-                </li>
+                </div>
             <?php endforeach ?>
-        </ul>
+        </div>
     <?php endif ?>
 
     <?php if (! empty($files)): ?>
-        <h3><?= t('Files') ?></h3>
-        <table class="task-show-file-table">
+        <table class="table-stripped">
+            <tr>
+                <th><?= t('Filename') ?></th>
+                <th><?= t('Creator') ?></th>
+                <th><?= t('Date') ?></th>
+                <th><?= t('Size') ?></th>
+            </tr>
             <?php foreach ($files as $file): ?>
                 <tr>
-                    <td><i class="fa <?= $this->file->icon($file['name']) ?> fa-fw"></i></td>
                     <td>
-                        <?= $this->e($file['name']) ?>
-                        <span class="tooltip" title='<?= t('uploaded by: %s', $file['user_name'] ?: $file['username']).'<br>'.t('uploaded on: %s', $this->dt->datetime($file['date'])).'<br>'.t('size: %s', $this->text->bytes($file['size'])) ?>'>
-                            <i class="fa fa-info-circle"></i>
-                        </span>
+                        <i class="fa <?= $this->file->icon($file['name']) ?> fa-fw"></i>
+                        <div class="dropdown">
+                            <a href="#" class="dropdown-menu dropdown-menu-link-text"><?= $this->e($file['name']) ?> <i class="fa fa-caret-down"></i></a>
+                            <ul>
+                                <?php if ($this->user->hasProjectAccess('file', 'remove', $task['project_id'])): ?>
+                                <li>
+                                    <i class="fa fa-trash fa-fw"></i>
+                                    <?= $this->url->link(t('Remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id']), false, 'popover') ?>
+                                </li>
+                                <?php endif ?>
+                                <li>
+                                    <i class="fa fa-download fa-fw"></i>
+                                    <?= $this->url->link(t('Download'), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
+                                </li>
+                            </ul>
+                        </div>
                     </td>
                     <td>
-                        <span class="task-show-file-actions">
-                            <?php if ($this->user->hasProjectAccess('file', 'remove', $task['project_id'])): ?>
-                                <i class="fa fa-trash"></i> <?= $this->url->link(t('remove'), 'file', 'confirm', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-                            <?php endif ?>
-                            <i class="fa fa-download"></i> <?= $this->url->link(t('download'), 'file', 'download', array('task_id' => $task['id'], 'project_id' => $task['project_id'], 'file_id' => $file['id'])) ?>
-                        </span>
+                        <?= $this->e($file['user_name'] ?: $file['username']) ?>
+                    </td>
+                    <td>
+                        <?= $this->dt->date($file['date']) ?>
+                    </td>
+                    <td>
+                        <?= $this->text->bytes($file['size']) ?>
                     </td>
                 </tr>
             <?php endforeach ?>
-- 
cgit v1.2.3