Merge branch 'temp8-4682-ui-selection-of-users-and-user-groups' into v8/dev

src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less

@@ -28,6 +28,7 @@
     padding-left: 10px;
     padding-right: 10px;
     background-color: @pinkLight;
+    border-color: @pinkLight;
     border-radius: 3px;
 }
 

src/Umbraco.Web.UI.Client/src/less/components/umb-checkmark.less

@@ -2,19 +2,21 @@
     border: 2px solid @white;
     width: 25px;
     height: 25px;
-    background: @gray-7;
-    border-radius: 50%;
+    border: 1px solid @gray-7;
+    border-radius: 3px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: @white;
+    color: @gray-7;
     cursor: pointer;
     font-size: 15px;
 }
 
 .umb-checkmark--checked {
-    background: @green;
+    background: @ui-active;
+    border-color: @ui-active;
+    color: @white;
 }
 
 .umb-checkmark--xs {

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

@@ -136,9 +136,14 @@ input.umb-table__input {
 }
 
 .umb-table-body__link {
+    
+    color: @ui-option-type;
+    font-size: 14px;
+    font-weight: bold;
     text-decoration: none;
-
-    &:hover {
+    
+    &:hover, &:focus {
+        color: @ui-option-type-hover;
         text-decoration: underline;
     }
 }
@@ -259,6 +264,15 @@ input.umb-table__input {
     flex: 0 0 auto !important;
 }
 
+.umb-table-cell--small {
+    flex: .5 .5 1%;
+    max-width: 12.5%;
+}
+.umb-table-cell--large {
+    flex: 1 1 25%;
+    max-width: 25%;
+}
+
 .umb-table-cell--faded {
     opacity: 0.4;
 }

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

@@ -3,6 +3,10 @@
     .umb-user-table-col-avatar {
         flex: 0 0 32px;
         padding: 15px 0;
+        
+        .umb-checkmark {
+            margin-left:5px;
+        }
     }
     
     .umb-table-cell a {
@@ -14,15 +18,8 @@
     }
     
     .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 {

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

@@ -1,15 +1,16 @@
 (function () {
     "use strict";
 
-    function UserGroupsController($scope, $timeout, $location, userService, userGroupsResource, formHelper, localizationService) {
+    function UserGroupsController($scope, $timeout, $location, userService, userGroupsResource, 
+        formHelper, localizationService, listViewHelper) {
 
         var vm = this;
 
         vm.userGroups = [];
         vm.selection = [];
 
+        vm.clickUserGroupName = clickUserGroupName;
         vm.createUserGroup = createUserGroup;
-        vm.goToUserGroup = goToUserGroup;
         vm.clearSelection = clearSelection;
         vm.selectUserGroup = selectUserGroup;
         vm.deleteUserGroups = deleteUserGroups;
@@ -27,7 +28,8 @@
 
                     // only allow editing and selection if user is member of the group or admin
                     vm.userGroups = _.map(userGroups, function (ug) {
-                        return { group: ug, hasAccess: user.userGroups.indexOf(ug.alias) !== -1 || user.userGroups.indexOf("admin") !== -1}
+                        ug.hasAccess = user.userGroups.indexOf(ug.alias) !== -1 || user.userGroups.indexOf("admin") !== -1;
+                        return ug;
                     });
 
                     vm.loading = false;
@@ -42,36 +44,48 @@
             // go to create user group
             $location.path('users/users/group/-1').search("create", "true");;
         }
-
-        function goToUserGroup(userGroup) {
+        
+        function goToUserGroup(userGroup, $event) {
+            
             // only allow editing if user is member of the group or admin
-            if (currentUser.userGroups.indexOf(userGroup.group.alias) === -1 && currentUser.userGroups.indexOf("admin") === -1) {
+            if (currentUser.userGroups.indexOf(userGroup.alias) === -1 && currentUser.userGroups.indexOf("admin") === -1) {
                 return;
             }
-            $location.path('users/users/group/' + userGroup.group.id).search("create", null);
+            $location.path(getEditPath(userGroup)).search("create", null);
+        }
+        
+        function clickUserGroupName(item, $event) {
+           if(!($event.metaKey || $event.ctrlKey)) {
+              goToUserGroup(item, $event);
+              $event.preventDefault();
+           }
+           $event.stopPropagation();
+        };
+        
+        function getEditPath(userGroup) {
+            
+            // only allow editing if user is member of the group or admin
+            if (currentUser.userGroups.indexOf(userGroup.alias) === -1 && currentUser.userGroups.indexOf("admin") === -1) {
+                return "";
+            }
+            
+            return 'users/users/group/' + userGroup.id;
         }
 
-        function selectUserGroup(userGroup, selection, event) {
-
+        function selectUserGroup(userGroup, $index, $event) {
+            
             // Only allow selection if user is member of the group or admin
-            if (currentUser.userGroups.indexOf(userGroup.group.alias) === -1 && currentUser.userGroups.indexOf("admin") === -1) {
+            if (currentUser.userGroups.indexOf(userGroup.alias) === -1 && currentUser.userGroups.indexOf("admin") === -1) {
                 return;
             }
             // Disallow selection of the admin/translators group, the checkbox is not visible in the UI, but clicking(and thus selecting) is still possible.
             // Currently selection can only be used for deleting, and the Controller will also disallow deleting the admin group.
-            if (userGroup.group.alias === "admin" || userGroup.group.alias === "translator")
+            if (userGroup.alias === "admin" || userGroup.alias === "translator")
                 return;
-
-            if (userGroup.selected) {
-                var index = selection.indexOf(userGroup.group.id);
-                selection.splice(index, 1);
-                userGroup.selected = false;
-            } else {
-                userGroup.selected = true;
-                vm.selection.push(userGroup.group.id);
-            }
-
-            if(event){
+            
+            listViewHelper.selectHandler(userGroup, $index, vm.userGroups, vm.selection, $event);
+            
+            if(event) {
                 event.stopPropagation();
             }
         }

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

@@ -70,38 +70,53 @@
         </div>
     </div>
 
-    <table class="table table-hover" ng-if="!vm.loading">
-        <thead>
-            <tr>
-                <th style="width: 20px; padding-right: 5px"></th>
-                <th>Group</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-repeat="group in vm.userGroups | filter:vm.filter"
-                ng-click="vm.goToUserGroup(group)"
-                ng-class="{'cursor-pointer': group.hasAccess, 'cursor-not-allowed': !group.hasAccess, '--selected': group.selected}">
+    <div class="umb-table" ng-if="!vm.loading">
 
-                <td style="padding-right: 5px">
-                    <input
-                        ng-show="group.hasAccess && group.group.alias !== 'admin' && group.group.alias !== 'translator'"
-                        type="checkbox"
-                        ng-model="group.selected"
-                        ng-click="vm.selectUserGroup(group, vm.selection, $event)"
-                        style="width: 20px; height: 100px;"/>
-                </td>
-                <td>
-                    <umb-user-group-preview
-                        style="border-bottom: none; margin-bottom: 0; padding: 0;"
-                        icon="group.group.icon"
-                        name="group.group.name"
-                        sections="group.group.sections"
-                        content-start-node="group.group.contentStartNode"
-                        media-start-node="group.group.mediaStartNode">
-                    </umb-user-group-preview>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+        <div class="umb-table-head">
+            <div class="umb-table-row">
+                <div class="umb-table-cell"></div>
+                <div class="umb-table-cell"><localize key="general_name">Name</localize></div>
+                <div class="umb-table-cell"><localize key="main_sections">Sections</localize></div>
+                <div class="umb-table-cell umb-table-cell--small"><localize key="user_startnode">Content start node</localize></div>
+                <div class="umb-table-cell umb-table-cell--small"><localize key="user_mediastartnode">Media start node</localize></div>
+            </div>
+        </div>
+
+        <div class="umb-table-body">
+            <div class="umb-table-row"
+                ng-repeat="group in vm.userGroups | filter:vm.filter track by $index"
+                ng-click="vm.selectUserGroup(group, $index, $event)"
+                ng-class="{'-selected': group.selected, '-selectable': group.hasAccess && group.alias !== 'admin' && group.alias !== 'translator'}">
+
+                <div class="umb-table-cell">
+                    <i ng-if="group.icon" class="umb-table-body__icon umb-table-body__fileicon {{ group.icon }}"></i>
+                    <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
+                </div>
+                <div class="umb-table-cell">
+                    <a
+                        class="umb-table-body__link"
+                        ng-class="{'cursor-pointer': group.hasAccess, 'cursor-not-allowed': !group.hasAccess}"
+                        ng-click="vm.clickUserGroupName(group, $event)"
+                        ng-href="#{{::vm.getEditPath(group)}}"
+                        ng-bind="group.name">
+                    </a>
+                </div>
+                <div class="umb-table-cell">
+                    <div>
+                        <span ng-repeat="section in group.sections">{{ section.name }}<span ng-if="!$last">, </span></span>
+                        <span ng-if="group.sections.length === 0">All sections</span>
+                    </div>
+                </div>
+                <div class="umb-table-cell umb-table-cell--small">
+                    <span ng-if="!group.contentStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
+                    <span ng-if="group.contentStartNode">{{ group.contentStartNode.name }}</span>
+                </div>
+                <div class="umb-table-cell umb-table-cell--small">
+                    <span ng-if="!group.mediaStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
+                    <span ng-if="group.mediaStartNode">{{ group.mediaStartNode.name }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
 
 </div>

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

@@ -218,12 +218,11 @@
             <div class="umb-table umb-user-table" ng-class="{'-has-selection': vm.selection.length > 0}">
                 <div class="umb-table-head">
                     <div class="umb-table-row">
-                        <div class="umb-table-cell" style="padding-left: 10px; width: 10px;">
+                        <div class="umb-table-cell umb-user-table-col-avatar not-fixed" style="width: 70px; padding:10px 15px;">
                             <a href="" style="text-decoration: none;" ng-click="vm.selectAll()">
                                 <umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark>
                             </a>
                         </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>
@@ -235,15 +234,7 @@
                         ng-click="vm.selectUser(user, vm.selection, $event)"
                         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
-                                    checked="user.selected"
-                                    size="xs">
-                                </umb-checkmark>
-                            </div>
-                        </div>
-                        <div class="umb-table-cell umb-user-table-col-avatar" scope="row">
+                        <div class="umb-table-cell umb-user-table-col-avatar not-fixed" scope="row" style="width: 70px; padding:10px 15px;">
                             <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
                                 <umb-avatar
                                     size="xs"
@@ -255,13 +246,13 @@
                             </a>
                         </div>
                         <div class="umb-table-cell umb-table__name">
-                            <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
-                                <span>
-                                    {{user.name}}
-                                </span>
+                            <a class="umb-table-body__link"
+                               ng-click="vm.clickUser(user, $event)"
+                               ng-href="#{{::vm.getEditPath(user)}}"
+                               ng-bind="user.name">
                             </a>
                         </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"><div><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></div></div>
                         <div class="umb-table-cell">{{ user.formattedLastLogin }}</div>
                         <div class="umb-table-cell" style="text-transform: capitalize;">
                             <umb-badge