Refactor acl object and applied comments

UI/MainUI/SOGoUserHomePage.m

@@ -410,7 +410,8 @@
           if ([domain length])
             uid = [NSString stringWithFormat: @"%@@%@", uid, domain];
           [jsonLine setObject: uid forKey: @"uid"];
-          [jsonLine setObject: [NSString stringWithFormat:@"%@ <%@>",[contact objectForKey: @"cn"], [contact objectForKey: @"c_email"]] forKey: @"displayName"];
+          [jsonLine setObject: [contact objectForKey: @"cn"] forKey: @"cn"];
+          [jsonLine setObject: [contact objectForKey: @"c_email"] forKey: @"c_email"];
           [jsonLine setObject: [NSNumber numberWithBool: [[contact objectForKey: @"isGroup"] boolValue]] forKey: @"isGroup"];
           contactInfo = [contact objectForKey: @"c_info"];
           if (contactInfo)

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -67,43 +67,40 @@
     <!-- modal for addressbook sharing options -->
     <script type="text/ng-template" id="addressbookSharing.html">
       <div id="modalACL">
-        <h2><var:string label:value="Sharing"/></h2>
+        <h2><var:string label:value="Sharing - "/>{{addressbook.name}}</h2>
-        <div>
+        <ul class="small-block-grid-2">
         <!-- left side -->
-          <div id="usersList">
+          <li id="usersList">
-            <div>
+            <ul>
-              <ul>
+              <li ng-repeat="user in users | orderBy:['userClass', 'displayName']" data-ng-click="selectUser(user)" data-ng-class="{_selected: user==selected}">
-                <li ng-repeat="user in users | orderBy:['userClass', 'displayName']" data-ng-click="selectUser(user)" 
+                  <span class="card-picture" data-ng-switch="user.userClass">
-                    data-ng-class="{_selected: user==selected}">
+                    <i data-ng-switch-when="normal-user" class="icon-ion-ios7-person"><!-- normal-user --></i>
-                  <span>
+                    <i data-ng-switch-when="public-user" class="icon-ion-ios7-people"><!-- public-user --></i>
-                    <i data-ng-class="(user.userClass == 'public-user') ? 'icon-user4' : 'icon-vcard'"><!-- spacer --></i>
+                  </span>
-                    {{user.displayName}}</span>
+                  <span class="name">{{user.displayName}}</span>
                   <span class="subscriptionArea" data-ng-hide="user.userClass == 'public-user'">
                     <input type="checkbox" ng-model="user.isSubscribed" ng-checked="user.isSubscribed" 
                            ng-disabled="!user.canSubscribeUser" ng-change="markUserAsDirty(user)" />
-                    <span><var:string label:value="Subscribe User"/></span></span>
+                    <span><var:string label:value="Subscribe User"/></span>
-                </li>
+                  </span>
-              </ul>
+              </li>
-            </div>
+            </ul>
-            <div>
+            <form ng-submit="addUser(userToAdd)" class="addContactsToolbar">
-              <form ng-submit="addUser(userToAdd)" class="addContactsToolbar">
+              <table id="bottomTable">
-                <input type="search" ng-model="userToAdd" label:placeholder="Add..." typeahead-wait-ms="1000"
+                <tr>
-                      typeahead="user as user.displayName for user in User.$filter($viewValue) | filter:$viewValue" class="form-control" />
+                  <td id="td_1"><i class="icon-ion-search"><!-- search --></i>
-                <button type="submit" ><var:string label:value="Add User"/></button>
+                       <input type="search" ng-model="userToAdd" label:placeholder="Add..." typeahead-wait-ms="1000"
-                <button type="button" ng-disabled="userIsReadOnly()" data-ng-click="removeUser()"><var:string label:value="Remove User"/></button>
+                              typeahead="user as user.cn for user in User.$filter($viewValue) | filter:$viewValue" class="form-control" /></td>
-              </form>
+                  <td id="td_2"><button type="submit" ><var:string label:value="Add User"/></button>
-
+                      <button type="button" ng-disabled="userIsReadOnly()" data-ng-click="removeUser()"><var:string label:value="Remove User"/></button></td>
-            </div>
+                </tr>
-          </div>
+              </table>
-
+            </form>
-          <!-- right side -->
+          </li>
-          <div id="AccessRightList">
+        <!-- right side -->
-            <input id="uid" type="hidden" name="uid" var:value="uid"/>
+          <li id="AccessRightList">
             <div class="title">
-              <label><var:string label:value="Access rights to"/><br />
+              {{userSelected.displayName}}
-                 <span id="folderName" class="value">{{addressbook.name}}</span></label>
-              <label><var:string label:value="For user"/><br />
-                 <span class="value">{{userSelected.displayName}}</span></label>
             </div>
             <div class="calendarUserRights">
               <ul>
@@ -128,15 +125,15 @@
                   <var:string label:value="This person can read the cards of this addressbook."/></li>
               </ul>
             </div>
-          </div>
+          </li>
-          </div>
+        </ul>
-          <div id="aclButtons">
+      </div>
-            <button data-ng-click="closeModal()"><var:string label:value="Close"/></button>
+      <div id="aclButtons">
-            <button data-ng-click="saveModal()"><var:string label:value="Save"/></button>
+        <button data-ng-click="closeModal()"><var:string label:value="Close"/></button>
-          </div>
+        <button data-ng-click="saveModal()"><var:string label:value="Save"/></button>
-        </div>
+      </div>
-        <span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
+      <span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
-      </script>
+    </script>
 
     <script type="text/ng-template" id="addressbooks.html">
 
@@ -238,8 +235,8 @@
             <!-- <input type="checkbox" class="card-picture left"/> -->
             <a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: currentCard.id})">
               <span class="card-picture" data-ng-switch="currentCard.tag">
-                <i data-ng-switch-when="vcard" class="icon-ion-ios7-person"><!-- card --></i>
+                <i data-ng-switch-when="vcard" data-ng-class="{'icon-ion-ios7-person': currentCard.photoURL == undefined}" ><!-- card --></i>
-                <i data-ng-switch-when="vlist" class="icon-ion-ios7-people"><!-- list --></i>
+                <i data-ng-switch-when="vlist" data-ng-class="icon-ion-ios7-people"><!-- list --></i>
               </span>
               <div class="name" data-ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
               <div><span data-ng-show="currentCard.emails"><i class="icon-ion-ios7-email-outline"><!-- email --></i> {{currentCard.$preferredEmail()}}</span><var:entity const:name="nbsp" /></div>

UI/WebServerResources/js/Common/acl-model.js

@@ -1,50 +1,51 @@
 (function() {
   'use strict';
 
-  function AclUsers(folder) {  
+  function Acl(folder_id) {
-    this.folder_id = folder.id;  
+    this.folder_id = folder_id;
   }
 
   /* The factory we'll use to register with Angular */
-  AclUsers.factory = ['$q', '$timeout', 'sgSettings', 'sgResource', function($q, $timeout, Settings, Resource) {
+  Acl.factory = ['sgSettings', 'sgResource', function(Settings, Resource) {
-    angular.extend(AclUsers, {
+    angular.extend(Acl, {
-      $q: $q,
-      $timeout: $timeout,
       $$resource: new Resource(Settings.baseURL)
     });
 
-    return AclUsers; // return constructor
+    return Acl; // return constructor
   }];
 
   /* Factory registration in Angular module */
-  angular.module('SOGo.Common').factory('sgAclUsers', AclUsers.factory);
+  angular.module('SOGo.Common').factory('sgAcl', Acl.factory);
 
   /* Instance methods
    * Public method, assigned to prototype      
    */
-  AclUsers.prototype.userRights = function(uid) {
+  Acl.prototype.$userRights = function(uid) {
     var param = {"uid": uid};
-    return AclUsers.$$resource.fetch(this.folder_id, "userRights", param);
+    return Acl.$$resource.fetch(this.folder_id, "userRights", param);
   };
 
-  AclUsers.prototype.addUser = function(uid) {
+  Acl.prototype.$addUser = function(uid) {
     var param = {"uid": uid};
-    AclUsers.$$resource.fetch(this.folder_id, "addUserInAcls", param);
+    Acl.$$resource.fetch(this.folder_id, "addUserInAcls", param);
   };
 
-  AclUsers.prototype.removeUser = function(uid) {
+  Acl.prototype.$removeUser = function(uid) {
     var param = {"uid": uid};
-    AclUsers.$$resource.fetch(this.folder_id, "removeUserFromAcls", param);
+    Acl.$$resource.fetch(this.folder_id, "removeUserFromAcls", param);
   };
 
-  AclUsers.prototype.saveUsersRights = function(dirtyObjects) {
+  Acl.prototype.$saveUsersRights = function(dirtyObjects) {
     var param = {"action": "saveUserRights"};
-    AclUsers.$$resource.save(this.folder_id, dirtyObjects, param);
+    Acl.$$resource.save(this.folder_id, dirtyObjects, param);
   };
 
-  AclUsers.prototype.subscribeUsers = function(uids) {
+  Acl.prototype.$subscribeUsers = function(uids) {
     var param = {"uids": uids};
-    AclUsers.$$resource.fetch(this.folder_id, "subscribeUsers", param);
+    Acl.$$resource.fetch(this.folder_id, "subscribeUsers", param);
   };
 
+  Acl.prototype.$users = function() {
+    return Acl.$$resource.fetch(this.folder_id, "acls");
+  };
 })();

UI/WebServerResources/js/Common/resource.js

@@ -117,11 +117,9 @@
    * @param {Object} params - Object parameters injected through the $http protocol 
    */
   Resource.prototype.fetch = function(folder_id, action, params) {
-    var deferred = this._q.defer();
+    var deferred = this._q.defer(),
-    var folder_id_path = folder_id ? ("/" + folder_id) : "";
+        path = [this._path, (folder_id ? folder_id : ""), (action ? action : "")];
-    var action_path = action ? ("/" + action) : "";
+    path = _.compact(path).join("/");
-
-    var path = this._path + folder_id_path + action_path;
 
     this._http({
       method: 'GET',

UI/WebServerResources/js/Contacts/addressbook-model.js

@@ -17,6 +17,9 @@
         var newAddressBookData = AddressBook.$$resource.create('createFolder', this.name);
         this.$unwrap(newAddressBookData);
       }
+      else if (this.id){
+        this.$acl = new AddressBook.$$acl(this.id);
+      }
     }
     else {
       // The promise will be unwrapped first
@@ -29,12 +32,13 @@
    * @desc The factory we'll use to register with Angular
    * @returns the AddressBook constructor
    */
-  AddressBook.$factory = ['$q', '$timeout', 'sgSettings', 'sgResource', 'sgCard', function($q, $timeout, Settings, Resource, Card) {
+  AddressBook.$factory = ['$q', '$timeout', 'sgSettings', 'sgResource', 'sgCard', 'sgAcl', function($q, $timeout, Settings, Resource, Card, Acl) {
     angular.extend(AddressBook, {
       $q: $q,
       $timeout: $timeout,
       $$resource: new Resource(Settings.baseURL),
-      $Card: Card
+      $Card: Card,
+      $$acl: Acl
     });
 
     return AddressBook; // return constructor
@@ -131,6 +135,7 @@
         angular.forEach(cards, function(o, i) {
           cards[i] = new AddressBook.$Card(o);
         });
+
         return cards;
       });
     });
@@ -198,6 +203,8 @@
         angular.forEach(_this.cards, function(o, i) {
           _this.cards[i] = new AddressBook.$Card(o);
         });
+        // Instanciate Acl object
+        _this.$acl = new AddressBook.$$acl(_this.id);
       });
     }, function(data) {
       AddressBook.$timeout(function() {

UI/WebServerResources/js/ContactsUI.js

@@ -138,7 +138,7 @@
             i = _.indexOf(_.pluck($scope.addressbooks, 'id'), $rootScope.addressbook.id);
           }
           $scope.editMode = $rootScope.addressbook.id;
-	  $scope.originalAddressbook = angular.extend({}, $scope.addressbook.$omit());
+          $scope.originalAddressbook = angular.extend({}, $scope.addressbook.$omit());
           focus('addressBookName_' + i);
         }
       };
@@ -182,44 +182,53 @@
       $scope.share = function() {
         var modal = $modal.open({
           templateUrl: 'addressbookSharing.html',
-          controller: function($scope, $http, $modalInstance, sgAclUsers, sgUser) {
+          controller: function($scope, $modalInstance, sgUser) {
             /* Variables for the scope */
-            $scope.AclUsers = new sgAclUsers($rootScope.addressbook);
-            $scope.User = new sgUser($rootScope.addressbook);
             var dirtyObjects = {};
-            $scope.User.$acls().then(function(users) {
+            stateAddressbook.$acl.$users().then(function(users) {
               $scope.users = [];
               angular.forEach(users, function(user){
-                user.canSubscribeUser = (user.isSubscribed) ? false : true;
+                user.canSubscribeUser = user.isSubscribed;
                 $scope.users.push(user);
               })
             });
-
+            $scope.User = new sgUser();
             /* Functions */
             $scope.closeModal = function() {
               $modalInstance.close();
             };
             $scope.saveModal = function() {
               if(!_.isEmpty(dirtyObjects)) {
-                if(dirtyObjects["anonymous"])
+                if(dirtyObjects["anonymous"]) {
-                {
+                  if($scope.validateChanges(dirtyObjects["anonymous"])) {
-                  Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
+                    Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
-                    if(res){
+                      if(res){
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
+                        stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
-                      $modalInstance.close();
+                        $modalInstance.close();
-                    };
+                      };
-                  })
+                    })
+                  }
+                  else{
+                    stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                    $modalInstance.close();
+                  }
                 }
                 else if (dirtyObjects["<default>"]) {
-                  Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
+                  if($scope.validateChanges(dirtyObjects["<default>"])) {
-                    if(res){
+                    Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
+                      if(res){
-                      $modalInstance.close();
+                        stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
-                    };
+                        $modalInstance.close();
-                  })
+                      };
+                    })
+                  }
+                  else{
+                    stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
+                    $modalInstance.close();
+                  }
                 }
                 else {
-                  $scope.AclUsers.saveUsersRights(dirtyObjects);
+                  stateAddressbook.$acl.$saveUsersRights(dirtyObjects);
                   var usersToSubscribe = [];
                   angular.forEach(dirtyObjects, function(dirtyObject){
                     if(dirtyObject.canSubscribeUser && dirtyObject.isSubscribed){
@@ -227,19 +236,25 @@
                     }
                   })
                   if(!_.isEmpty(usersToSubscribe))
-                    $scope.AclUsers.subscribeUsers(usersToSubscribe);
+                    stateAddressbook.$acl.$subscribeUsers(usersToSubscribe);
 
                   $modalInstance.close();
                 }
               }
               else
-                $scope.$aclEditorModal.remove();
+                $modalInstance.close();
+            };
+            $scope.validateChanges = function(object) {
+              if (object.aclOptions.canViewObjects || object.aclOptions.canCreateObjects || object.aclOptions.canEditObjects || object.aclOptions.canEraseObjects)
+                return true;
+              else
+                return false;
             };
             $scope.removeUser = function() {
               if (!_.isEmpty($scope.userSelected)) {
                 if(dirtyObjects[$scope.userSelected.uid])
                   delete dirtyObjects[$scope.userSelected.uid];
-                $scope.AclUsers.removeUser($scope.userSelected.uid);
+                stateAddressbook.$acl.$removeUser($scope.userSelected.uid);
                 // Remove from the users list
                 $scope.users = _.reject($scope.users, function(o) {
                   return o.uid == $scope.userSelected.uid;
@@ -251,11 +266,11 @@
               if (user.uid) {
                 // Looks through the list and returns the first value that matches all of the key-value pairs listed
                 if(!_.findWhere($scope.users, {uid: user.uid})) {
-                  $scope.AclUsers.addUser(user.uid);
+                  stateAddressbook.$acl.$addUser(user.uid);
-                  $scope.User.$acls().then(function(users) {
+                  stateAddressbook.$acl.$users().then(function(users) {
                     $scope.users = [];
                     angular.forEach(users, function(user){
-                      user.canSubscribeUser = (user.isSubscribed) ? false : true;
+                      user.canSubscribeUser = user.isSubscribed;
                       $scope.users.push(user);
                     })
                   });
@@ -277,7 +292,7 @@
                   $scope.userSelected.aclOptions = dirtyObjects[$scope.userSelected.uid].aclOptions;
                 }
                 else {
-                  $scope.AclUsers.userRights($scope.userSelected.uid).then(function(userRights) { 
+                  stateAddressbook.$acl.$userRights($scope.userSelected.uid).then(function(userRights) { 
                     $scope.userSelected.aclOptions = userRights;
                   });
                 }

UI/WebServerResources/js/mobile/ContactsUI.js

@@ -159,7 +159,7 @@
       // };
     }])
 
-    .controller('AddressBooksCtrl', ['$scope', '$rootScope', '$ionicModal', '$ionicListDelegate', '$ionicActionSheet', 'sgDialog', 'sgAddressBook', 'sgAclUsers', 'sgUser', function($scope, $rootScope, $ionicModal, $ionicListDelegate, $ionicActionSheet, Dialog, AddressBook, sgAclUsers, sgUser) {
+    .controller('AddressBooksCtrl', ['$scope', '$state', '$rootScope', '$ionicModal', '$ionicListDelegate', '$ionicActionSheet', 'sgDialog', 'sgAddressBook', 'sgUser', function($scope, $state, $rootScope, $ionicModal, $ionicListDelegate, $ionicActionSheet, Dialog, AddressBook, sgUser) {
       // Initialize with data from template
       $scope.addressbooks = AddressBook.$findAll(contactFolders);
       $scope.newAddressbook = function() {
@@ -205,11 +205,9 @@
                 }
                 // Variables in scope
                 $scope.$aclEditorModal = modal;
-                $scope.addressbook = addressbook;
+                $scope.User = new sgUser();
-                $scope.AclUsers = new sgAclUsers(addressbook);
-                $scope.User = new sgUser(addressbook);
                 var aclUsers = {};
-                $scope.User.$acls().then(function(users) {
+                addressbook.$acl.$users().then(function(users) {
                   $scope.refreshUsers(users);
                 });
                 $scope.showDelete = false;
@@ -238,23 +236,35 @@
                   if(!_.isEmpty(dirtyObjects)) {
                     if(dirtyObjects["anonymous"])
                     {
-                      Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
+                      if($scope.validateChanges(dirtyObjects["anonymous"])) {
-                        if(res){
+                        Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
-                          $scope.AclUsers.saveUsersRights(dirtyObjects);
+                          if(res){
-                          $scope.$aclEditorModal.remove();
+                            addressbook.$acl.$saveUsersRights(dirtyObjects);
-                        };
+                            $scope.$aclEditorModal.remove();
-                      })
+                          };
+                        })
+                      }
+                      else {
+                        addressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $scope.$aclEditorModal.remove();
+                      }
                     }
                     else if (dirtyObjects["<default>"]) {
-                      Dialog.confirm(l("Warning"), l("Potentially anyone on the Internet will be able to access your folder, even if they do not have an account on this system. Is this information suitable for the public Internet?")).then(function(res){
+                      if($scope.validateChanges(dirtyObjects["<default>"])) {
-                        if(res){
+                        Dialog.confirm(l("Warning"), l("Any user with an account on this system will be able to access your folder. Are you certain you trust them all?")).then(function(res){
-                          $scope.AclUsers.saveUsersRights(dirtyObjects);
+                          if(res){
-                          $scope.$aclEditorModal.remove();
+                            addressbook.$acl.$saveUsersRights(dirtyObjects);
-                        };
+                            $scope.$aclEditorModal.remove();
-                      })
+                          };
+                        })
+                      }
+                      else {
+                        addressbook.$acl.$saveUsersRights(dirtyObjects);
+                        $scope.$aclEditorModal.remove();
+                      }
                     }
                     else {
-                      $scope.AclUsers.saveUsersRights(dirtyObjects);
+                      addressbook.$acl.$saveUsersRights(dirtyObjects);
                       var usersToSubscribe = [];
                       angular.forEach(dirtyObjects, function(dirtyObject){
                         if(dirtyObject.canSubscribeUser && dirtyObject.isSubscribed){
@@ -262,7 +272,7 @@
                         }
                       })
                       if(!_.isEmpty(usersToSubscribe))
-                        $scope.AclUsers.subscribeUsers(usersToSubscribe);
+                        addressbook.$acl.$subscribeUsers(usersToSubscribe);
 
                       $scope.$aclEditorModal.remove();
                     }
@@ -270,8 +280,14 @@
                   else
                     $scope.$aclEditorModal.remove();
                 };
+                $scope.validateChanges = function(object) {
+                  if (object.aclOptions.canViewObjects || object.aclOptions.canCreateObjects || object.aclOptions.canEditObjects || object.aclOptions.canEraseObjects)
+                    return true;
+                  else
+                    return false;
+                };
                 $scope.cancelSearch = function() {
-                  $scope.User.$acls().then(function(users) { 
+                  addressbook.$acl.$users().then(function(users) { 
                     $scope.refreshUsers(users);
                   });
                 };
@@ -283,7 +299,7 @@
                     if(dirtyObjects[user.uid])
                       delete dirtyObjects[user.uid];
                     delete aclUsers[user.uid];
-                    $scope.AclUsers.removeUser(user.uid);
+                    addressbook.$acl.$removeUser(user.uid);
                     // Remove from the users list
                     $scope.users = _.reject($scope.users, function(o) {
                       return o.uid == user.uid;
@@ -294,7 +310,7 @@
                 $scope.addUser = function (user) {
                   if (user.uid) {
                     if(!aclUsers[user.uid]) {
-                      $scope.AclUsers.addUser(user.uid);
+                      addressbook.$acl.$addUser(user.uid);
                       user.inAclList = true;
                       user.canSubscribeUser = (user.isSubscribed) ? false : true;
                       aclUsers[user.uid] = user;
@@ -316,7 +332,7 @@
                     }
                     else {
                       // Otherwise, if it's the first time the user consult the user rights; fetch from server
-                      $scope.AclUsers.userRights($scope.userSelected.uid).then(function(userRights) { 
+                      addressbook.$acl.$userRights($scope.userSelected.uid).then(function(userRights) { 
                         $scope.userSelected.aclOptions = userRights;
                       });
                     }
@@ -328,6 +344,7 @@
                   return $scope.User.$filter(search).then(function(results) {
                     angular.forEach(results, function(userFound){
                       userFound.inAclList = (aclUsers[userFound.uid]) ? true : false;
+                      userFound["displayName"] = userFound.cn + " <" + userFound.c_email + ">";
                       $scope.users.push(userFound);
                     })
                   });

UI/WebServerResources/scss/ContactsUI.scss

@@ -118,10 +118,11 @@ $column-gutter: 0;
     height: 40px;
     border-radius: 20px;
     color: $input-disabled-bg;
-    //line-height: 40px;
     text-align: center;
+    vertical-align: center;
     border: 1px solid $input-disabled-bg;
     margin-right: 1em;
+    margin-left: 5px;
     i {
         font-size: 42px;
         line-height: 36px;
@@ -363,6 +364,102 @@ $column-gutter: 0;
     }
 }
 
+#modalACL {
+    height: 25vw;
+    ul {
+        height: 85%;
+    }
+    #usersList {
+        height: 100%;
+        padding: 0;
+        ul {
+            @include block-grid(
+                $per-row: 1,
+                $spacing: $block-grid-default-spacing,
+                $base-style: false
+            );
+            height: 85%;
+            border: 1px solid black;
+            padding: 0;
+            margin: 0;
+            li {
+                padding: 0;
+                line-height: 45px;
+                background-color: $f-dropdown-list-hover-bg;
+                transition: background 300ms ease;
+                &:hover, &:active {
+                    background-color: $f-dropdown-list-hover-bg;
+                    background-color: #fff;
+                }
+                &._selected, &._selected span {
+                    background-color: $module-color;
+                    background-color: #fff;
+                }
+                .subscriptionArea {
+                    float: right;
+                }
+            }
+        }
+        #bottomTable {
+            width: 100%;
+            margin: 0;
+            border: none;
+            #td_1 {
+                padding: 0;
+                width:100%;
+                i {
+                    position: absolute;
+                    padding-top: 10px;
+                    padding-left: 8px;
+                }
+                input {
+                    padding-left: 20px;
+                    margin: 0;
+                }
+            }
+            #td_2 {
+                padding: 0;
+                margin: 0;
+                float: right;
+                white-space: nowrap;
+                button {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    #AccessRightList {
+        border: 1px solid black;
+        height: 100%;
+        padding: 0;
+        .title {
+            background-color: #54B948;
+            line-height: 75px;
+            color: white;
+            padding-left: 0.5em;
+        }
+        ul {
+            @include block-grid(
+                $per-row: 1,
+                $spacing: $block-grid-default-spacing,
+                $base-style: false
+            );
+            li {
+                padding: 5px;
+                clear: none !important;
+            }
+        }
+    }
+}
+#aclButtons {
+    margin: 0px;
+    padding:0;
+    float: right;
+    button {
+        margin: 0;
+    }
+}
+
 .buttonsToolbar {
     text-align: right;
     .button {
@@ -470,6 +567,7 @@ $column-gutter: 0;
 .f-dropdown {
     &.icons-dropdown {
         width: auto;
+        height: inherit;
         //background-color: $primary-color;
         .button {
             margin: 0;

UI/WebServerResources/scss/_settings.scss

@@ -285,9 +285,9 @@ $alert-font-size: rem-calc(12);
 // $include-xl-html-block-grid-classes: false;
 
 // We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
+$block-grid-elements: 12;
-// $block-grid-default-spacing: rem-calc(20);
+$block-grid-default-spacing: rem-calc(20);
-// $align-block-grid-to-grid: false;
+$align-block-grid-to-grid: true;
 
 
 // Enables media queries for block-grid classes. Set to false if writing semantic HTML.