Merge pull request #2068 from umbraco/temp-U4-10109

fixes: U4-10109 Need to indicate that granular permission entries can…

src/Umbraco.Web.UI.Client/src/common/directives/components/umbnodepreview.directive.js

@@ -82,8 +82,10 @@
 @param {boolean} sortable (<code>binding</code>): Will add a move cursor on the node preview. Can used in combination with ui-sortable.
 @param {boolean} allowRemove (<code>binding</code>): Show/Hide the remove button.
 @param {boolean} allowOpen (<code>binding</code>): Show/Hide the open button.
+@param {boolean} allowEdit (<code>binding</code>): Show/Hide the edit button (Added in version 7.7.0).
 @param {function} onRemove (<code>expression</code>): Callback function when the remove button is clicked.
 @param {function} onOpen (<code>expression</code>): Callback function when the open button is clicked.
+@param {function} onEdit (<code>expression</code>): Callback function when the edit button is clicked (Added in version 7.7.0).
 **/
 
 (function () {
@@ -108,8 +110,10 @@
                 sortable: "=?",
                 allowOpen: "=?",
                 allowRemove: "=?",
+                allowEdit: "=?",
                 onOpen: "&?",
-                onRemove: "&?"
+                onRemove: "&?",
+                onEdit: "&?"
             },
             link: link
         };

src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less

@@ -1,8 +1,6 @@
 .umb-node-preview {
     padding: 7px 0;
-    border-radius: 3px;
     display: flex;
-    align-items: center;
     max-width: 66.6%;
     box-sizing: border-box;
     border-bottom: 1px solid @gray-9;
@@ -37,10 +35,12 @@
 
 .umb-node-preview__content {
     flex: 1 1 auto;
+    margin-right: 25px;
 }
 
 .umb-node-preview__name {
     color: @black;
+    margin-top: 2px;
 }
 
 .umb-node-preview__description {

src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html

@@ -1,10 +1,10 @@
 <div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable, 'umb-node-preview--unpublished': published === false }">
     <i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
     <div class="umb-node-preview__content">
-        <div class="flex items-center">
-            <div class="umb-node-preview__name">{{ name }}</div>
-            <div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
-        </div>
+        
+        <div class="umb-node-preview__name">{{ name }}</div>
+        <div class="umb-node-preview__description" ng-if="description">{{ description }}</div>
+
         <div class="umb-user-group-preview__permission" ng-if="permissions">
             <span>
                 <span class="bold">Permissions:</span>
@@ -13,6 +13,7 @@
         </div>
     </div>
     <div class="umb-node-preview__actions">
+        <a class="umb-node-preview__action" title="Open" href="" ng-if="allowEdit"  ng-click="onEdit()"><localize key="general_edit">Edit</localize></a>
         <a class="umb-node-preview__action" title="Open" href="" ng-if="allowOpen"  ng-click="onOpen()"><localize key="general_open">Open</localize></a>
         <a class="umb-node-preview__action umb-node-preview__action--red" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()"><localize key="general_remove">Remove</localize></i></a>
     <div>

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

@@ -19,6 +19,7 @@
         vm.clearStartNode = clearStartNode;
         vm.save = save;
         vm.openGranularPermissionsPicker = openGranularPermissionsPicker;
+        vm.setPermissionsForNode = setPermissionsForNode;
 
         function init() {
 
@@ -251,8 +252,10 @@
                     vm.nodePermissions.show = false;
                     vm.nodePermissions = null;
                     // close content picker overlay
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                    if(vm.contentPicker) {
+                        vm.contentPicker.show = false;
+                        vm.contentPicker = null;
+                    }
                 },
                 close: function (oldModel) {
                     vm.nodePermissions.show = false;

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

@@ -115,7 +115,9 @@
                                             name="node.name"
                                             permissions="node.allowedPermissions"
                                             allow-remove="true"
-                                            on-remove="vm.removeSelectedItem($index, vm.userGroup.assignedPermissions)">
+                                            on-remove="vm.removeSelectedItem($index, vm.userGroup.assignedPermissions)"
+                                            allow-edit="true"
+                                            on-edit="vm.setPermissionsForNode(node)">
                                         </umb-node-preview>
 
                                         <a href=""