Improve ACL editor

This commit is contained in:
Francis Lachapelle
2016-06-20 16:10:52 -04:00
parent 6b5571ea2c
commit 66e1fbd556
5 changed files with 52 additions and 28 deletions

View File

@@ -71,10 +71,10 @@
</md-item-template>
</md-autocomplete>
</div>
<md-card ng-repeat="user in acl.users | orderBy:['userClass', 'displayName']"
<md-card ng-repeat="user in acl.users track by user.uid | orderBy:['userClass', 'displayName']"
class="sg-collapsed"
ng-class="{ 'sg-expanded': user.uid == acl.selectedUid }">
<a class="md-flex md-button" ng-click="acl.selectUser(user)">
<a class="md-flex md-button" ng-click="acl.selectUser(user, $event)">
<div layout="row" layout-align="start center">
<span class="card-picture" ng-switch="user.userClass">
<div ng-switch-when="normal-user">
@@ -89,7 +89,12 @@
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
</div>
<md-button class="md-icon-button md-secondary" type="button"
<md-button class="md-icon-button md-secondary" type="button"
ng-click="acl.selectAllRights(user)"
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
<md-icon>select_all</md-icon>
</md-button>
<md-button class="md-icon-button" type="button"
ng-click="acl.removeUser(user)"
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
<md-icon>delete</md-icon>

View File

@@ -46,10 +46,10 @@
</md-item-template>
</md-autocomplete>
</div>
<md-card ng-repeat="user in acl.users | orderBy:['userClass', 'displayName']"
<md-card ng-repeat="user in acl.users track by user.uid | orderBy:['userClass', 'displayName']"
class="sg-collapsed"
ng-class="{ 'sg-expanded': user.uid == acl.selectedUid }">
<a class="md-flex md-button" ng-click="acl.selectUser(user)">
<a class="md-flex md-button" ng-click="acl.selectUser(user, $event)">
<div layout="row" layout-align="start center">
<span class="card-picture" ng-switch="user.userClass">
<div ng-switch-when="normal-user">
@@ -69,7 +69,7 @@
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
<md-icon>select_all</md-icon>
</md-button>
<md-button class="md-icon-button md-secondary" type="button"
<md-button class="md-icon-button" type="button"
ng-click="acl.removeUser(user)"
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
<md-icon>delete</md-icon>

View File

@@ -7,8 +7,8 @@
/**
* @ngInject
*/
AdministrationAclController.$inject = ['$animate', '$state', '$mdMedia', '$mdToast', 'stateUser', 'stateFolder', 'User'];
function AdministrationAclController($animate, $state, $mdMedia, $mdToast, stateUser, stateFolder, User) {
AdministrationAclController.$inject = ['$timeout', '$state', '$mdMedia', '$mdToast', 'stateUser', 'stateFolder', 'User'];
function AdministrationAclController($timeout, $state, $mdMedia, $mdToast, stateUser, stateFolder, User) {
var vm = this;
vm.user = stateUser;
@@ -17,6 +17,7 @@
vm.selectedUser = null;
vm.selectedUid = null;
vm.selectUser = selectUser;
vm.selectAllRights = selectAllRights;
vm.removeUser = removeUser;
vm.getTemplate = getTemplate;
vm.close = close;
@@ -38,7 +39,13 @@
return '../' + stateFolder.owner + '/Calendar/' + stateFolder.id + '/UIxCalUserRightsEditor';
}
function selectUser(user) {
function selectAllRights(user) {
stateFolder.$acl.$selectAllRights(user);
}
function selectUser(user, $event) {
if ($event && $event.target.parentNode.classList.contains('md-secondary'))
return false;
if (vm.selectedUid == user.uid) {
vm.selectedUid = null;
}
@@ -54,18 +61,19 @@
}
function removeUser(user) {
stateFolder.$acl.$removeUser(user.uid, stateFolder.owner).catch(function(data, status) {
Dialog.alert(l('Warning'), l('An error occured please try again.'));
});
$timeout(function() {
stateFolder.$acl.$removeUser(user.uid, stateFolder.owner);
}, 500); // wait for CSS transition to complete (see card.scss)
}
function addUser(data) {
if (data) {
stateFolder.$acl.$addUser(data, stateFolder.owner).then(function() {
stateFolder.$acl.$addUser(data, stateFolder.owner).then(function(user) {
vm.userToAdd = '';
vm.searchText = '';
}, function(error) {
Dialog.alert(l('Warning'), error);
vm.selectedUid = null;
if (user)
selectUser(user);
});
}
}
@@ -88,8 +96,6 @@
// Close acls on small devices
if ($mdMedia('xs'))
close();
}, function(data, status) {
Dialog.alert(l('Warning'), l('An error occured please try again.'));
});
}
}

View File

@@ -6,8 +6,8 @@
/**
* @ngInject
*/
AclController.$inject = ['$mdDialog', 'Dialog', 'usersWithACL', 'User', 'folder'];
function AclController($mdDialog, Dialog, usersWithACL, User, folder) {
AclController.$inject = ['$timeout', '$mdDialog', 'Dialog', 'usersWithACL', 'User', 'folder'];
function AclController($timeout, $mdDialog, Dialog, usersWithACL, User, folder) {
var vm = this;
vm.users = usersWithACL; // ACL users
@@ -21,8 +21,8 @@
vm.saveModal = saveModal;
vm.confirmChange = confirmChange;
vm.removeUser = removeUser;
vm.selectAllRights = selectAllRights;
vm.addUser = addUser;
vm.selectAllRights = selectAllRights;
vm.selectUser = selectUser;
vm.confirmation = { showing: false,
message: ''};
@@ -53,11 +53,9 @@
}
function removeUser(user) {
folder.$acl.$removeUser(user.uid);
}
function selectAllRights(user) {
folder.$acl.$selectAllRights(user);
$timeout(function() {
folder.$acl.$removeUser(user.uid);
}, 500); // wait for CSS transition to complete (see card.scss)
}
function addUser(data) {
@@ -68,13 +66,17 @@
vm.selectedUid = null;
if (user)
selectUser(user);
}, function(error) {
Dialog.alert(l('Warning'), error);
});
}
}
function selectUser(user) {
function selectAllRights(user) {
folder.$acl.$selectAllRights(user);
}
function selectUser(user, $event) {
if ($event && $event.target.parentNode.classList.contains('md-secondary'))
return false;
if (vm.selectedUid == user.uid) {
vm.selectedUid = null;
}

View File

@@ -59,6 +59,17 @@ md-card {
padding-top: 0;
}
}
// Animate item removal
&.ng-leave {
transform: translateX(0%);
transition-duration: 500ms;
&.ng-leave-active {
.md-button:not([disabled]):hover {
background-color: transparent;
}
transform: translateX(-70%);
}
}
}
&.sg-collapsed {