Redesign users list layout

9 files changed, 168 insertions, 72 deletions

diff --git a/app/Controller/UserListController.php b/app/Controller/UserListController.php
index 888583fa..6096923a 100644
--- a/app/Controller/UserListController.php
+++ b/app/Controller/UserListController.php
@@ -19,7 +19,7 @@ class UserListController extends BaseController
     {
         $paginator = $this->userPagination->getListingPaginator();
 
-        $this->response->html($this->helper->layout->app('user_list/show', array(
+        $this->response->html($this->helper->layout->app('user_list/listing', array(
             'title' => t('Users').' ('.$paginator->getTotal().')',
             'paginator' => $paginator,
         )));
diff --git a/app/Template/task_list/task_details.php b/app/Template/task_list/task_details.php
index 78b7ede7..223c52af 100644
--- a/app/Template/task_list/task_details.php
+++ b/app/Template/task_list/task_details.php
@@ -4,7 +4,7 @@
     <?= $this->text->e($task['column_name']) ?>
 
     <?php if (! empty($task['category_id'])): ?>
-        <span class="task-list-category">
+        <span class="table-list-category">
             <?php if ($this->user->hasProjectAccess('TaskModificationController', 'edit', $task['project_id'])): ?>
                 <?= $this->url->link(
                     $this->text->e($task['category_name']),
diff --git a/app/Template/user_list/header.php b/app/Template/user_list/header.php
new file mode 100644
index 00000000..9ff3f596
--- /dev/null
+++ b/app/Template/user_list/header.php
@@ -0,0 +1,12 @@
+<div class="table-list-header">
+    <div class="table-list-header-count">
+        <?php if ($paginator->getTotal() > 1): ?>
+            <?= t('%d users', $paginator->getTotal()) ?>
+        <?php else: ?>
+            <?= t('%d user', $paginator->getTotal()) ?>
+        <?php endif ?>
+    </div>
+    <div class="table-list-header-menu">
+        <?= $this->render('user_list/sort_menu', array('paginator' => $paginator)) ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/Template/user_list/listing.php b/app/Template/user_list/listing.php
new file mode 100644
index 00000000..899a20e7
--- /dev/null
+++ b/app/Template/user_list/listing.php
@@ -0,0 +1,43 @@
+<div class="page-header">
+    <?php if ($this->user->hasAccess('UserCreationController', 'show')): ?>
+    <ul>
+        <li>
+            <?= $this->modal->medium('plus', t('New user'), 'UserCreationController', 'show') ?>
+        </li>
+        <li>
+            <?= $this->modal->medium('paper-plane', t('Invite people'), 'UserInviteController', 'show') ?>
+        </li>
+        <li>
+            <?= $this->modal->medium('upload', t('Import'), 'UserImportController', 'show') ?>
+        </li>
+        <li>
+            <?= $this->url->icon('users', t('View all groups'), 'GroupListController', 'index') ?>
+        </li>
+    </ul>
+    <?php endif ?>
+</div>
+
+<?php if ($paginator->isEmpty()): ?>
+    <p class="alert"><?= t('No users found.') ?></p>
+<?php elseif (! $paginator->isEmpty()): ?>
+    <div class="table-list">
+        <?= $this->render('user_list/header', array('paginator' => $paginator)) ?>
+        <?php foreach ($paginator->getCollection() as $user): ?>
+            <div class="table-list-row table-border-left">
+                <?= $this->render('user_list/user_title', array(
+                    'user' => $user,
+                )) ?>
+
+                <?= $this->render('user_list/user_details', array(
+                    'user' => $user,
+                )) ?>
+
+                <?= $this->render('user_list/user_icons', array(
+                    'user' => $user,
+                )) ?>
+            </div>
+        <?php endforeach ?>
+    </div>
+
+    <?= $paginator ?>
+<?php endif ?>
diff --git a/app/Template/user_list/show.php b/app/Template/user_list/show.php
deleted file mode 100644
index b881837a..00000000
--- a/app/Template/user_list/show.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<section id="main">
-    <div class="page-header">
-        <?php if ($this->user->hasAccess('UserCreationController', 'show')): ?>
-        <ul>
-            <li>
-                <?= $this->modal->medium('plus', t('New user'), 'UserCreationController', 'show') ?>
-            </li>
-            <li>
-                <?= $this->modal->medium('paper-plane', t('Invite people'), 'UserInviteController', 'show') ?>
-            </li>
-            <li>
-                <?= $this->modal->medium('upload', t('Import'), 'UserImportController', 'show') ?>
-            </li>
-            <li>
-                <?= $this->url->icon('users', t('View all groups'), 'GroupListController', 'index') ?>
-            </li>
-        </ul>
-        <?php endif ?>
-    </div>
-    <?php if ($paginator->isEmpty()): ?>
-        <p class="alert"><?= t('No user') ?></p>
-    <?php else: ?>
-        <table class="table-scrolling table-striped table-hover">
-            <tr>
-                <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
-                <th class="column-18"><?= $paginator->order(t('Username'), 'username') ?></th>
-                <th class="column-18"><?= $paginator->order(t('Name'), 'name') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Email'), 'email') ?></th>
-                <th class="column-15"><?= $paginator->order(t('Role'), 'role') ?></th>
-                <th class="column-12"><?= $paginator->order(t('Two Factor'), 'twofactor_activated') ?></th>
-                <th class="column-10"><?= $paginator->order(t('Account type'), 'is_ldap_user') ?></th>
-                <th class="column-12"><?= $paginator->order(t('Status'), 'is_active') ?></th>
-            </tr>
-            <?php foreach ($paginator->getCollection() as $user): ?>
-            <tr>
-                <td>
-                    <?= $this->render('user_list/dropdown', array('user' => $user)) ?>
-                </td>
-                <td>
-                    <?= $this->url->link($this->text->e($user['username']), 'UserViewController', 'show', array('user_id' => $user['id'])) ?>
-                </td>
-                <td>
-                    <?= $this->text->e($user['name']) ?>
-                </td>
-                <td>
-                    <a href="mailto:<?= $this->text->e($user['email']) ?>"><?= $this->text->e($user['email']) ?></a>
-                </td>
-                <td>
-                    <?= $this->user->getRoleName($user['role']) ?>
-                </td>
-                <td>
-                    <?= $user['twofactor_activated'] ? t('Yes') : t('No') ?>
-                </td>
-                <td>
-                    <?= $user['is_ldap_user'] ? t('Remote') : t('Local') ?>
-                </td>
-                <td>
-                    <?php if ($user['is_active'] == 1): ?>
-                        <?= t('Active') ?>
-                    <?php else: ?>
-                        <?= t('Inactive') ?>
-                    <?php endif ?>
-                </td>
-            </tr>
-            <?php endforeach ?>
-        </table>
-
-        <?= $paginator ?>
-    <?php endif ?>
-</section>
diff --git a/app/Template/user_list/sort_menu.php b/app/Template/user_list/sort_menu.php
new file mode 100644
index 00000000..250832f3
--- /dev/null
+++ b/app/Template/user_list/sort_menu.php
@@ -0,0 +1,29 @@
+<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('User ID'), \Kanboard\Model\UserModel::TABLE.'.id') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Username'), \Kanboard\Model\UserModel::TABLE.'.username') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Name'), \Kanboard\Model\UserModel::TABLE.'.name') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Email'), \Kanboard\Model\UserModel::TABLE.'.email') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Account type'), \Kanboard\Model\UserModel::TABLE.'.is_ldap_user') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Role'), \Kanboard\Model\UserModel::TABLE.'.role') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Two Factor'), \Kanboard\Model\UserModel::TABLE.'.twofactor_activated') ?>
+        </li>
+        <li>
+            <?= $paginator->order(t('Status'), \Kanboard\Model\UserModel::TABLE.'.is_active') ?>
+        </li>
+    </ul>
+</div>
diff --git a/app/Template/user_list/user_details.php b/app/Template/user_list/user_details.php
new file mode 100644
index 00000000..8fc5e485
--- /dev/null
+++ b/app/Template/user_list/user_details.php
@@ -0,0 +1,13 @@
+<div class="table-list-details table-list-details-with-icons">
+    <span class="table-list-category">
+        <?= $this->user->getRoleName($user['role']) ?>
+    </span>
+
+    <?php if (! empty($user['name'])): ?>
+        <span><?= $this->text->e($user['username']) ?></span>
+    <?php endif ?>
+
+    <?php if (! empty($user['email'])): ?>
+        <span><a href="mailto:<?= $this->text->e($user['email']) ?>"><?= $this->text->e($user['email']) ?></a></span>
+    <?php endif ?>
+</div>
diff --git a/app/Template/user_list/user_icons.php b/app/Template/user_list/user_icons.php
new file mode 100644
index 00000000..532526bb
--- /dev/null
+++ b/app/Template/user_list/user_icons.php
@@ -0,0 +1,55 @@
+<div class="table-list-icons">
+    <?php if ($user['notifications_enabled'] == 1): ?>
+        <span title="<?= t('Notifications are activated') ?>">
+            <i class="fa fa-bell-o" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['notifications_enabled'] == 0): ?>
+        <span title="<?= t('Notifications are disabled') ?>">
+            <i class="fa fa-bell-slash-o" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['twofactor_activated'] == 1): ?>
+        <span title="<?= t('Two factor authentication enabled') ?>">
+            <i class="fa fa-key" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['is_ldap_user'] == 1): ?>
+        <span title="<?= t('Remote user') ?>">
+            <i class="fa fa-cloud" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['lock_expiration_date'] != 0): ?>
+        <span title="<?= t('Account locked until:') ?> <?= $this->dt->datetime($user['lock_expiration_date']) ?>">
+            <i class="fa fa-lock" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['role'] == 'app-admin'): ?>
+        <span title="<?= $this->user->getRoleName($user['role']) ?>">
+            <i class="fa fa-star" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['role'] == 'app-manager'): ?>
+        <span title="<?= $this->user->getRoleName($user['role']) ?>">
+            <i class="fa fa-star-half-o" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['role'] == 'app-user'): ?>
+        <span title="<?= $this->user->getRoleName($user['role']) ?>">
+            <i class="fa fa-star-o" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+
+    <?php if ($user['is_active'] == 0): ?>
+        <span title="<?= t('User disabled') ?>">
+            <i class="fa fa-ban" aria-hidden="true"></i>
+        </span>
+    <?php endif ?>
+</div>
\ No newline at end of file
diff --git a/app/Template/user_list/user_title.php b/app/Template/user_list/user_title.php
new file mode 100644
index 00000000..02a065c7
--- /dev/null
+++ b/app/Template/user_list/user_title.php
@@ -0,0 +1,14 @@
+<div>
+    <?= $this->render('user_list/dropdown', array('user' => $user)) ?>
+    <span class="table-list-title <?= $user['is_active'] == 0 ? 'status-closed' : '' ?>">
+        <?= $this->avatar->small(
+            $user['id'],
+            $user['username'],
+            $user['name'],
+            $user['email'],
+            $user['avatar_path'],
+            'avatar-inline'
+        ) ?>
+        <?= $this->url->link($this->text->e($user['name'] ?: $user['username']), 'UserViewController', 'show', array('user_id' => $user['id'])) ?>
+    </span>
+</div>