From 4b02bf2ddf41e691dff97309ff64076c70afe031 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Tue, 19 Mar 2019 10:55:36 +0100
Subject: [PATCH] use umb-table for users table

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../less/components/users/umb-user-table.less | 27 ++++++++
 .../src/views/users/views/users/users.html    | 61 +++++++++----------
 3 files changed, 57 insertions(+), 32 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 88988485fe..8c0df988d1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -167,6 +167,7 @@
 @import "components/umb-property-file-upload.less";
 
 @import "components/users/umb-user-cards.less";
+@import "components/users/umb-user-table.less";
 @import "components/users/umb-user-details.less";
 @import "components/users/umb-user-group-picker-list.less";
 @import "components/users/umb-user-group-preview.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less
new file mode 100644
index 0000000000..fcbefa934c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less
@@ -0,0 +1,27 @@
+.umb-user-table-col-avatar {
+    flex: 0 0 32px;
+    padding: 15px 0;
+}
+
+.umb-user-table-row {
+    cursor: default;
+}
+
+.umb-user-table-row.-selectable {
+    cursor: pointer;
+}
+.umb-user-table-row.-selected {
+    
+    &::before {
+        content: "";
+        position: absolute;
+        z-index:1;
+        top: 1px;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        border: 2px solid @ui-selected-border;
+        box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%);
+        pointer-events: none;
+    }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index 27c8c295ab..2d5c38da0f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -226,38 +226,35 @@
         <!-- Layout: Table -->
         <div ng-if="vm.activeLayout.path === '2'">
 
-            <table class="table table-hover">
-                <thead>
-                    <tr>
-                        <th style="padding-left: 10px; width: 10px;">
+            <div class="umb-table">
+                <div class="umb-table-head">
+                    <div class="umb-table-row">
+                        <div class="umb-table-cell" style="padding-left: 10px; width: 10px;">
                             <a href="" style="text-decoration: none;" ng-click="vm.selectAll()">
                                 <umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark>
                             </a>
-                        </th>
-                        <th style="width: 70px;"></th>
-                        <th><localize key="general_name">Name</localize></th>
-                        <th><localize key="user_usergroup">User group</localize></th>
-                        <th><localize key="user_lastLogin">Last login</localize></th>
-                        <th><localize key="general_status">Status</localize></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr ng-repeat="user in vm.users track by user.key"
+                        </div>
+                        <div class="umb-table-cell umb-user-table-col-avatar" style="width: 70px;"></div>
+                        <div class="umb-table-cell umb-table__name"><localize key="general_name">Name</localize></div>
+                        <div class="umb-table-cell"><localize key="user_usergroup">User group</localize></div>
+                        <div class="umb-table-cell"><localize key="user_lastLogin">Last login</localize></div>
+                        <div class="umb-table-cell"><localize key="general_status">Status</localize></div>
+                    </div>
+                </div>
+                <div class="umb-table-body">
+                    <div ng-repeat="user in vm.users track by user.key"
                         ng-click="vm.selectUser(user, vm.selection, $event)"
-                         ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
-                        style="cursor: pointer;"
-                        ng-mouseenter="user.hover = true"
-                        ng-mouseleave="user.hover = false">
-                        <td style="padding-left: 10px;">
+                        ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
+                        class="umb-table-row umb-user-table-row">
+                        <div class="umb-table-cell" style="padding-left: 10px;">
                             <div ng-if="!user.isCurrentUser">
                                 <umb-checkmark
-                                    ng-if="vm.selection.length > 0 || user.hover"
                                     checked="user.selected"
                                     size="xs">
                                 </umb-checkmark>
                             </div>
-                        </td>
-                        <td scope="row">
+                        </div>
+                        <div class="umb-table-cell umb-user-table-col-avatar" scope="row">
                             <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
                                 <umb-avatar
                                     size="xs"
@@ -267,25 +264,25 @@
                                     img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
                                 </umb-avatar>
                             </a>
-                        </td>
-                        <td class="bold">
+                        </div>
+                        <div class="umb-table-cell umb-table__name">
                             <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
                                 {{user.name}}
                             </a>
-                        </td>
-                        <td><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></td>
-                        <td>{{ user.formattedLastLogin }}</td>
-                        <td style="text-transform: capitalize;">
+                        </div>
+                        <div class="umb-table-cell"><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></div>
+                        <div class="umb-table-cell">{{ user.formattedLastLogin }}</div>
+                        <div class="umb-table-cell" style="text-transform: capitalize;">
                             <umb-badge
                                 size="xs"
                                 ng-if="user.userDisplayState.key !== 'Active'"
                                 color="{{user.userDisplayState.color}}">
                                 {{ user.userDisplayState.name }}
                             </umb-badge>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
         </div>