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

use umb-table for users table

Browse Source
This commit is contained in:
Niels Lyngsø
2019-03-19 10:55:36 +01:00
parent 542eb2ab1d
commit 4b02bf2ddf
3 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -167,6 +167,7 @@
@import "components/umb-property-file-upload.less";
@import "components/users/umb-user-cards.less";
@import "components/users/umb-user-table.less";
@import "components/users/umb-user-details.less";
@import "components/users/umb-user-group-picker-list.less";
@import "components/users/umb-user-group-preview.less";

27
src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-table.less Normal file
View File

@@ -0,0 +1,27 @@
.umb-user-table-col-avatar {
flex: 0 0 32px;
padding: 15px 0;
}
.umb-user-table-row {
cursor: default;
}
.umb-user-table-row.-selectable {
cursor: pointer;
}
.umb-user-table-row.-selected {
&::before {
content: "";
position: absolute;
z-index:1;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
border: 2px solid @ui-selected-border;
box-shadow: 0 0 2px 0 fade(@ui-selected-border, 80%);
pointer-events: none;
}
}

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

@@ -226,38 +226,35 @@
<!-- Layout: Table -->
<div ng-if="vm.activeLayout.path === '2'">
<table class="table table-hover">
<thead>
<tr>
<th style="padding-left: 10px; width: 10px;">
<div class="umb-table">
<div class="umb-table-head">
<div class="umb-table-row">
<div class="umb-table-cell" style="padding-left: 10px; width: 10px;">
<a href="" style="text-decoration: none;" ng-click="vm.selectAll()">
<umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark>
</a>
</th>
<th style="width: 70px;"></th>
<th><localize key="general_name">Name</localize></th>
<th><localize key="user_usergroup">User group</localize></th>
<th><localize key="user_lastLogin">Last login</localize></th>
<th><localize key="general_status">Status</localize></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in vm.users track by user.key"
</div>
<div class="umb-table-cell umb-user-table-col-avatar" style="width: 70px;"></div>
<div class="umb-table-cell umb-table__name"><localize key="general_name">Name</localize></div>
<div class="umb-table-cell"><localize key="user_usergroup">User group</localize></div>
<div class="umb-table-cell"><localize key="user_lastLogin">Last login</localize></div>
<div class="umb-table-cell"><localize key="general_status">Status</localize></div>
</div>
</div>
<div class="umb-table-body">
<div ng-repeat="user in vm.users track by user.key"
ng-click="vm.selectUser(user, vm.selection, $event)"
ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
style="cursor: pointer;"
ng-mouseenter="user.hover = true"
ng-mouseleave="user.hover = false">
<td style="padding-left: 10px;">
ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
class="umb-table-row umb-user-table-row">
<div class="umb-table-cell" style="padding-left: 10px;">
<div ng-if="!user.isCurrentUser">
<umb-checkmark
ng-if="vm.selection.length > 0 || user.hover"
checked="user.selected"
size="xs">
</umb-checkmark>
</div>
</td>
<td scope="row">
</div>
<div class="umb-table-cell umb-user-table-col-avatar" scope="row">
<a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
<umb-avatar
size="xs"
@@ -267,25 +264,25 @@
img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
</umb-avatar>
</a>
</td>
<td class="bold">
</div>
<div class="umb-table-cell umb-table__name">
<a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
{{user.name}}
</a>
</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;">
</div>
<div class="umb-table-cell"><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></div>
<div class="umb-table-cell">{{ user.formattedLastLogin }}</div>
<div class="umb-table-cell" style="text-transform: capitalize;">
<umb-badge
size="xs"
ng-if="user.userDisplayState.key !== 'Active'"
color="{{user.userDisplayState.color}}">
{{ user.userDisplayState.name }}
</umb-badge>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>