users overview tlc + cleanup. Changed click to open instead of select

2017-06-21 15:40:52 +02:00
parent bd7aba5ea2
commit f27b456eb4
5 changed files with 70 additions and 42 deletions
--- 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";
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.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;
--- 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 */
--- 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() {
--- 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;">