diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index c6a8447342..7fd62e31c7 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -191,13 +191,13 @@ input[type="button"] { .btn-success { .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight, @btnSuccessType); } -// Info appears as a neutral blue +// Info appears as a sand color .btn-info { - .buttonBackground(@sand-5, @blueDark, @blueExtraDark, @u-white); + .buttonBackground(@sand-5, @sand-6, @blueExtraDark, @blueMid); } // Made for Umbraco, 2019 .btn-action { - .buttonBackground(@blueExtraDark, @blueDark, @pinkLight, @u-white); + .buttonBackground(@blueExtraDark, @blueDark, @white, @u-white); } // Made for Umbraco, 2019 .btn-selection { @@ -236,11 +236,11 @@ input[type="button"] { padding: 15px 50px; font-size: 16px; border: none; - background: @green; + background: @ui-btn-positive; color: @white; font-weight: bold; &:hover { - background: @green-d1; + background: @ui-btn-positive-hover; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less index 2b9f1e31a5..1aadb1c39b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less @@ -15,6 +15,13 @@ } } +.umb-editor-sub-header.--state-selection { + padding-left: 10px; + padding-right: 10px; + background-color: @pinkLight; + border-radius: 3px; +} + .umb-editor-sub-header.-umb-sticky-bar { box-shadow: 0 6px 3px -3px rgba(0,0,0,.16); transition: box-shadow 1s; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less index de2dca5f91..e24f68078b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less @@ -8,6 +8,8 @@ box-sizing: border-box; max-width: 100%; display: flex; + position: relative; + user-select: none; } .umb-user-card:hover, @@ -15,6 +17,22 @@ outline: none; text-decoration: none !important; } +.umb-user-card.-selected { + &::before { + content: ""; + position: absolute; + z-index:2; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid @ui-selected-border; + border-radius: 5px; + box-shadow: 0 0 4px 0 darken(@ui-selected-border, 20), inset 0 0 2px 0 darken(@ui-selected-border, 20); + pointer-events: none; + } + +} .umb-user-card__content { position: relative; @@ -30,9 +48,12 @@ max-width: 100%; } -.umb-user-card__content:hover, -.umb-user-card:focus .umb-user-card__content { - border-color: @turquoise; +.umb-user-card__goToUser { + &:hover { + .umb-user-card__name { + text-decoration: underline; + } + } } .umb-user-card__avatar { @@ -47,24 +68,13 @@ left: 10px; } + .umb-user-card__name { font-size: 15px; font-weight: bold; text-align: center; margin-bottom: 2px; - word-wrap: break-word; -} - -.umb-user-card__checkmark { - position: absolute; - top: 10px; - right: 10px; - display: none; -} - -.umb-user-card:hover .umb-user-card__checkmark, -.umb-user-card__checkmark--visible { - display: block; + word-wrap: break-word; } .umb-user-card__group { @@ -77,4 +87,4 @@ font-size: 13px; text-align: center; margin-top: auto; -} \ No newline at end of file +} diff --git a/src/Umbraco.Web.UI.Client/src/less/mixins.less b/src/Umbraco.Web.UI.Client/src/less/mixins.less index b67fd1dd25..0dadc906ef 100644 --- a/src/Umbraco.Web.UI.Client/src/less/mixins.less +++ b/src/Umbraco.Web.UI.Client/src/less/mixins.less @@ -539,7 +539,7 @@ &.disabled, &[disabled] { color: @white; - background-color: @sand-2; + background-color: @sand-1; } /* // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves diff --git a/src/Umbraco.Web.UI.Client/src/less/tables.less b/src/Umbraco.Web.UI.Client/src/less/tables.less index fa8a44ec47..09b6ea8a42 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tables.less +++ b/src/Umbraco.Web.UI.Client/src/less/tables.less @@ -62,6 +62,15 @@ table { } +.table tr > td:first-child { + border-left: 4px solid transparent; +} +.table tr.--selected > td:first-child { + border-left-color:@ui-selected-border; +} + + + // CONDENSED TABLE W/ HALF PADDING // ------------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less index 80665e4c64..92d4e09895 100644 --- a/src/Umbraco.Web.UI.Client/src/less/variables.less +++ b/src/Umbraco.Web.UI.Client/src/less/variables.less @@ -76,9 +76,10 @@ @gray-10: #F3F3F5; @gray-11: #F6F6F7; -@sand-1: hsl(22, 33%, 93%);// added 2019 +@sand-1: hsl(22, 18%, 84%);// added 2019 @sand-2: hsl(22, 34%, 88%);// added 2019 @sand-5: hsl(22, 31%, 93%);// added 2019 +@sand-6: hsl(22, 29%, 95%);// added 2019 @sand-7: hsl(22, 26%, 97%);// added 2019 @@ -138,8 +139,8 @@ @ui-active-type: @blueExtraDark; @ui-active-type-hover: @blueMid; -@ui-selected: @sand-1; -@ui-selected-hover: ligthen(@sand-1, 10); +@ui-selected: @sand-5; +@ui-selected-hover: ligthen(@sand-5, 10); @ui-selected-type: @blueExtraDark; @ui-selected-type-hover: @blueMid; @ui-selected-border: @pinkLight; @@ -176,7 +177,7 @@ @ui-btn-type: @white; @ui-btn-positive: @green; -@ui-btn-positive-hover: @green-l1; +@ui-btn-positive-hover: lighten(@green, 6%); @ui-btn-positive-type: @white; @ui-btn-negative: @red; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html index 44b70ea613..eb85cc5fd2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html @@ -180,6 +180,7 @@ button-style="success" label="Select image" type="button" + disabled="model.selection.length === 0" action="submit(model)"> diff --git a/src/Umbraco.Web.UI.Client/src/views/member/edit.html b/src/Umbraco.Web.UI.Client/src/views/member/edit.html index 310559b4d4..ee6e9c625c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/member/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/member/edit.html @@ -24,13 +24,13 @@
{{ group.label }}
  - +
- + @@ -38,8 +38,8 @@ - @@ -51,6 +51,7 @@ ng-if="page.listViewPath" type="link" href="#{{page.listViewPath}}" + button-style="link" label="Return to list" label-key="buttons_returnToList"> diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html index 9a638d91fa..2c70ba5730 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html @@ -6,7 +6,7 @@
- + @@ -85,7 +85,7 @@ type="button" label="Clear selection" label-key="buttons_clearSelection" - button-style="selection" + button-style="white" action="clearSelection()" disabled="actionInProgress"> @@ -140,7 +140,7 @@ ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)" style="margin-right: 5px;" type="button" - button-style="selection" + button-style="white" label-key="actions_publish" icon="icon-globe" action="publish()" @@ -153,7 +153,7 @@ ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)" style="margin-right: 5px;" type="button" - button-style="selection" + button-style="white" label-key="actions_unpublish" icon="icon-block" action="unpublish()" @@ -166,7 +166,7 @@ ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)" style="margin-right: 5px;" type="button" - button-style="selection" + button-style="white" label-key="actions_copy" icon="icon-documents" action="copy()" @@ -179,7 +179,7 @@ ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)" style="margin-right: 5px;" type="button" - button-style="selection" + button-style="white" label-key="actions_move" icon="icon-enter" action="move()" @@ -191,7 +191,7 @@ - + - +
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html index deee402fd5..863d9658ae 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html @@ -2,13 +2,13 @@ - - + + @@ -40,6 +40,7 @@ @@ -54,6 +55,7 @@ type="button" label="Delete" label-key="general_delete" + button-style="white" icon="icon-trash" action="vm.deleteUserGroups()" size="xs"> @@ -64,7 +66,7 @@
- Groups ({{vm.userGroups.length}}) + Groups ({{vm.userGroups.length}})
@@ -76,19 +78,20 @@ - - - + + + + ng-click="vm.selectUserGroup(group, vm.selection, $event)" + style="width: 20px; height: 100px;"/> - -
\ No newline at end of file +
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index 2001b95e99..38f6758651 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -196,27 +196,23 @@ vm.activeLayout = selectedLayout; } - function selectUser(user, selection, event) { - - // prevent the current user to be selected - if (!user.isCurrentUser) { - - if (user.selected) { - var index = selection.indexOf(user.id); - selection.splice(index, 1); - user.selected = false; - } else { - user.selected = true; - vm.selection.push(user.id); - } - - setBulkActions(vm.users); - - if (event) { - event.preventDefault(); - event.stopPropagation(); - } + function selectUser(user) { + + if (user.isCurrentUser) { + return; } + + if (user.selected) { + var index = vm.selection.indexOf(user.id); + vm.selection.splice(index, 1); + user.selected = false; + } else { + user.selected = true; + vm.selection.push(user.id); + } + + setBulkActions(vm.users); + } function clearSelection() { @@ -227,11 +223,7 @@ } function clickUser(user) { - if (vm.selection.length > 0) { - selectUser(user, vm.selection); - } else { - goToUser(user.id); - } + goToUser(user.id); } function disableUsers() { @@ -625,18 +617,20 @@ var firstSelectedUserGroups; angular.forEach(users, function (user) { - + if (!user.selected) { return; } - + + // if the current user is selected prevent any bulk actions with the user included if (user.isCurrentUser) { vm.allowDisableUser = false; vm.allowEnableUser = false; vm.allowUnlockUser = false; vm.allowSetUserGroup = false; - return; + + return false; } if (user.userDisplayState && user.userDisplayState.key === "Disabled") { @@ -660,16 +654,17 @@ } // store the user group aliases of the first selected user - if (!firstSelectedUserGroups) { - firstSelectedUserGroups = user.userGroups.map(function (ug) { return ug.alias; }); - vm.allowSetUserGroup = true; - } else if (vm.allowSetUserGroup === true) { - // for 2nd+ selected user, compare the user group aliases to determine if we should allow bulk editing. - // we don't allow bulk editing of users not currently having the same assigned user groups, as we can't - // really support that in the user group picker. - var userGroups = user.userGroups.map(function (ug) { return ug.alias; }); - if (_.difference(firstSelectedUserGroups, userGroups).length > 0) { - vm.allowSetUserGroup = false; + if (vm.allowSetUserGroup === true) { + if (!firstSelectedUserGroups) { + firstSelectedUserGroups = user.userGroups.map(function (ug) { return ug.alias; }); + } else { + // for 2nd+ selected user, compare the user group aliases to determine if we should allow bulk editing. + // we don't allow bulk editing of users not currently having the same assigned user groups, as we can't + // really support that in the user group picker. + var userGroups = user.userGroups.map(function (ug) { return ug.alias; }); + if (_.difference(firstSelectedUserGroups, userGroups).length > 0) { + vm.allowSetUserGroup = false; + } } } }); diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index c764e919c8..cefc3c5c86 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -5,7 +5,7 @@ - + @@ -48,7 +48,7 @@ @@ -57,16 +57,16 @@ {{ vm.selection.length }} of {{ vm.users.length }} selected - + @@ -74,22 +74,22 @@ - +
- Status: + Status: {{ vm.getFilterName(vm.userStatesFilter) }} @@ -167,7 +167,7 @@
- Order by: + Order by: {{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} @@ -191,20 +191,18 @@ @@ -244,9 +242,14 @@ - + -
+
- + - {{user.name}} + {{user.name}} {{ userGroup.name }}, {{ user.formattedLastLogin }} @@ -331,7 +334,7 @@ Required {{addUserForm.name.errorMsg}} - + @@ -341,7 +344,7 @@ Required {{addUserForm.username.errorMsg}} - + @@ -355,7 +358,7 @@ - +
- + Back to users - +
- +

- +
@@ -510,7 +513,7 @@ - +