Fix display of Admin module on small devices
Francis Lachapelle
parent
8924a2b670
commit
4da53b88b6
|
|
@ -62,7 +62,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"
|
||||
|
|
@ -106,7 +106,9 @@
|
|||
</md-content>
|
||||
</div>
|
||||
|
||||
<div id="detailView" class="view-detail" layout="column" layout-align="start center" ui-view="acl">
|
||||
<div id="detailView" class="view-detail" 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" layout="column">
|
||||
<md-input-container layout-align="center center">
|
||||
|
|
|
|||
|
|
@ -6,102 +6,119 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label"
|
||||
>
|
||||
<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 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 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"
|
||||
ng-click="acl.save()">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<md-button type="button" class="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="layout-fill layout-padding">
|
||||
<div layout="row">
|
||||
<md-icon>search</md-icon>
|
||||
<md-autocomplete
|
||||
class="md-flex"
|
||||
md-input-name="addUser"
|
||||
md-search-text="acl.searchText"
|
||||
md-selected-item="acl.userToAdd"
|
||||
md-selected-item-change="acl.addUser(user)"
|
||||
md-items="user in acl.userFilter(acl.searchText)"
|
||||
md-item-text="user.empty"
|
||||
md-min-length="3"
|
||||
md-delay="300"
|
||||
md-no-cache="true"
|
||||
label:md-floating-label="Add User">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="acl.searchText"
|
||||
md-highlight-flags="^i">{{user.cn}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="acl.searchText"
|
||||
md-highlight-flags="^i">{{user.c_email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
</div>
|
||||
<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">
|
||||
<span class="card-picture" ng-switch="user.userClass">
|
||||
<div ng-switch-when="normal-user">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
sg-email="user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div ng-switch-when="normal-group" class="md-avatar sg-avatar-list"><!-- normal-group --></div>
|
||||
<div ng-switch-when="public-user" class="md-avatar sg-avatar-list"><!-- public-user --></div>
|
||||
</span>
|
||||
<div class="sg-tile-content">
|
||||
<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"
|
||||
ng-click="acl.removeUser(user)"
|
||||
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
</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-card-content id="AccessRightList" ng-show="user.uid == acl.selectedUid">
|
||||
<var:if condition="canSubscribeUsers">
|
||||
<md-checkbox ng-model="user.isSubscribed"
|
||||
label:arial-label="Subscribe User"
|
||||
ng-disabled="user.wasSubscribed"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0"
|
||||
ng-hide="user.$isSpecial()">
|
||||
<var:string label:value="Subscribe User"/>
|
||||
</md-checkbox>
|
||||
</var:if>
|
||||
<div ng-include="acl.getTemplate()"></div>
|
||||
</md-toolbar>
|
||||
<md-content class="md-flex md-static">
|
||||
<div class="viewer">
|
||||
<div layout="row">
|
||||
<md-icon>search</md-icon>
|
||||
<md-autocomplete
|
||||
class="md-flex"
|
||||
md-input-name="addUser"
|
||||
md-search-text="acl.searchText"
|
||||
md-selected-item="acl.userToAdd"
|
||||
md-selected-item-change="acl.addUser(user)"
|
||||
md-items="user in acl.userFilter(acl.searchText)"
|
||||
md-item-text="user.empty"
|
||||
md-min-length="3"
|
||||
md-delay="300"
|
||||
md-no-cache="true"
|
||||
label:md-floating-label="Add User">
|
||||
<md-item-template>
|
||||
<span class="md-contact-suggestion">
|
||||
<span class="md-contact-name"
|
||||
md-highlight-text="acl.searchText"
|
||||
md-highlight-flags="^i">{{user.cn}}</span>
|
||||
<span class="md-contact-email"
|
||||
md-highlight-text="acl.searchText"
|
||||
md-highlight-flags="^i">{{user.c_email}}</span>
|
||||
</span>
|
||||
</md-item-template>
|
||||
</md-autocomplete>
|
||||
</div>
|
||||
<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">
|
||||
<span class="card-picture" ng-switch="user.userClass">
|
||||
<div ng-switch-when="normal-user">
|
||||
<sg-avatar-image class="md-avatar"
|
||||
sg-email="user.c_email"
|
||||
size="40"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div ng-switch-when="normal-group" class="md-avatar sg-avatar-list"><!-- normal-group --></div>
|
||||
<div ng-switch-when="public-user" class="md-avatar sg-avatar-list"><!-- public-user --></div>
|
||||
</span>
|
||||
<div class="sg-tile-content">
|
||||
<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"
|
||||
ng-click="acl.removeUser(user)"
|
||||
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
|
||||
<md-icon>delete</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-button>
|
||||
<md-card-content id="AccessRightList" ng-show="user.uid == acl.selectedUid">
|
||||
<var:if condition="canSubscribeUsers">
|
||||
<md-checkbox ng-model="user.isSubscribed"
|
||||
label:arial-label="Subscribe User"
|
||||
ng-disabled="user.wasSubscribed"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0"
|
||||
ng-hide="user.$isSpecial()">
|
||||
<var:string label:value="Subscribe User"/>
|
||||
</md-checkbox>
|
||||
</var:if>
|
||||
<div ng-include="acl.getTemplate()"></div>
|
||||
|
||||
<!-- <script type="text/ng-template" id="UIxContactsUserRightsEditor">
|
||||
<var:component className="UIxContactsUserRightsEditor" />
|
||||
</script>
|
||||
<!-- <script type="text/ng-template" id="UIxContactsUserRightsEditor">
|
||||
<var:component className="UIxContactsUserRightsEditor" />
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="UIxCalUserRightsEditor">
|
||||
<var:component className="UIxCalUserRightsEditor" />
|
||||
</script> -->
|
||||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</md-content>
|
||||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
</md-content>
|
||||
</div>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -105,6 +105,8 @@
|
|||
name: folder.displayName });
|
||||
}
|
||||
|
||||
stateUser.selectedFolder = o.id;
|
||||
|
||||
return o;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
vm.selectUser = selectUser;
|
||||
vm.removeUser = removeUser;
|
||||
vm.getTemplate = getTemplate;
|
||||
vm.close = close;
|
||||
vm.save = save;
|
||||
|
||||
vm.userToAdd = '';
|
||||
|
|
@ -69,6 +70,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
$state.go('administration.rights').then(function() {
|
||||
delete vm.user.selectedFolder;
|
||||
vm.user = null;
|
||||
});
|
||||
}
|
||||
|
||||
function save() {
|
||||
stateFolder.$acl.$saveUsersRights(stateFolder.owner).then(function() {
|
||||
$mdToast.show(
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ md-card {
|
|||
}
|
||||
.md-icon-button {
|
||||
transition: $swift-linear;
|
||||
transition-duration: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
opacity: 1;
|
||||
&.ng-hide {
|
||||
|
|
@ -49,7 +50,7 @@ md-card {
|
|||
&.sg-expanded {
|
||||
@extend .md-whiteframe-z2;
|
||||
margin: 0 0 1px 0;
|
||||
&-remove {
|
||||
&-remove { // ngAnimate with ngClass
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,31 @@
|
|||
/// AdministrationUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
[id="usersList"] > md-list {
|
||||
// Since the users list doesn't use the virtual repeater, force the vertical scroll
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
[ui-view="administration"] {
|
||||
[id="usersList"] > md-list {
|
||||
// Since the users list doesn't use the virtual repeater, force the vertical scroll
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.sg-folder .md-button {
|
||||
// Buttons in list-item to view the ACLs of a user's folder
|
||||
@extend .sg-no-wrap;
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
.sg-folder .md-button {
|
||||
// Buttons in list-item to view the ACLs of a user's folder
|
||||
@extend .sg-no-wrap;
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
@include from(md) {
|
||||
.viewer {
|
||||
// Leave space for a tall toolbar
|
||||
top: $toolbar-tall-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue