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

V8: update selection colors for users section

Browse Source
This commit is contained in:
Niels Lyngsø
2019-02-11 12:46:23 +01:00
parent e35436225f
commit 5342e65f7c
9 changed files with 112 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -199,14 +199,14 @@
vm.activeLayout = selectedLayout;
}
function selectUser(user, selection, event) {
function selectUser(user, event) {
// prevent the current user to be selected
if (!user.isCurrentUser) {
// prevent the current user to be selected, why?
//if (!user.isCurrentUser) {
if (user.selected) {
var index = selection.indexOf(user.id);
selection.splice(index, 1);
var index = vm.selection.indexOf(user.id);
vm.selection.splice(index, 1);
user.selected = false;
} else {
user.selected = true;
@@ -219,7 +219,7 @@
event.preventDefault();
event.stopPropagation();
}
}
//}
}
function clearSelection() {
@@ -230,11 +230,7 @@
}
function clickUser(user) {
if (vm.selection.length > 0) {
selectUser(user, vm.selection);
} else {
goToUser(user.id);
}
goToUser(user.id);
}
function disableUsers() {

64
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">
@@ -49,7 +49,7 @@
<umb-button
type="button"
size="xs"
button-style="outline"
button-style="white"
label-key="buttons_clearSelection"
action="vm.clearSelection()"
disabled="actionInProgress">
@@ -58,16 +58,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"
type="button"
size="xs"
button-style="outline"
button-style="white"
label-key="actions_setGroup"
icon="icon-users"
action="vm.openBulkUserGroupPicker()">
@@ -78,19 +78,19 @@
ng-if="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"
type="button"
size="xs"
button-style="outline"
button-style="white"
state="vm.unlockUserButtonState"
label-key="actions_unlock"
icon="icon-unlocked"
@@ -101,7 +101,7 @@
ng-if="vm.allowDisableUser"
type="button"
size="xs"
button-style="outline"
button-style="white"
state="vm.disableUserButtonState"
label-key="actions_disable"
icon="icon-block"
@@ -124,7 +124,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>
@@ -168,7 +168,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>
@@ -192,20 +192,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>
@@ -223,7 +221,7 @@
</div>
</div>
</div>
</a>
</div>
</div>
<!-- Layout: Table -->
@@ -332,7 +330,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">
@@ -342,7 +340,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">
@@ -356,7 +354,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"
@@ -418,18 +416,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
@@ -443,7 +441,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>
@@ -511,7 +509,7 @@
<umb-box style="max-width: 500px;">
<umb-box-content>
<!-- Success text -->
<div class="flex items-center" style="margin-bottom: 15px;">
<umb-checkmark