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..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,12 +57,13 @@ 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.
@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 true to disable the button.
**/
@@ -82,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;
+ }
+
}
}
@@ -122,7 +140,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/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 b14bb0e577..c5d1f7d1db 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
@@ -109,7 +109,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 c8983d2480..48c7213eb4 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,6 +135,8 @@
@import "components/users/umb-users.less";
@import "components/users/umb-user-group-picker-list.less";
@import "components/users/umb-user-group-preview.less";
+@import "components/users/umb-user-preview.less";
+@import "components/users/umb-user.less";
// Utilities
@import "utilities/_flexbox.less";
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..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 {
@@ -106,3 +107,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/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/umb-badge.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-badge.less
index 152eedc83f..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;
@@ -10,6 +9,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/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;
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 c56f8238bb..20617c32a5 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
@@ -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-group-preview:last-of-type {
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/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/less/components/users/umb-users.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-users.less
index 0178cc6d67..b1d9c3bc22 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
@@ -87,7 +87,6 @@
position: absolute;
top: 10px;
left: 10px;
- text-transform: capitalize;
}
.umb-user__name {
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 @@