yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4520 from umbraco/temp8-4476-selection-colors-for-users

Browse Source 
V8: corrected selection colors for users, fixes #4476
This commit is contained in:
Warren Buckley
2019-02-12 11:16:47 +00:00
committed by GitHub
parent 7f7afef976 ddc88af809
commit f7c37fecdc
13 changed files with 163 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/src/less/buttons.less
View File

@@ -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;
}
}

7
src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less
View File

@@ -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;

44
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-cards.less
View File

@@ -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;
}
}

2
src/Umbraco.Web.UI.Client/src/less/mixins.less
View File

@@ -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

9
src/Umbraco.Web.UI.Client/src/less/tables.less
View File

@@ -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
// -------------------------------

9
src/Umbraco.Web.UI.Client/src/less/variables.less
View File

@@ -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;

1
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
View File

@@ -180,6 +180,7 @@
button-style="success"
label="Select image"
type="button"
disabled="model.selection.length === 0"
action="submit(model)">
</umb-button>

9
src/Umbraco.Web.UI.Client/src/views/member/edit.html
View File

@@ -24,13 +24,13 @@
<div>{{ group.label }}</div>
<ins class="umb-expansion-panel__expand" ng-class="{'icon-navigation-down': !group.open, 'icon-navigation-up': group.open}" class="icon-navigation-right">&nbsp;</ins>
</div>
<div class="umb-expansion-panel__content" ng-show="group.open">
<umb-property data-element="property-{{group.alias}}" ng-repeat="property in group.properties track by property.alias" property="property">
<umb-property-editor model="property"></umb-property-editor>
</umb-property>
</div>
</div>
</umb-editor-container>
@@ -38,8 +38,8 @@
<umb-editor-footer>
<umb-editor-footer-content-left>
<umb-breadcrumbs
ng-if="ancestors && ancestors.length > 0"
<umb-breadcrumbs
ng-if="ancestors && ancestors.length > 0"
ancestors="ancestors">
</umb-breadcrumbs>
</umb-editor-footer-content-left>
@@ -51,6 +51,7 @@
ng-if="page.listViewPath"
type="link"
href="#{{page.listViewPath}}"
button-style="link"
label="Return to list"
label-key="buttons_returnToList">
</umb-button>

14
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
View File

@@ -6,7 +6,7 @@
<div class="row-fluid" ng-switch-when="false">
<umb-editor-sub-header>
<umb-editor-sub-header ng-class="{'--state-selection':(selection.length > 0)}">
<umb-editor-sub-header-content-left>
@@ -85,7 +85,7 @@
type="button"
label="Clear selection"
label-key="buttons_clearSelection"
button-style="selection"
button-style="white"
action="clearSelection()"
disabled="actionInProgress">
</umb-button>
@@ -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 @@
<umb-button
ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
type="button"
button-style="selection"
button-style="white"
label-key="actions_delete"
icon="icon-trash"
action="delete()"

5
src/Umbraco.Web.UI.Client/src/views/users/user.html
View File

@@ -12,9 +12,9 @@
hide-alias="true"
navigation="vm.user.navigation">
</umb-editor-header>
<umb-editor-container>
<div ng-if="!vm.loading" class="umb-user-details-view-wrapper" style="padding: 0;">
<umb-editor-sub-views
@@ -42,6 +42,7 @@
<umb-button type="button"
action="vm.goToPage(vm.breadcrumbs[0])"
button-style="link"
label="Return to list"
label-key="buttons_returnToList"
disabled="vm.loading">

29
src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
View File

@@ -2,13 +2,13 @@
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<umb-editor-sub-header>
<umb-editor-sub-header ng-class="{'--state-selection':(vm.selection.length > 0)}">
<!-- No selection -->
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
<umb-button
type="button"
button-style="success"
button-style="action"
action="vm.createUserGroup()"
label="Create Group"
label-key="actions_createGroup">
@@ -40,6 +40,7 @@
<umb-button
type="button"
label-key="buttons_clearSelection"
button-style="white"
action="vm.clearSelection()"
size="xs">
</umb-button>
@@ -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 @@
<div style="margin-bottom: 20px;" class="flex items-center">
<div style="font-size: 16px;">
<span class="bold"><localize key="general_groups">Groups</localize> </span> <span>({{vm.userGroups.length}})</span>
<span class="bold"><localize key="general_groups">Groups</localize> </span> <span>({{vm.userGroups.length}})</span>
</div>
</div>
@@ -76,19 +78,20 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="group in vm.userGroups | filter:vm.filter"
ng-click="vm.goToUserGroup(group)"
ng-class="{'cursor-pointer': group.hasAccess, 'cursor-not-allowed': !group.hasAccess}">
<td style="width: 20px; padding-right: 5px">
<tr ng-repeat="group in vm.userGroups | filter:vm.filter"
ng-click="vm.goToUserGroup(group)"
ng-class="{'cursor-pointer': group.hasAccess, 'cursor-not-allowed': !group.hasAccess, '--selected': group.selected}">
<td style="padding-right: 5px">
<input
ng-show="group.hasAccess && group.group.alias !== 'admin' && group.group.alias !== 'translator'"
type="checkbox"
type="checkbox"
ng-model="group.selected"
ng-click="vm.selectUserGroup(group, vm.selection, $event)" />
ng-click="vm.selectUserGroup(group, vm.selection, $event)"
style="width: 20px; height: 100px;"/>
</td>
<td>
<umb-user-group-preview
<umb-user-group-preview
style="border-bottom: none; margin-bottom: 0; padding: 0;"
icon="group.group.icon"
name="group.group.name"
@@ -101,4 +104,4 @@
</tbody>
</table>
</div>
</div>

71
src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
View File

@@ -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;
}
}
}
});

85
src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
View File

@@ -5,7 +5,7 @@
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
<umb-editor-sub-header>
<umb-editor-sub-header ng-class="{'--state-selection':(vm.selection.length > 0)}">
<!-- No selection -->
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
@@ -48,7 +48,7 @@
<umb-button
type="button"
size="xs"
button-style="outline"
button-style="white"
label-key="buttons_clearSelection"
action="vm.clearSelection()"
disabled="actionInProgress">
@@ -57,16 +57,16 @@
<umb-editor-sub-header-section>
<strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
</umb-editor-sub-header-section>
</umb-editor-sub-header-content-left>
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
<umb-button
style="margin-right: 5px;"
ng-if="vm.allowSetUserGroup"
type="button"
disabled="!vm.allowSetUserGroup"
type="button"
size="xs"
button-style="outline"
button-style="white"
label-key="actions_setGroup"
icon="icon-users"
action="vm.openBulkUserGroupPicker()">
@@ -74,22 +74,22 @@
<umb-button
style="margin-right: 5px;"
ng-if="vm.allowEnableUser"
disabled="!vm.allowEnableUser"
type="button"
size="xs"
button-style="outline"
button-style="white"
state="vm.enableUserButtonState"
label-key="actions_enable"
icon="icon-check"
action="vm.enableUsers()">
</umb-button>
<umb-button
style="margin-right: 5px;"
ng-if="vm.allowUnlockUser"
disabled="!vm.allowUnlockUser"
type="button"
size="xs"
button-style="outline"
button-style="white"
state="vm.unlockUserButtonState"
label-key="actions_unlock"
icon="icon-unlocked"
@@ -97,10 +97,10 @@
</umb-button>
<umb-button
ng-if="vm.allowDisableUser"
disabled="!vm.allowDisableUser"
type="button"
size="xs"
button-style="outline"
button-style="white"
state="vm.disableUserButtonState"
label-key="actions_disable"
icon="icon-block"
@@ -123,7 +123,7 @@
<!-- State filter -->
<div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
<span><localize key="general_status">Status</localize>:</span>
<span><localize key="general_status">Status</localize>:</span>
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
<span class="caret"></span>
</a>
@@ -167,7 +167,7 @@
<!-- Order By -->
<div style="position: relative;">
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
<span><localize key="general_orderBy">Order by</localize>:</span>
<span><localize key="general_orderBy">Order by</localize>:</span>
<span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
<span class="caret"></span>
</a>
@@ -191,20 +191,18 @@
<!-- Layout: Cards -->
<div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
<a href="" class="umb-user-card" ng-repeat="user in vm.users track by user.key" ng-click="vm.clickUser(user)">
<div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
<umb-badge class="umb-user-card__badge" size="xs" ng-if="user.userDisplayState.key !== 'Active'" color="{{user.userDisplayState.color}}">
{{ user.userDisplayState.name }}
</umb-badge>
<div class="umb-user-card__avatar">
<umb-avatar size="l" color="secondary" name="{{user.name}}" img-src="{{user.avatars[2]}}" img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
</umb-avatar>
<div class="umb-user-card" ng-class="{'-selected': user.selected}" ng-repeat="user in vm.users track by user.key" ng-click="vm.selectUser(user)">
<div class="umb-user-card__content">
<div class="umb-user-card__goToUser" ng-click="vm.clickUser(user)">
<umb-badge class="umb-user-card__badge" size="xs" ng-if="user.userDisplayState.key !== 'Active'" color="{{user.userDisplayState.color}}">
{{ user.userDisplayState.name }}
</umb-badge>
<div class="umb-user-card__avatar">
<umb-avatar size="l" color="secondary" name="{{user.name}}" img-src="{{user.avatars[2]}}" img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
</umb-avatar>
</div>
<div class="umb-user-card__name">{{user.name}}</div>
</div>
<div class="umb-user-card__checkmark" ng-class="{'umb-user-card__checkmark--visible': user.selected || vm.selection.length > 0 }"
ng-click="vm.selectUser(user, vm.selection, $event)">
<umb-checkmark ng-if="!user.isCurrentUser" checked="user.selected" size="s"></umb-checkmark>
</div>
<div class="umb-user-card__name" href="">{{user.name}}</div>
<div class="umb-user-card__group">
<span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
</div>
@@ -222,7 +220,7 @@
</div>
</div>
</div>
</a>
</div>
</div>
<!-- Layout: Table -->
@@ -244,9 +242,14 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="user in vm.users track by user.key" ng-click="vm.clickUser(user)" style="cursor: pointer;" ng-mouseenter="user.hover = true" ng-mouseleave="user.hover = false">
<tr ng-repeat="user in vm.users track by user.key"
ng-click="vm.selectUser(user, vm.selection, $event)"
ng-class="{'--selected': user.selected}"
style="cursor: pointer;"
ng-mouseenter="user.hover = true"
ng-mouseleave="user.hover = false">
<td style="padding-left: 10px;">
<div ng-if="!user.isCurrentUser" ng-click="vm.selectUser(user, vm.selection, $event)">
<div ng-if="!user.isCurrentUser">
<umb-checkmark
ng-if="vm.selection.length > 0 || user.hover"
checked="user.selected"
@@ -254,7 +257,7 @@
</umb-checkmark>
</div>
</td>
<td scope="row">
<td scope="row" ng-click="vm.clickUser(user)">
<umb-avatar
size="xs"
color="secondary"
@@ -263,7 +266,7 @@
img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
</umb-avatar>
</td>
<td class="bold">{{user.name}}</td>
<td class="bold" ng-click="vm.clickUser(user)">{{user.name}}</td>
<td><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></td>
<td>{{ user.formattedLastLogin }}</td>
<td style="text-transform: capitalize;">
@@ -331,7 +334,7 @@
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
<span class="help-inline" ng-message="valServerField">{{addUserForm.name.errorMsg}}</span>
</span>
</umb-control-group>
<umb-control-group label="@general_username" label-for="username" required="true" ng-if="!vm.usernameIsEmail">
@@ -341,7 +344,7 @@
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
<span class="help-inline" ng-message="valServerField">{{addUserForm.username.errorMsg}}</span>
</span>
</umb-control-group>
<umb-control-group label="@general_email" label-for="email" required="true">
@@ -355,7 +358,7 @@
</umb-control-group>
<umb-control-group label="@user_usergroup" description="@user_groupsHelp" required="true">
<umb-user-group-preview
ng-repeat="group in vm.newUser.userGroups"
icon="group.icon"
@@ -417,18 +420,18 @@
<!-- Create user success -->
<div ng-if="vm.usersViewState === 'createUserSuccess'">
<umb-editor-sub-header>
<umb-editor-sub-header-content-left>
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
</umb-editor-sub-header-content-left>
</umb-editor-sub-header>
<div class="flex justify-center">
<umb-box style="max-width: 500px;">
<umb-box-content>
<!-- Success text -->
<div class="flex items-center" style="margin-bottom: 15px;">
<umb-checkmark
@@ -442,7 +445,7 @@
</div>
<p style="line-height: 1.6em; margin-bottom: 20px;"><localize key="user_userCreatedSuccessHelp"></localize></p>
<!-- New password -->
<div>
<label class="bold"><localize key="user_password">Password</localize></label>
@@ -510,7 +513,7 @@
<umb-box style="max-width: 500px;">
<umb-box-content>
<!-- Success text -->
<div class="flex items-center" style="margin-bottom: 15px;">
<umb-checkmark