From ef20deb9cb8b864bf3bb5ff6b2358646d406b1fa Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 27 Jul 2017 14:55:23 +0200
Subject: [PATCH] fixes: U4-10202 Make it more obvious when no content or media
 start nodes are selected the user has access to the root node.

---
 .../src/less/components/umb-node-preview.less |  1 +
 .../users/umb-user-group-preview.less         |  3 +-
 .../components/users/umb-user-preview.less    |  2 +-
 .../usergrouppicker/usergrouppicker.html      |  3 +-
 .../users/umb-user-group-preview.html         |  8 +--
 .../src/views/users/group.controller.js       |  3 +
 .../src/views/users/group.html                | 30 +++++----
 .../src/views/users/user.controller.js        | 22 ++++---
 .../src/views/users/user.html                 | 64 +++++++++++++------
 9 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
index ed3bd04f8d..37bf1caec2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
@@ -8,6 +8,7 @@
 
 .umb-node-preview:last-of-type {
     border-bottom: none;
+    margin-bottom: 7px;
 }
 
 .umb-node-preview--sortable {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-preview.less
index 5437c88eb9..f39096b565 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-group-preview.less
@@ -8,7 +8,7 @@
 
 .umb-user-group-preview:last-of-type {
     border-bottom: none;
-    margin-bottom: 5px;
+    margin-bottom: 10px;
 }
 
 .umb-user-group-preview__icon {
@@ -29,7 +29,6 @@
 
 .umb-user-group-preview__name {
     font-size: 15px;
-    font-weight: bold;
     color: @black;
     margin-bottom: 3px;
     margin-top: 2px;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
index c3284c849b..f62f3afd37 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
@@ -8,7 +8,7 @@
 
 .umb-user-preview:last-of-type {
     border-bottom: none;
-    margin-bottom: 5px;
+    margin-bottom: 7px;
 }
 
 .umb-user-preview__avatar {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html
index 22acac15bf..74ec58c133 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html
@@ -28,11 +28,10 @@
                 <div>
                     <div class="umb-user-group-picker-list-item__name">{{ userGroup.name }}</div>
 
-                    <div class="umb-user-group-picker-list-item__permission">
+                    <div class="umb-user-group-picker-list-item__permission" ng-if="userGroup.sections">
                         <span>
                             <span class="bold">Sections:</span>
                             <span ng-repeat="section in userGroup.sections">{{ section.name }}<span ng-if="!$last">, </span></span>
-                            <span ng-if="userGroup.sections.length === 0">All sections</span>
                         </span>
                     </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
index 7d5238d3a6..f736014772 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-group-preview.html
@@ -16,16 +16,16 @@
         <div class="umb-user-group-preview__permission">
             <span>
                 <span class="bold">Content start node:</span>
-                <span ng-if="contentStartNode != -1">{{ contentStartNode.name }}</span>
-                <span ng-if="contentStartNode == -1">Content root</span>
+                <span ng-if="contentStartNode && contentStartNode != -1">{{ contentStartNode.name }}</span>
+                <span ng-if="contentStartNode == -1 || !contentStartNode">Content Root</span>
             </span>
         </div>
         
         <div class="umb-user-group-preview__permission">
             <span>
                 <span class="bold">Media start node:</span>
-                <span ng-if="mediaStartNode != -1">{{ mediaStartNode.name }}</span>
-                <span ng-if="mediaStartNode == -1">Media root</span>
+                <span ng-if="mediaStartNode && mediaStartNode != -1">{{ mediaStartNode.name }}</span>
+                <span ng-if="mediaStartNode == -1 || !mediaStartNode">Media Root</span>
             </span>
         </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
index 9d58e483e4..01364d29d1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
@@ -7,6 +7,9 @@
         var localizeSaving = localizationService.localize("general_saving");
 
         vm.page = {};
+        vm.page.contentRootLabel = "Content Root";
+        vm.page.mediaRootLabel = "Media Root";
+        vm.page.rootIcon = "icon-folder";
         vm.userGroup = {};
         vm.labels = {};
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.html b/src/Umbraco.Web.UI.Client/src/views/users/group.html
index 2110d8f1f0..bbe2ab9163 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -54,14 +54,15 @@
                                             on-remove="vm.clearStartNode('content')">
                                         </umb-node-preview>
 
-                                        <a href=""
-                                            ng-if="!vm.userGroup.contentStartNode.id"
+                                        <umb-node-preview
+                                            ng-if="!vm.userGroup.contentStartNode"
                                             style="max-width: 100%;"
-                                            class="umb-node-preview-add"
-                                            ng-click="vm.openContentPicker()"
-                                            prevent-default>
-                                            <localize key="general_add">Add</localize>
-                                        </a>
+                                            icon="vm.page.rootIcon"
+                                            name="vm.page.contentRootLabel"
+                                            allow-edit="true"
+                                            on-edit="vm.openContentPicker()">
+                                        </umb-node-preview>
+
                                     </umb-control-group>
 
                                     <umb-control-group label="Media start node" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
@@ -74,14 +75,15 @@
                                             on-remove="vm.clearStartNode('media')">
                                         </umb-node-preview>
 
-                                        <a href=""
-                                            ng-if="!vm.userGroup.mediaStartNode.id"
+                                        <umb-node-preview
+                                            ng-if="!vm.userGroup.mediaStartNode"
                                             style="max-width: 100%;"
-                                            class="umb-node-preview-add"
-                                            ng-click="vm.openMediaPicker()"
-                                            prevent-default>
-                                            <localize key="general_add">Add</localize>
-                                        </a>
+                                            icon="vm.page.rootIcon"
+                                            name="vm.page.mediaRootLabel"
+                                            allow-edit="true"
+                                            on-edit="vm.openMediaPicker()">
+                                        </umb-node-preview>
+
                                     </umb-control-group>
 
                                 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
index e0a3f08b4b..c85915ab67 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
@@ -7,11 +7,23 @@
         var localizeSaving = localizationService.localize("general_saving");
 
         vm.page = {};
+        vm.page.contentRootLabel = "Content Root";
+        vm.page.mediaRootLabel = "Media Root";
+        vm.page.rootIcon = "icon-folder";
         vm.user = {
           changePassword: null
         };
         vm.breadcrumbs = [];
         vm.avatarFile = {};
+        vm.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
+        vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
+        vm.toggleChangePassword = toggleChangePassword;
+        vm.emailIsUsername = true;
+        //create the initial model for change password
+        vm.changePasswordModel = {
+          config: {},
+          isChanging: false
+        };
 
         vm.goToPage = goToPage;
         vm.openUserGroupPicker = openUserGroupPicker;
@@ -22,16 +34,6 @@
         vm.enableUser = enableUser;
         vm.clearAvatar = clearAvatar;
         vm.save = save;
-        vm.maxFileSize = Umbraco.Sys.ServerVariables.umbracoSettings.maxFileSize + "KB";
-        vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
-        vm.toggleChangePassword = toggleChangePassword;
-        vm.emailIsUsername = true;
-
-        //create the initial model for change password
-        vm.changePasswordModel = {
-          config: {},
-          isChanging: false
-        };
 
         function init() {
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 2a87535189..087cbe977b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -66,23 +66,25 @@
                 </div>
               </div>
 
-              <div class="test-group" ng-if="!vm.user.isCurrentUser">
+              <div class="test-group">
                 <div class="test-group-title">Permissions</div>
                 <div class="test-group-content block-form">
 
                   <umb-control-group style="margin-bottom: 25px;" label="Groups" description="Aliquam laoreet metus porta nisi pellentesque">
 
-                    <umb-user-group-preview ng-repeat="userGroup in vm.user.userGroups"
-                                            icon="userGroup.icon"
-                                            name="userGroup.name"
-                                            sections="userGroup.sections"
-                                            content-start-node="userGroup.contentStartNode"
-                                            media-start-node="userGroup.mediaStartNode"
-                                            allow-remove="true"
-                                            on-remove="vm.removeSelectedItem($index, vm.user.userGroups)">
+                    <umb-user-group-preview
+                      ng-repeat="userGroup in vm.user.userGroups"
+                      icon="userGroup.icon"
+                      name="userGroup.name"
+                      sections="userGroup.sections"
+                      content-start-node="userGroup.contentStartNode"
+                      media-start-node="userGroup.mediaStartNode"
+                      allow-remove="!vm.user.isCurrentUser"
+                      on-remove="vm.removeSelectedItem($index, vm.user.userGroups)">
                     </umb-user-group-preview>
 
                     <a href=""
+                       ng-if="!vm.user.isCurrentUser"
                        style="max-width: 100%;"
                        class="umb-node-preview-add"
                        ng-click="vm.openUserGroupPicker()"
@@ -94,15 +96,25 @@
 
                   <umb-control-group style="margin-bottom: 25px;" label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
 
-                    <umb-node-preview style="max-width: 100%;"
-                                      ng-repeat="node in vm.user.startContentIds"
-                                      icon="node.icon"
-                                      name="node.name"
-                                      allow-remove="true"
-                                      on-remove="vm.removeSelectedItem($index, vm.user.startContentIds)">
+                    <umb-node-preview
+                      style="max-width: 100%;"
+                      ng-repeat="node in vm.user.startContentIds"
+                      icon="node.icon"
+                      name="node.name"
+                      allow-remove="!vm.user.isCurrentUser"
+                      on-remove="vm.removeSelectedItem($index, vm.user.startContentIds)">
+                    </umb-node-preview>
+                    
+                    <umb-node-preview
+                      ng-if="vm.user.startContentIds.length === 0"
+                      style="max-width: 100%;"
+                      icon="vm.page.rootIcon"
+                      name="vm.page.contentRootLabel"
+                      allow-remove="false">
                     </umb-node-preview>
 
                     <a href=""
+                       ng-if="!vm.user.isCurrentUser"
                        style="max-width: 100%;"
                        class="umb-node-preview-add"
                        ng-click="vm.openContentPicker()"
@@ -114,15 +126,25 @@
 
                   <umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
 
-                    <umb-node-preview style="max-width: 100%;"
-                                      ng-repeat="node in vm.user.startMediaIds"
-                                      icon="node.icon"
-                                      name="node.name"
-                                      allow-remove="true"
-                                      on-remove="vm.removeSelectedItem($index, vm.user.startMediaIds)">
+                    <umb-node-preview
+                      style="max-width: 100%;"
+                      ng-repeat="node in vm.user.startMediaIds"
+                      icon="node.icon"
+                      name="node.name"
+                      allow-remove="!vm.user.isCurrentUser"
+                      on-remove="vm.removeSelectedItem($index, vm.user.startMediaIds)">
+                    </umb-node-preview>
+
+                    <umb-node-preview
+                      ng-if="vm.user.startMediaIds.length === 0"
+                      style="max-width: 100%;"
+                      icon="vm.page.rootIcon"
+                      name="vm.page.mediaRootLabel"
+                      allow-remove="false">
                     </umb-node-preview>
 
                     <a href=""
+                       ng-if="!vm.user.isCurrentUser"
                        style="max-width: 100%;"
                        class="umb-node-preview-add"
                        ng-click="vm.openMediaPicker()"