(js,html) Improve Administration module
Warp ACL editor with a md-card and improve display on small screens.pull/188/head
Francis Lachapelle
parent
f3b7bf4728
commit
a83080ae3a
|
|
@ -46,18 +46,20 @@
|
|||
<div layout="row" class="md-flex">
|
||||
|
||||
<div class="view-list" layout="column">
|
||||
<md-toolbar>
|
||||
<md-toolbar class="md-accent md-hue-1">
|
||||
<!-- search toolbar -->
|
||||
<div class="md-toolbar-tools sg-toolbar-secondary"
|
||||
<div class="md-toolbar-tools"
|
||||
sg-search="app.filter(searchText)">
|
||||
<md-icon>search</md-icon>
|
||||
<md-input-container md-no-float="md-no-float">
|
||||
<md-input-container class="md-block md-flex" md-no-float="md-no-float">
|
||||
<input name="folderSearch" type="search" ng-minlength="3"
|
||||
label:placeholder="Search Users"/>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-divider><!-- divider --></md-divider>
|
||||
|
||||
<md-content id="usersList" layout="column" class="md-flex">
|
||||
<md-subheader ng-show="app.service.$query">
|
||||
<span ng-switch="app.users.length">
|
||||
|
|
@ -71,7 +73,7 @@
|
|||
<md-list class="sg-section-list">
|
||||
<div ng-repeat="user in app.users">
|
||||
<md-list-item ng-class="{ 'sg-collapsed': user.uid != app.selectedUser.uid,
|
||||
'sg-expanded': user.uid == app.selectedUser.uid }"
|
||||
'sg-expanded': user.uid == app.selectedUser.uid }"
|
||||
ng-click="app.selectUser($index)">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
ng-if="::user.isGroup === 0"
|
||||
|
|
@ -104,7 +106,7 @@
|
|||
aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
|
||||
ng-click="app.selectFolder(folder)">
|
||||
<md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
|
||||
'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
|
||||
'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
|
||||
{{::folder.displayName}}
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
|
@ -115,17 +117,16 @@
|
|||
</md-content>
|
||||
</div>
|
||||
|
||||
<div id="detailView" class="view-detail" layout="column" layout-align="start center"
|
||||
<div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-1"
|
||||
layout="column" layout-align="start center"
|
||||
ng-class="{ 'sg-close': !app.selectedUser.selectedFolder }"
|
||||
ui-view="acl">
|
||||
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
|
||||
<md-content class="hide-sm md-flex layout-fill md-hue-1"
|
||||
<md-content class="hide-xs md-flex layout-fill md-hue-1"
|
||||
layout="column" layout-align="center center">
|
||||
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title">
|
||||
<var:string label:value="No resource selected"/>
|
||||
</div>
|
||||
<div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No resource selected"/></div>
|
||||
</md-content>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,47 +7,48 @@
|
|||
xmlns:label="OGo:label"
|
||||
>
|
||||
<div layout="column" class="layout-fill">
|
||||
<md-toolbar class="hide show-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Close"
|
||||
ng-click="acl.close()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button"
|
||||
<md-card>
|
||||
<md-toolbar class="hide show-xs">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button"
|
||||
label:aria-label="Close"
|
||||
ng-click="acl.close()">
|
||||
<md-icon>close</md-icon>
|
||||
</md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button"
|
||||
ng-click="acl.save()">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar>
|
||||
<div layout="row">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="acl.user.isGroup === 0"
|
||||
sg-email="::acl.user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
<div class="sg-list-avatar" ng-show="acl.user.isGroup"><!--list avatar--></div>
|
||||
<div class="msg-header-content">
|
||||
<h1 ng-class="{ 'sg-md-display-2--thin': isGtMedium,
|
||||
'sg-md-title': !isGtMedium }">{{::acl.user.cn}}</h1>
|
||||
<h6 class="sg-md-display-2-subheader"><md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
|
||||
'icon-event': acl.folderType == 'Calendar' }"><!--icon--></md-icon>
|
||||
{{::acl.folder.name}}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!-- only show the fab button on large screens -->
|
||||
<md-button type="button" class="hide-xs md-fab md-fab-bottom-right md-fab-overlap-bottom"
|
||||
ng-click="acl.save()">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-toolbar class="md-tall">
|
||||
<div layout="row">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="acl.user.isGroup === 0"
|
||||
sg-email="::acl.user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
<div class="sg-list-avatar" ng-show="acl.user.isGroup"><!--list avatar--></div>
|
||||
<div class="msg-header-content">
|
||||
<h1 class="sg-md-display-2--thin">{{::acl.user.cn}}</h1>
|
||||
<h6 class="sg-md-display-2-subheader"><md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
|
||||
'icon-event': acl.folderType == 'Calendar' }"><!--icon--></md-icon>
|
||||
{{::acl.folder.name}}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<!-- only show the fab button on large screens -->
|
||||
<md-button type="button" class="hide-sm md-fab md-fab-bottom-right md-fab-overlap-bottom"
|
||||
ng-click="acl.save()">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
<md-content class="md-flex md-static">
|
||||
<div class="viewer">
|
||||
</md-toolbar>
|
||||
<md-card-content class="md-flex md-static">
|
||||
<div layout="row">
|
||||
<md-icon>search</md-icon>
|
||||
<md-autocomplete
|
||||
class="md-flex"
|
||||
class="md-flex sg-input-no-message"
|
||||
md-input-name="addUser"
|
||||
md-search-text="acl.searchText"
|
||||
md-selected-item="acl.userToAdd"
|
||||
|
|
@ -73,8 +74,8 @@
|
|||
<md-card ng-repeat="user in acl.users | orderBy:['userClass', 'displayName']"
|
||||
class="sg-collapsed"
|
||||
ng-class="{ 'sg-expanded': user.uid == acl.selectedUid }">
|
||||
<md-button ng-click="acl.selectUser(user)">
|
||||
<div layout="row" layout-align="start center" class="md-flex">
|
||||
<a class="md-flex md-button" ng-click="acl.selectUser(user)">
|
||||
<div layout="row" layout-align="start center">
|
||||
<span class="card-picture" ng-switch="user.userClass">
|
||||
<div ng-switch-when="normal-user">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
|
|
@ -94,7 +95,7 @@
|
|||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-button>
|
||||
</a>
|
||||
<md-card-content id="AccessRightList" ng-show="user.uid == acl.selectedUid">
|
||||
<var:if condition="canSubscribeUsers">
|
||||
<md-checkbox ng-model="user.isSubscribed"
|
||||
|
|
@ -118,7 +119,7 @@
|
|||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
</md-content>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
AdministrationAclController.$inject = ['$animate', '$state', '$mdToast', 'stateUser', 'stateFolder', 'User'];
|
||||
function AdministrationAclController($animate, $state, $mdToast, stateUser, stateFolder, User) {
|
||||
AdministrationAclController.$inject = ['$animate', '$state', '$mdMedia', '$mdToast', 'stateUser', 'stateFolder', 'User'];
|
||||
function AdministrationAclController($animate, $state, $mdMedia, $mdToast, stateUser, stateFolder, User) {
|
||||
var vm = this;
|
||||
|
||||
vm.user = stateUser;
|
||||
|
|
@ -85,6 +85,9 @@
|
|||
.position('top right')
|
||||
.hideDelay(3000)
|
||||
);
|
||||
// Close acls on small devices
|
||||
if ($mdMedia('xs'))
|
||||
close();
|
||||
}, function(data, status) {
|
||||
Dialog.alert(l('Warning'), l('An error occured please try again.'));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
AdministrationController.$inject = ['$state', '$mdToast', 'Dialog', 'encodeUriFilter', 'User'];
|
||||
function AdministrationController($state, $mdToast, Dialog, encodeUriFilter, User) {
|
||||
AdministrationController.$inject = ['$state', '$mdToast', '$mdMedia', '$mdSidenav', 'Dialog', 'encodeUriFilter', 'User'];
|
||||
function AdministrationController($state, $mdToast, $mdMedia, $mdSidenav, Dialog, encodeUriFilter, User) {
|
||||
var vm = this;
|
||||
|
||||
vm.service = User;
|
||||
|
|
@ -23,6 +23,9 @@
|
|||
|
||||
function go(module) {
|
||||
$state.go('administration.' + module);
|
||||
// Close sidenav on small devices
|
||||
if ($mdMedia('xs'))
|
||||
$mdSidenav('left').close();
|
||||
}
|
||||
|
||||
function filter(searchText) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue