From 5e3e9cce12b0a194a6353d1a4390508b4d97b6fc Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 17 May 2017 12:10:50 +0200
Subject: [PATCH 1/9] add setting for button sizes + allow icon on buttons

---
 .../components/buttons/umbbutton.directive.js |  6 +++--
 .../less/components/buttons/umb-button.less   | 26 +++++++++++++++++++
 .../views/components/buttons/umb-button.html  | 12 ++++-----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index 47901a533c..d075bf1118 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -62,7 +62,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
 @param {string=} shortcut Set a keyboard shortcut for the button ("ctrl+c").
 @param {string=} label Set the button label.
 @param {string=} labelKey Set a localization key to make a multi lingual button ("general_buttonText").
-@param {string=} icon Set a button icon. Can only be used when buttonStyle is "link".
+@param {string=} icon Set a button icon.
+@param {string=} size Set a button icon ("xs", "m", "l", "xl").
 @param {boolean=} disabled Set to <code>true</code> to disable the button.
 **/
 
@@ -122,7 +123,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
             label: "@?",
             labelKey: "@?",
             icon: "@?",
-            disabled: "="
+            disabled: "=",
+            size: "@?"
          }
       };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index d5c71e065a..01bdb2c6ca 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -106,3 +106,29 @@
       transform: rotate(360deg);
    }
 }
+
+/* Sizes */
+.umb-button--xs {
+    padding: 5px 16px;
+    font-size: 13px;
+}
+
+.umb-button--s {
+    padding: 6px 16px;
+    font-size: 15px;
+}
+
+.umb-button--m {
+    padding: 10px 24px;
+    font-size: 15px;
+}
+
+.umb-button--l {
+    padding: 14px 40px;
+    font-size: 16px;
+}
+
+.umb-button--xl {
+    padding: 18px 52px;
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index eb68a0c952..adfc31eb8a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -8,25 +8,25 @@
 
    <div ng-if="state !== 'init'" class="umb-button__overlay"></div>
 
-   <a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
+   <a ng-if="type === 'link'" href="{{href}}" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}">
       <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
-         <i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
+         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
          <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
          <span ng-if="!labelKey">{{label}}</span>
       </span>
    </a>
 
-   <button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
+   <button ng-if="type === 'button'" type="button" class="btn umb-button__button {{style}} umb-button--{{size}}" ng-click="action(model)" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
       <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
-         <i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
+         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
          <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
          <span ng-if="!labelKey">{{label}}</span>
       </span>
    </button>
 
-   <button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}}" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
+   <button ng-if="type === 'submit'" type="submit" class="btn umb-button__button {{style}} umb-button--{{size}}" hotkey="{{shortcut}}" hotkey-when-hidden="{{shortcutWhenHidden}}" ng-disabled="disabled">
       <span class="umb-button__content" ng-class="{'-hidden': state !== 'init'}">
-         <i ng-if="icon && buttonStyle==='link'" class="{{icon}} umb-button__icon"></i>
+         <i ng-if="icon" class="{{icon}} umb-button__icon"></i>
          <localize ng-if="labelKey" key="{{labelKey}}">{{label}}</localize>
          <span ng-if="!labelKey">{{label}}</span>
       </span>

From d3dd84671f2cfef3d15580529a430b8998a62b98 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 17 May 2017 12:11:42 +0200
Subject: [PATCH 2/9] update mocked user object

---
 .../src/common/resources/users.resource.js                | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index dbb07efca9..dd307553e7 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -14,8 +14,14 @@
         function getUser() {
             var deferred = $q.defer();
             var user = {
+                "id": 1,
                 "name": "Tammy Contreras",
-                "email": "tammy@contreras.com"
+                "email": "tammy@contreras.com",
+                "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg",
+                "lastLogin": "2014-04-25T01:32:21.196Z",
+                "invitedBy": "Edward Flores",
+                "createdBy": "",
+                "state": "active"
             };
             deferred.resolve(user);
             return deferred.promise;

From ef51336a7eddc0b32d16474bb93bec6b8d1321b1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 17 May 2017 12:12:49 +0200
Subject: [PATCH 3/9] add text-transform to badge component

---
 src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less     | 1 +
 .../src/less/components/users/umb-users.less                     | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
index 152eedc83f..a63e799dc7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
@@ -10,6 +10,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    text-transform: capitalize;
 }
 
 // Colors
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-users.less
index 7d4dde9e0c..527b5b9f16 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-users.less
@@ -38,7 +38,6 @@
     position: absolute;
     top: 10px;
     left: 10px;
-    text-transform: capitalize;
 }
 
 .umb-user__name {

From d90ef2865b63ae1ba7fd6b0fca469d149f2a76b2 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 18 May 2017 11:33:37 +0200
Subject: [PATCH 4/9] don't use bold for badges

---
 src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
index a63e799dc7..6998afa556 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
@@ -1,7 +1,6 @@
 .umb-badge {
     padding: 6px 8px;
     margin: 0 5px 0 0;
-    font-weight: 600;
     color: @black;
     background-color: @turquoise-washed;
     border-width: 1px;

From d57a273c65798439dfef010826b0f51103e9f198 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 18 May 2017 13:33:57 +0200
Subject: [PATCH 5/9] Add support for multiple styles on a button component

---
 .../components/buttons/umbbutton.directive.js | 21 +++++++++++++++++--
 .../less/components/buttons/umb-button.less   |  1 +
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index d075bf1118..cb0e4c92fb 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -57,7 +57,7 @@ Use this directive to render an umbraco button. The directive can be used to gen
 @param {callback} action The button action which should be performed when the button is clicked.
 @param {string=} href Url/Path to navigato to.
 @param {string=} type Set the button type ("button" or "submit").
-@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link").
+@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link", "block"). Pass in array to add multple styles [success,block].
 @param {string=} state Set a progress state on the button ("init", "busy", "success", "error").
 @param {string=} shortcut Set a keyboard shortcut for the button ("ctrl+c").
 @param {string=} label Set the button label.
@@ -83,7 +83,24 @@ Use this directive to render an umbraco button. The directive can be used to gen
             }
 
             if (scope.buttonStyle) {
-               scope.style = "btn-" + scope.buttonStyle;
+
+                // make it possible to pass in multiple styles
+                if(scope.buttonStyle.startsWith("[") && scope.buttonStyle.endsWith("]")) {
+                    
+                    // when using an attr it will always be a string so we need to remove square brackets
+                    // and turn it into and array
+                    var withoutBrackets = scope.buttonStyle.replace(/[\[\]']+/g,'');
+                    // split array by , + make sure to catch whitespaces
+                    var array = withoutBrackets.split(/\s?,\s?/g);
+                    
+                    angular.forEach(array, function(item){
+                        scope.style = scope.style + " " + "btn-" + item;
+                    });
+
+                } else {
+                    scope.style = "btn-" + scope.buttonStyle;
+                }
+
             }
 
          }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index 01bdb2c6ca..98a3b7bb82 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -19,6 +19,7 @@
    display: flex;
    flex-wrap: wrap;
    align-items: center;
+   justify-content: center;
 }
 
 .umb-button__icon {

From fbed82219d7788c102252458e617c3aad61eacc9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 18 May 2017 15:23:38 +0200
Subject: [PATCH 6/9] init edit user editor

---
 .../src/common/resources/users.resource.js    |   5 +-
 src/Umbraco.Web.UI.Client/src/less/belle.less |   1 +
 .../src/less/components/umb-avatar.less       |   8 +-
 .../users/umb-user-role-preview.less          |   2 +-
 .../src/less/components/users/umb-user.less   |  20 ++
 .../src/views/users/user.controller.js        | 104 +++++++++
 .../src/views/users/user.html                 | 214 ++++++++++++++++++
 7 files changed, 351 insertions(+), 3 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less

diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index dd307553e7..b69098a9ae 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -21,7 +21,10 @@
                 "lastLogin": "2014-04-25T01:32:21.196Z",
                 "invitedBy": "Edward Flores",
                 "createdBy": "",
-                "state": "active"
+                "state": "active",
+                "userRoles": [],
+                "startNodesContent": [],
+                "startNodesMedia": []
             };
             deferred.resolve(user);
             return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 887b9e7816..637b13b965 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,6 +135,7 @@
 @import "components/users/umb-users.less";
 @import "components/users/umb-user-role-picker-list.less";
 @import "components/users/umb-user-role-preview.less";
+@import "components/users/umb-user.less";
 
 // Utilities
 @import "utilities/_flexbox.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
index 61441f16b0..85b597ab91 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-avatar.less
@@ -50,6 +50,12 @@
     font-size: 20px;
 }
 
+.umb-avatar--xxl {
+    width: 150px;
+    height: 150px;
+    font-size: 20px;
+}
+
 /* Colors */
 
 .umb-avatar--white {
@@ -68,7 +74,7 @@
 }
 
 .umb-avatar--secondary {
-    background-color: @purple-l1;
+    background-color: @purple-l3;
     color: @white;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
index a772a8ff28..a5c9d6ace1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-role-preview.less
@@ -3,7 +3,7 @@
     padding-bottom: 10px;
     display: flex;
     box-sizing: border-box;
-    border-bottom: 1px solid @gray-9;
+    border-bottom: 1px solid @gray-8;
 }
 
 .umb-user-role-preview:last-of-type {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less
new file mode 100644
index 0000000000..c4d696c6f8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user.less
@@ -0,0 +1,20 @@
+.test-group {
+    border: 1px solid @gray-8;
+    border-radius: 3px;
+    margin-bottom: 30px;
+}
+
+.test-group-title {
+    padding: 10px 20px;
+    margin-bottom: 0;
+    background-color: @gray-10;
+    color: @black;
+    border-bottom: none;
+    font-size: 16px;
+    font-weight: bold;
+    color: @black;
+}
+
+.test-group-content {
+    padding: 20px;
+}
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 fd3950bde6..1d8ba3ff84 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
@@ -10,6 +10,14 @@
         vm.user = {};
 
         vm.goBack = goBack;
+        vm.openUserRolePicker = openUserRolePicker;
+        vm.openContentPicker = openContentPicker;
+        vm.openMediaPicker = openMediaPicker;
+        vm.removeSelectedItem = removeSelectedItem;
+        vm.disableUser = disableUser;
+        vm.resetPassword = resetPassword;
+        vm.getUserStateType = getUserStateType;
+        vm.changeAvatar = changeAvatar;
 
         function init() {
 
@@ -30,6 +38,102 @@
         function goBack() {
             $location.path("/users/users/overview").search("subview", "users");
         }
+
+        function openUserRolePicker() {
+            vm.userRolePicker = {
+                title: "Select user roles",
+                view: "userrolepicker",
+                selection: vm.user.userRoles,
+                closeButtonLabel: "Cancel",
+                show: true,
+                submit: function(model) {
+                    // apply changes
+                    if(model.selection) {
+                        vm.user.userRoles = model.selection;
+                    }
+                    vm.userRolePicker.show = false;
+                    vm.userRolePicker = null;
+                },
+                close: function(oldModel) {
+                    // rollback on close
+                    if(oldModel.selection) {
+                        vm.user.userRoles = oldModel.selection;
+                    }
+                    vm.userRolePicker.show = false;
+                    vm.userRolePicker = null;
+                }
+            };
+        }
+
+        function openContentPicker() {
+            vm.contentPicker = {
+                title: "Select content start node",
+                view: "contentpicker",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.user.startNodesContent = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function openMediaPicker() {
+            vm.contentPicker = {
+                title: "Select media start node",
+                view: "treepicker",
+                section: "media",
+                treeAlias: "media",
+                entityType: "media",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.user.startNodesMedia = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function removeSelectedItem(index, selection) {
+            selection.splice(index, 1);
+        }
+
+        function disableUser() {
+            alert("disable user");
+        }
+
+        function resetPassword() {
+            alert("reset password");
+        }
+
+        function getUserStateType(state) {
+            switch (state) {
+                case "disabled" || "umbracoDisabled":
+                    return "danger";
+                case "pending":
+                    return "warning";
+                default:
+                    return "success";
+            }
+        }
+
+        function changeAvatar() {
+            alert("change avatar");
+        }
  
         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 208a941200..22d9788148 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -21,6 +21,199 @@
                     </umb-editor-sub-header-content-left>
                 </umb-editor-sub-header>
 
+                <div class="umb-packages-view-wrapper" style="padding: 0;">
+
+                    <div class="umb-package-details">
+
+                        <div class="umb-package-details__main-content">
+                            
+                            <div class="test-group">
+                                <div class="test-group-title">Meta</div>
+                                <div class="test-group-content block-form">
+                                    <umb-control-group label="Email" description="Orci varius natoque penatibus et magnis dis parturient montes">
+                                        <input type="text"
+                                            localize="placeholder" 
+                                            placeholder="@placeholders_entername" 
+                                            class="input-block-level" 
+                                            ng-model="vm.user.email"
+                                            umb-auto-focus />
+                                    </umb-control-group>
+
+                                    <umb-control-group label="Language" description="Orci varius natoque penatibus et magnis dis parturient montes">
+                                        <select class="input-block-level">
+                                            <option value="">Select language</option>
+                                        </select>
+                                    </umb-control-group>
+                                </div>
+                            </div>
+
+                            <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="Roles" description="Aliquam laoreet metus porta nisi pellentesque">
+
+                                        <umb-user-role-preview
+                                            ng-repeat="userRole in vm.user.userRoles"
+                                            icon="userRole.icon"
+                                            name="userRole.name"
+                                            sections="userRole.sections"
+                                            content-start-nodes="userRole.startNodesContent"
+                                            media-start-nodes="userRole.startNodesMedia"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.userRoles)">
+                                        </umb-user-role-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openUserRolePicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                        
+                                    </umb-control-group>
+
+                                    <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.startNodesContent"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.startNodesContent)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openContentPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+
+                                    </umb-control-group>
+
+                                    <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.startNodesMedia"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.user.startNodesMedia)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openMediaPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+
+                                    </umb-control-group>
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="umb-package-details__sidebar">
+
+                            <div class="umb-package-details__section">
+
+                                <div class="flex flex-column justify-center items-center" style="margin-bottom: 20px;">
+                                    <umb-avatar
+                                        color="secondary"
+                                        size="xxl"
+                                        name="{{vm.user.name}}"
+                                        img-src="{{vm.user.avatar}}">
+                                    </umb-avatar>
+                                    <umb-button
+                                        type="button"
+                                        button-style="link"
+                                        action="vm.changeAvatar()"
+                                        label="Change avatar">
+                                    </umb-button>
+                                </div>
+
+                                <!--
+                                <div class="umb-package-details__information-item">
+                                    <div class="umb-package-details__information-item-label">Status</div>
+                                    <div class="umb-package-details__information-item-content">
+                                        <umb-badge
+                                            style="margin-top: 4px;"
+                                            size="s"
+                                            ng-if="user.state !== 'active'"
+                                            color="{{vm.getUserStateType(vm.user.state)}}">
+                                            {{ vm.user.state }}
+                                        </umb-badge>
+                                    </div>
+                                </div>
+                                -->
+
+                                <div class="umb-package-details__information-item">
+                                    <div class="umb-package-details__information-item-label">Last login:</div>
+                                    <div class="umb-package-details__information-item-content">
+                                        <span ng-if="vm.user.lastLogin">{{ vm.user.lastLogin }}</span>
+                                        <span ng-if="!vm.user.lastLogin">The user has not logged in yet</span>
+                                    </div>
+                                </div>
+
+                                <div class="umb-package-details__information-item" ng-if="vm.user.invitedBy">
+                                    <div class="umb-package-details__information-item-label">Invited by:</div>
+                                    <div class="umb-package-details__information-item-content">{{ vm.user.invitedBy }}</div>
+                                </div>
+
+                                 <div class="umb-package-details__information-item" ng-if="vm.user.createdBy">
+                                    <div class="umb-package-details__information-item-label">Created by:</div>
+                                    <div class="umb-package-details__information-item-content">{{ vm.user.createdBy }}</div>
+                                </div>
+
+                            </div>
+
+                            <div class="umb-package-details__section">
+
+                                <div style="margin-bottom: 10px;">
+                                    <umb-button
+                                        ng-if="vm.user.state === 'active'"
+                                        type="button"
+                                        button-style="[danger,block]"
+                                        action="vm.disableUser()"
+                                        label="Disable user"
+                                        size="m">
+                                    </umb-button>
+                                </div>
+
+                                <div style="margin-bottom: 10px;">
+                                    <umb-button
+                                        ng-if="vm.user.state === 'disabled'"
+                                        type="button"
+                                        button-style="[success,block]"
+                                        action="vm.enableUser()"
+                                        label="Enable user"
+                                        size="m">
+                                    </umb-button>
+                                </div>
+
+                                <umb-button
+                                    type="button"
+                                    button-style="[info,block]"
+                                    action="vm.resetPassword()"
+                                    label="Reset password"
+                                    size="m">
+                                </umb-button>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
             </umb-editor-container>
 
             <umb-editor-footer>
@@ -45,4 +238,25 @@
 
     </form>
 
+    <umb-overlay
+        ng-if="vm.userRolePicker.show"
+        model="vm.userRolePicker"
+        view="vm.userRolePicker.view"
+        position="right">
+    </umb-overlay>
+
+    <umb-overlay
+        ng-if="vm.contentPicker.show"
+        model="vm.contentPicker"
+        view="vm.contentPicker.view"
+        position="right">
+    </umb-overlay>
+    
+    <umb-overlay
+        ng-if="vm.mediaPicker.show"
+        model="vm.mediaPicker"
+        view="vm.mediaPicker.view"
+        position="right">
+    </umb-overlay>
+
 </div>

From aeabca87d70acd5f0ed1c2785b7a440a18513234 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 18 May 2017 15:25:05 +0200
Subject: [PATCH 7/9] init edit role editor

---
 .../users/umbuserpreview.directive.js         |  29 ++++
 .../src/common/resources/users.resource.js    |  28 +++-
 src/Umbraco.Web.UI.Client/src/less/belle.less |   1 +
 .../components/users/umb-user-preview.less    |  52 +++++++
 .../components/users/umb-user-preview.html    |  20 +++
 .../src/views/users/role.controller.js        |  67 +++++++++
 .../src/views/users/role.html                 | 136 +++++++++++++++++-
 7 files changed, 331 insertions(+), 2 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js
new file mode 100644
index 0000000000..29db5f7238
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js
@@ -0,0 +1,29 @@
+(function () {
+    'use strict';
+
+    function UserPreviewDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/users/umb-user-preview.html',
+            scope: {
+                avatar: "=?",
+                name: "=",
+                allowRemove: "=?",
+                onRemove: "&?"
+            },
+            link: link
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbUserPreview', UserPreviewDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index b69098a9ae..77cc8b2978 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -243,7 +243,33 @@
                 "name": "Admin",
                 "alias": "admin",
                 "id": 1,
-                "icon": "icon-medal"
+                "icon": "icon-medal",
+                "users": [
+                    {
+                        "id": "1",
+                        "name": "Angela Stone",
+                        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
+                        "state": "active"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Beverly Silva",
+                        "avatar": "",
+                        "state": "disabled"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Ruth Turner",
+                        "avatar": "",
+                        "state": "pending"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Arthur Welch",
+                        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
+                        "state": "active"
+                    }
+                ]
             };
             deferred.resolve(user);
             return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 637b13b965..338b22bf52 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,6 +135,7 @@
 @import "components/users/umb-users.less";
 @import "components/users/umb-user-role-picker-list.less";
 @import "components/users/umb-user-role-preview.less";
+@import "components/users/umb-user-preview.less";
 @import "components/users/umb-user.less";
 
 // Utilities
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
new file mode 100644
index 0000000000..ac60786eb3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
@@ -0,0 +1,52 @@
+.umb-user-preview {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 1px solid @gray-8;
+}
+
+.umb-user-preview:last-of-type {
+    border-bottom: none;
+    margin-bottom: 5px;
+}
+
+.umb-user-preview__avatar {
+    margin-right: 15px;
+}
+
+.umb-user-preview__content {
+    flex: 1 1 auto;
+}
+
+.umb-user-preview__name {
+    font-size: 15px;
+    font-weight: bold;
+    color: @black;
+    margin-bottom: 3px;
+    margin-top: 2px;
+}
+
+.umb-user-preview__actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+.umb-user-preview__action {
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 13px;
+    font-weight: bold;
+    color: @gray-5;
+}
+
+.umb-user-preview__action:hover {
+    color: @turquoise;
+    text-decoration: none;
+    opacity: 1;
+}
+
+.umb-user-preview__action--red:hover {
+    color: @red;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html
new file mode 100644
index 0000000000..7753376206
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html
@@ -0,0 +1,20 @@
+<div class="umb-user-preview">
+
+    <div class="umb-user-preview__avatar">
+        <umb-avatar
+            size="xs"
+            color="secondary"
+            name="{{name}}"
+            img-src="{{avatar}}">
+        </umb-avatar>
+    </div>
+
+    <div class="umb-user-preview__content">
+        <div class="umb-user-preview__name">{{ name }}</div>
+    </div>
+
+    <div class="umb-user-preview__actions">
+        <a class="umb-user-preview__action umb-user-preview__action--red" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()">Remove</i></a>
+    <div>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
index 12cb81e08d..b44103e726 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
@@ -10,6 +10,11 @@
         vm.userRole = {};
 
         vm.goBack = goBack;
+        vm.openSectionPicker = openSectionPicker;
+        vm.openContentPicker = openContentPicker;
+        vm.openMediaPicker = openMediaPicker;
+        vm.removeSelectedItem = removeSelectedItem;
+        vm.getUserStateType = getUserStateType;
 
         function init() {
 
@@ -30,6 +35,68 @@
         function goBack() {
             $location.path("/users/users/overview").search("subview", "roles");
         }
+
+        function openSectionPicker() {
+            alert("open section picker");
+        }
+
+        function openContentPicker() {
+            vm.contentPicker = {
+                title: "Select content start node",
+                view: "contentpicker",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.userRole.startNodesContent = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function openMediaPicker() {
+            vm.contentPicker = {
+                title: "Select media start node",
+                view: "treepicker",
+                section: "media",
+                treeAlias: "media",
+                entityType: "media",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.userRole.startNodesMedia = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function removeSelectedItem(index, selection) {
+            selection.splice(index, 1);
+        }
+
+        function getUserStateType(state) {
+            switch (state) {
+                case "disabled" || "umbracoDisabled":
+                    return "danger";
+                case "pending":
+                    return "warning";
+                default:
+                    return "success";
+            }
+        }
  
         init();
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.html b/src/Umbraco.Web.UI.Client/src/views/users/role.html
index e51eda26b1..54cc1abebb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.html
@@ -8,7 +8,7 @@
 
             <umb-editor-header
                 name="vm.userRole.name"
-                hide-icon="true"
+                icon="vm.userRole.icon"
                 hide-description="true"
                 hide-alias="true">
             </umb-editor-header>
@@ -21,6 +21,119 @@
                     </umb-editor-sub-header-content-left>
                 </umb-editor-sub-header>
 
+                <div class="umb-packages-view-wrapper" style="padding: 0;">
+
+                    <div class="umb-package-details">
+
+                        <div class="umb-package-details__main-content">
+
+                            <div class="test-group">
+                                <div class="test-group-title">Something</div>
+                                <div class="test-group-content block-form">
+
+                                    <umb-control-group label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="section in vm.userRole.sections"
+                                            icon="section.icon"
+                                            name="section.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.sections)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openUserRolePicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                    <umb-control-group 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.userRole.startNodesContent"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesContent)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openContentPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                    <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.userRole.startNodesMedia"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesMedia)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openMediaPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                </div>
+                            </div>
+
+                            <div class="test-group">
+                                <div class="test-group-title">Default permissions</div>
+                                <div class="test-group-content">Some content here</div>
+                            </div>
+
+                            <div class="test-group">
+                                <div class="test-group-title">Granular permissions</div>
+                                <div class="test-group-content">Some content here</div>
+                            </div>
+
+                        </div>
+
+                        <div class="umb-package-details__sidebar">
+
+                            <div class="umb-package-details__section">
+
+                                <div class="umb-package-details__section-title">Users</div>
+
+                                <umb-user-preview
+                                    ng-repeat="user in vm.userRole.users"
+                                    name="user.name"
+                                    avatar="user.avatar"
+                                    allow-remove="true"
+                                    on-remove="vm.removeSelectedUser($index, vm.userRole.users)">
+                                </umb-user-preview>
+
+                                <a href=""
+                                    style="max-width: 100%;"
+                                    class="umb-node-preview-add"
+                                    ng-click="vm.openMediaPicker()"
+                                    prevent-default>
+                                    <localize key="general_add">Add</localize>
+                                </a>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
             </umb-editor-container>
 
             <umb-editor-footer>
@@ -45,4 +158,25 @@
 
     </form>
 
+    <umb-overlay
+        ng-if="vm.sectionPicker.show"
+        model="vm.sectionPicker"
+        view="vm.sectionPicker.view"
+        position="right">
+    </umb-overlay>
+
+    <umb-overlay
+        ng-if="vm.contentPicker.show"
+        model="vm.contentPicker"
+        view="vm.contentPicker.view"
+        position="right">
+    </umb-overlay>
+    
+    <umb-overlay
+        ng-if="vm.mediaPicker.show"
+        model="vm.mediaPicker"
+        view="vm.mediaPicker.view"
+        position="right">
+    </umb-overlay>
+
 </div>
\ No newline at end of file

From 83d26fd91a9c5615c483d0e8159c1e3eb31cfb97 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 22 May 2017 14:25:29 +0200
Subject: [PATCH 8/9] add breadcrumb + back button to editor footer

---
 .../src/views/users/role.controller.js        | 20 ++++-
 .../src/views/users/role.html                 | 23 ++++--
 .../src/views/users/user.controller.js        | 21 +++++-
 .../src/views/users/user.html                 | 73 +++++++++++--------
 4 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
index b44103e726..12f23d3f7e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
@@ -9,7 +9,7 @@
         vm.page = {};
         vm.userRole = {};
 
-        vm.goBack = goBack;
+        vm.goToPage = goToPage;
         vm.openSectionPicker = openSectionPicker;
         vm.openContentPicker = openContentPicker;
         vm.openMediaPicker = openMediaPicker;
@@ -23,6 +23,7 @@
             // get user
             usersResource.getUserRole().then(function (userRole) {
                 vm.userRole = userRole;
+                makeBreadcrumbs();
             });
 
             // fake loading
@@ -32,8 +33,8 @@
             
         }
 
-        function goBack() {
-            $location.path("/users/users/overview").search("subview", "roles");
+        function goToPage(ancestor) {
+            $location.path(ancestor.path).search("subview", ancestor.subView);
         }
 
         function openSectionPicker() {
@@ -97,6 +98,19 @@
                     return "success";
             }
         }
+
+        function makeBreadcrumbs() {
+            vm.breadcrumbs = [
+                {
+                    "name": "Groups",
+                    "path": "/users/users/overview",
+                    "subView": "roles"
+                },
+                {
+                    "name": vm.userRole.name
+                }
+            ];
+        }
  
         init();
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.html b/src/Umbraco.Web.UI.Client/src/views/users/role.html
index 54cc1abebb..d8c79c881e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.html
@@ -15,12 +15,6 @@
 
             <umb-editor-container>
 
-                <umb-editor-sub-header>
-                    <umb-editor-sub-header-content-left>
-                        <a class="umb-package-details__back-link" href="" ng-click="vm.goBack()">&larr; Back to roles</a>
-                    </umb-editor-sub-header-content-left>
-                </umb-editor-sub-header>
-
                 <div class="umb-packages-view-wrapper" style="padding: 0;">
 
                     <div class="umb-package-details">
@@ -138,8 +132,25 @@
 
             <umb-editor-footer>
 
+                <umb-editor-footer-content-left>
+
+                    <umb-breadcrumbs
+                        ancestors="vm.breadcrumbs"
+                        allow-on-open="true"
+                        on-open="vm.goToPage(ancestor)">
+                    </umb-breadcrumbs>
+
+                </umb-editor-footer-content-left>
+
                 <umb-editor-footer-content-right>
 
+                    <umb-button
+                        type="button"
+                        action="vm.goToPage(vm.breadcrumbs[0])"
+                        label="Return to list"
+                        label-key="buttons_returnToList">
+                    </umb-button>
+
                     <umb-button
                         type="button"
                         action="vm.save()"
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 1d8ba3ff84..75667fdf43 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
@@ -8,8 +8,9 @@
         vm.loading = false;
         vm.page = {};
         vm.user = {};
+        vm.breadcrumbs = [];
 
-        vm.goBack = goBack;
+        vm.goToPage = goToPage;
         vm.openUserRolePicker = openUserRolePicker;
         vm.openContentPicker = openContentPicker;
         vm.openMediaPicker = openMediaPicker;
@@ -26,6 +27,7 @@
             // get user
             usersResource.getUser().then(function (user) {
                 vm.user = user;
+                makeBreadcrumbs(vm.user);
             });
 
             // fake loading
@@ -35,8 +37,8 @@
             
         }
 
-        function goBack() {
-            $location.path("/users/users/overview").search("subview", "users");
+        function goToPage(ancestor) {
+            $location.path(ancestor.path).search("subview", ancestor.subView);
         }
 
         function openUserRolePicker() {
@@ -134,6 +136,19 @@
         function changeAvatar() {
             alert("change avatar");
         }
+
+        function makeBreadcrumbs() {
+            vm.breadcrumbs = [
+                {
+                    "name": "Users",
+                    "path": "/users/users/overview",
+                    "subView": "users"
+                },
+                {
+                    "name": vm.user.name
+                }
+            ];
+        }
  
         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 22d9788148..2ed21bced8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -15,12 +15,6 @@
 
             <umb-editor-container>
 
-                <umb-editor-sub-header>
-                    <umb-editor-sub-header-content-left>
-                        <a class="umb-package-details__back-link" href="" ng-click="vm.goBack()">&larr; Back to users</a>
-                    </umb-editor-sub-header-content-left>
-                </umb-editor-sub-header>
-
                 <div class="umb-packages-view-wrapper" style="padding: 0;">
 
                     <div class="umb-package-details">
@@ -172,40 +166,38 @@
                                     <div class="umb-package-details__information-item-content">{{ vm.user.createdBy }}</div>
                                 </div>
 
-                            </div>
+                                <div style="margin-top: 20px;">
+                                    <div style="margin-bottom: 10px;">
+                                        <umb-button
+                                            ng-if="vm.user.state === 'active'"
+                                            type="button"
+                                            button-style="[danger,block]"
+                                            action="vm.disableUser()"
+                                            label="Disable user"
+                                            size="m">
+                                        </umb-button>
+                                    </div>
 
-                            <div class="umb-package-details__section">
+                                    <div style="margin-bottom: 10px;">
+                                        <umb-button
+                                            ng-if="vm.user.state === 'disabled'"
+                                            type="button"
+                                            button-style="[success,block]"
+                                            action="vm.enableUser()"
+                                            label="Enable user"
+                                            size="m">
+                                        </umb-button>
+                                    </div>
 
-                                <div style="margin-bottom: 10px;">
                                     <umb-button
-                                        ng-if="vm.user.state === 'active'"
                                         type="button"
-                                        button-style="[danger,block]"
-                                        action="vm.disableUser()"
-                                        label="Disable user"
+                                        button-style="[info,block]"
+                                        action="vm.resetPassword()"
+                                        label="Reset password"
                                         size="m">
                                     </umb-button>
                                 </div>
 
-                                <div style="margin-bottom: 10px;">
-                                    <umb-button
-                                        ng-if="vm.user.state === 'disabled'"
-                                        type="button"
-                                        button-style="[success,block]"
-                                        action="vm.enableUser()"
-                                        label="Enable user"
-                                        size="m">
-                                    </umb-button>
-                                </div>
-
-                                <umb-button
-                                    type="button"
-                                    button-style="[info,block]"
-                                    action="vm.resetPassword()"
-                                    label="Reset password"
-                                    size="m">
-                                </umb-button>
-
                             </div>
 
                         </div>
@@ -218,8 +210,25 @@
 
             <umb-editor-footer>
 
+                <umb-editor-footer-content-left>
+
+                    <umb-breadcrumbs
+                        ancestors="vm.breadcrumbs"
+                        allow-on-open="true"
+                        on-open="vm.goToPage(ancestor)">
+                    </umb-breadcrumbs>
+
+                </umb-editor-footer-content-left>
+
                 <umb-editor-footer-content-right>
 
+                    <umb-button
+                        type="button"
+                        action="vm.goToPage(vm.breadcrumbs[0])"
+                        label="Return to list"
+                        label-key="buttons_returnToList">
+                    </umb-button>
+
                     <umb-button
                         type="button"
                         action="vm.save()"

From b3118f742d223c4b6b9558f5963115cc8749ebfa Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 22 May 2017 14:25:57 +0200
Subject: [PATCH 9/9] increase breadcrumb font size

---
 .../src/less/components/umb-breadcrumbs.less                    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
index 2cad03a2ab..d25744a108 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
@@ -12,7 +12,7 @@
 
 .umb-breadcrumbs__ancestor-link,
 .umb-breadcrumbs__ancestor-text {
-    font-size: 12px;
+    font-size: 13px;
     color: @gray-3;
     max-width: 150px;
     white-space: nowrap;