From a83080ae3a97989b5fbd6f381e7c0e6ddf11263a Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 19 Jan 2016 15:21:06 -0500
Subject: [PATCH] (js,html) Improve Administration module

Warp ACL editor with a md-card and improve display on small screens.
---
 .../AdministrationUI/UIxAdministration.wox    | 23 +++---
 .../UIxAdministrationAclEditor.wox            | 81 ++++++++++---------
 .../AdministrationAclController.js            |  7 +-
 .../AdministrationController.js               |  7 +-
 4 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/UI/Templates/AdministrationUI/UIxAdministration.wox b/UI/Templates/AdministrationUI/UIxAdministration.wox
index c4902605b..fb12ee9f1 100644
--- a/UI/Templates/AdministrationUI/UIxAdministration.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministration.wox
@@ -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>
 
diff --git a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
index e72d7d6c3..e8752fc11 100644
--- a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
+++ b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
@@ -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>
diff --git a/UI/WebServerResources/js/Administration/AdministrationAclController.js b/UI/WebServerResources/js/Administration/AdministrationAclController.js
index f0aeb870a..c70975f2f 100644
--- a/UI/WebServerResources/js/Administration/AdministrationAclController.js
+++ b/UI/WebServerResources/js/Administration/AdministrationAclController.js
@@ -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.'));
       });
diff --git a/UI/WebServerResources/js/Administration/AdministrationController.js b/UI/WebServerResources/js/Administration/AdministrationController.js
index 3d7c01c20..4fe050c18 100644
--- a/UI/WebServerResources/js/Administration/AdministrationController.js
+++ b/UI/WebServerResources/js/Administration/AdministrationController.js
@@ -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) {