visual corrections + remember view layout in a cookie

src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less

@@ -1,27 +1,73 @@
-.umb-user-table-col-avatar {
-    flex: 0 0 32px;
-    padding: 15px 0;
-}
+.umb-user-table {
 
-.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;
+    .umb-user-table-col-avatar {
+        flex: 0 0 32px;
+        padding: 15px 0;
     }
+    
+    .umb-table-cell a {
+        &:hover, &:focus {
+            .umb-avatar {
+                border: 1px solid @ui-option-type-hover;
+            }
+        }
+    }
+    
+    .umb-table-body .umb-table-cell.umb-table__name {
+        margin: 0;
+        padding: 0;
+        a {
+            display: flex;
+            padding: 6px 2px;
+            height: 42px;
+            span {
+                margin: auto 14px;
+            }
+        }
+    }
+    .umb-table-cell.umb-table__name a {
+        &:hover, &:focus {
+            text-decoration: underline;
+        }
+    }
+    
+    .umb-user-table-row {
+        cursor: default;
+        .umb-checkmark {
+            visibility: hidden;
+        }
+    }
+
+    .umb-user-table-row.-selectable {
+        cursor: pointer;
+        
+        
+    }
+    
+    .umb-user-table-row.-selectable:hover {
+        .umb-checkmark {
+            visibility: visible;
+        }
+    }
+    
+    .umb-user-table-row.-selected {
+        
+        .umb-checkmark {
+            visibility: visible;
+        }
+        
+        &::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;
+        }
+    }
+    
 }

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js

@@ -1,7 +1,9 @@
 (function () {
     "use strict";
 
-    function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, usersHelper, formHelper, dateHelper, editorService) {
+    function UsersController($scope, $timeout, $location, $routeParams, usersResource, 
+        userGroupsResource, userService, localizationService, usersHelper, formHelper, 
+        dateHelper, editorService, $cookies) {
 
         var vm = this;
         var localizeSaving = localizationService.localize("general_saving");
@@ -63,10 +65,18 @@
                 "selected": true
             }
         ];
-
-        // Set card layout to active by default
-        vm.activeLayout = vm.layouts[0];
-
+        
+        var cookieUmbUserLayout = $cookies.get("umbUserLayout");
+        
+        if (cookieUmbUserLayout) {
+            vm.activeLayout = vm.layouts.find(x => x.path === cookieUmbUserLayout);
+        }
+        if (vm.activeLayout === undefined) {
+            // Set card layout to active by default
+            vm.activeLayout = vm.layouts[0];
+        }
+        
+        
         // Don't show the invite button if no email is configured
         if (Umbraco.Sys.ServerVariables.umbracoSettings.showUserInvite) {
             vm.defaultButton = {
@@ -100,6 +110,7 @@
         vm.selectUser = selectUser;
         vm.clearSelection = clearSelection;
         vm.clickUser = clickUser;
+        vm.getEditPath = getEditPath;
         vm.disableUsers = disableUsers;
         vm.enableUsers = enableUsers;
         vm.unlockUsers = unlockUsers;
@@ -200,6 +211,10 @@
             });
             selectedLayout.active = true;
             vm.activeLayout = selectedLayout;
+            
+            var expireDate = new Date();
+            expireDate.setDate(expireDate.getDate() + 365);
+            $cookies.put("umbUserLayout", selectedLayout.path, {path: "/", expires: expireDate});
         }
         
         function isSelectable(user) {
@@ -574,15 +589,15 @@
         }
 
         function goToUser(user) {
-            $location.path(pathToUser(user.id).search("create", null).search("invite", null));
+            $location.path(pathToUser(user)).search("create", null).search("invite", null);
         }
         
         function getEditPath(user) {
-            return pathToUser(userId) + "?mculture=" + $location.search().mculture;
+            return pathToUser(user) + "?mculture=" + $location.search().mculture;
         }
         
-        function pathToUser(userId) {
-            return "/users/users/user/" + userId;
+        function pathToUser(user) {
+            return "/users/users/user/" + user.id;
         }
 
         // helpers

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html

@@ -226,7 +226,7 @@
         <!-- Layout: Table -->
         <div ng-if="vm.activeLayout.path === '2'">
 
-            <div class="umb-table">
+            <div class="umb-table umb-user-table">
                 <div class="umb-table-head">
                     <div class="umb-table-row">
                         <div class="umb-table-cell" style="padding-left: 10px; width: 10px;">
@@ -267,7 +267,9 @@
                         </div>
                         <div class="umb-table-cell umb-table__name">
                             <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
-                                {{user.name}}
+                                <span>
+                                    {{user.name}}
+                                </span>
                             </a>
                         </div>
                         <div class="umb-table-cell"><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></div>