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 @@
- + - + {{label}} {{label}} - -