From f27b456eb4ef348807dae2d09bda8d7b371b8bd6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 21 Jun 2017 15:40:52 +0200
Subject: [PATCH] users overview tlc + cleanup. Changed click to open instead
 of select

---
 src/Umbraco.Web.UI.Client/src/less/belle.less |  2 +-
 .../{umb-users.less => umb-user-cards.less}   | 49 +++++++++++--------
 src/Umbraco.Web.UI.Client/src/less/main.less  |  2 +
 .../users/views/users/users.controller.js     | 19 +++++--
 .../src/views/users/views/users/users.html    | 40 ++++++++-------
 5 files changed, 70 insertions(+), 42 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/less/components/users/{umb-users.less => umb-user-cards.less} (69%)

diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index c9c6264af8..54d662f5d8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,7 +135,7 @@
 @import "components/umb-node-preview.less";
 @import "components/umb-mini-editor.less";
 
-@import "components/users/umb-users.less";
+@import "components/users/umb-user-cards.less";
 @import "components/users/umb-user-group-picker-list.less";
 @import "components/users/umb-user-group-preview.less";
 @import "components/users/umb-user-preview.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
similarity index 69%
rename from src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
rename to src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
index b89c6a8a4c..40a85bec71 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
@@ -1,11 +1,11 @@
-.umb-users {
+.umb-user-cards {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin: -10px;
 }
 
-.umb-user {
+.umb-user-card {
     padding: 10px;
     box-sizing: border-box;
     flex: 0 0 100%;
@@ -13,29 +13,35 @@
     display: flex;
 }
 
+.umb-user-card:hover,
+.umb-user-card:focus {
+    outline: none;
+    text-decoration: none !important;
+}
+
 @media (min-width: 768px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 50%;
         max-width: 50%;
     }
 }
 
 @media (min-width: 1200px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 33.33%;
         max-width: 33.33%;
     }
 }
 
 @media (min-width: 1400px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 25%;
         max-width: 25%;
     }
 }
 
 @media (min-width: 1700px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 20%;
         max-width: 20%;
     }
@@ -43,20 +49,20 @@
 
 
 @media (min-width: 1900px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 16.66%;
         max-width: 16.66%;
     }
 }
 
 @media (min-width: 2200px) {
-    .umb-user {
+    .umb-user-card {
         flex: 0 0 14.28%;
         max-width: 14.28%;
     }
 }
 
-.umb-user__content {
+.umb-user-card__content {
     position: relative;
     padding: 15px;
     flex: 1 1 auto;
@@ -70,27 +76,24 @@
     max-width: 100%;
 }
 
-.umb-user__content--selected {
+.umb-user-card__content:hover,
+.umb-user-card:focus .umb-user-card__content {
     border-color: @turquoise;
 }
 
-.umb-user__content:hover {
-    border-color: @turquoise;
-}
-
-.umb-user__avatar {
+.umb-user-card__avatar {
     margin-bottom: 10px;
     margin-left: auto;
     margin-right: auto;
 }
 
-.umb-user__badge {
+.umb-user-card__badge {
     position: absolute;
     top: 10px;
     left: 10px;
 }
 
-.umb-user__name {
+.umb-user-card__name {
     font-size: 15px;
     font-weight: bold;
     text-align: center;
@@ -98,19 +101,25 @@
     word-wrap: break-word; 
 }
 
-.umb-user__checkmark {
+.umb-user-card__checkmark {
     position: absolute;
     top: 10px;
     right: 10px;
+    display: none;
 }
 
-.umb-user__group {
+.umb-user-card:hover .umb-user-card__checkmark,
+.umb-user-card__checkmark--visible {
+    display: block;
+}
+
+.umb-user-card__group {
     font-size: 14px;
     text-align: center;
     margin-bottom: 15px;
 }
 
-.umb-user__last-login {
+.umb-user-card__last-login {
     font-size: 13px;
     text-align: center;
     margin-top: auto;
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 32426ff263..484d05f013 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -123,6 +123,8 @@ h5.-black {
 .block-form .umb-control-group label .help-block, 
 .block-form .umb-control-group label small {
   font-size: 13px;
+  padding-top: 2px;
+  margin-bottom: 5px;
 }
 
 /*COMPACT MODE */
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
index f4dac77845..a0c2f60909 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -68,7 +68,7 @@
         vm.selectLayout = selectLayout;
         vm.selectUser = selectUser;
         vm.clearSelection = clearSelection;
-        vm.goToUser = goToUser;
+        vm.clickUser = clickUser;
         vm.disableUsers = disableUsers;
         vm.enableUsers = enableUsers;
         vm.openUserGroupPicker = openUserGroupPicker;
@@ -118,7 +118,8 @@
             vm.activeLayout = selectedLayout;
         }
 
-        function selectUser(user, selection) {
+        function selectUser(user, selection, event) {
+            
             if (user.selected) {
                 var index = selection.indexOf(user.id);
                 selection.splice(index, 1);
@@ -127,7 +128,13 @@
                 user.selected = true;
                 vm.selection.push(user.id);
             }
+            
             setBulkActions(vm.users);
+
+            if(event){
+                event.preventDefault();
+                event.stopPropagation();
+            }
         }
 
         function clearSelection() {
@@ -137,8 +144,12 @@
             vm.selection = [];
         }
 
-        function goToUser(user) {
-            $location.path('users/users/user/' + user.id);
+        function clickUser(user) {
+            if(vm.selection.length > 0) {
+                selectUser(user, vm.selection);
+            } else {
+                $location.path('users/users/user/' + user.id);
+            }
         }
 
         function disableUsers() {
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 ab74908cd1..5b126b1902 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
@@ -159,16 +159,16 @@
     </umb-empty-state>
 
     <!-- Layout: Cards -->
-    <div class="umb-users" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
-      <div class="umb-user" ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)">
-        <div class="umb-user__content" ng-class="{'umb-user__content--selected': user.selected}">
-          <umb-badge class="umb-user__badge"
+    <div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
+      <a href="" class="umb-user-card" ng-repeat="user in vm.users" ng-click="vm.clickUser(user)">
+        <div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
+          <umb-badge class="umb-user-card__badge"
                      size="xs"
                      ng-if="user.userDisplayState.alias !== 'active'"
                      color="{{user.userDisplayState.color}}">
             {{ user.userDisplayState.name }}
           </umb-badge>
-          <div class="umb-user__avatar">
+          <div class="umb-user-card__avatar">
             <umb-avatar size="l"
                         color="secondary"
                         name="{{user.name}}"
@@ -176,12 +176,14 @@
                         img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
             </umb-avatar>
           </div>
-          <div class="umb-user__checkmark" ng-if="user.selected"><umb-checkmark checked="user.selected" size="s"></umb-checkmark></div>
-          <a class="umb-user__name" href="" ng-click="vm.goToUser(user)">{{user.name}}</a>
-          <div class="umb-user__group">
+          <div class="umb-user-card__checkmark" ng-class="{'umb-user-card__checkmark--visible': user.selected || vm.selection.length > 0 }" ng-click="vm.selectUser(user, vm.selection, $event)">
+            <umb-checkmark checked="user.selected" size="s"></umb-checkmark>
+          </div>
+          <div class="umb-user-card__name" href="">{{user.name}}</div>
+          <div class="umb-user-card__group">
             <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
           </div>
-          <div class="umb-user__last-login">
+          <div class="umb-user-card__last-login">
             <div ng-if="user.formattedLastLogin">
               <div>Last login on</div>
               {{ user.formattedLastLogin }}
@@ -192,7 +194,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </a>
     </div>
 
     <!-- Layout: Table -->
@@ -201,7 +203,7 @@
       <table class="table">
         <thead>
           <tr>
-            <th style="padding-left: 20px; width: 10px;">
+            <th 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>
@@ -212,13 +214,17 @@
           </tr>
         </thead>
         <tbody>
-          <tr ng-repeat="user in vm.users" ng-click="vm.selectUser(user, vm.selection)" style="cursor: pointer;">
-            <td style="padding-left: 20px;">
-              <umb-checkmark checked="user.selected"
-                             size="xs">
+          <tr ng-repeat="user in vm.users" ng-click="vm.clickUser(user)" style="cursor: pointer;" ng-mouseenter="user.hover = true" ng-mouseleave="user.hover = false">
+            <td style="padding-left: 10px;">
+              <div ng-click="vm.selectUser(user, vm.selection, $event)">
+              <umb-checkmark
+                ng-if="vm.selection.length > 0 || user.hover"
+                checked="user.selected"
+                size="xs">
               </umb-checkmark>
+              </div>
             </td>
-            <td scope="row" style="padding-left: 20px;">
+            <td scope="row">
               <umb-avatar size="xs"
                           color="secondary"
                           name="{{user.name}}"
@@ -226,7 +232,7 @@
                           img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
               </umb-avatar>
             </td>
-            <td class="bold"><a href="" ng-click="vm.goToUser(user)">{{user.name}}</a></td>
+            <td class="bold">{{user.name}}</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;">