(js) Collapsable mail accounts

Fixes #3493

NEWS

@@ -4,6 +4,7 @@
 Enhancements
  - [web] expose all email addresses in autocompletion of message editor (#3443)
  - [web] Gravatar service can now be disabled (#3600)
+ - [web] collapsable mail accounts (#3493)
 
 Bug fixes
  - [web] fixed creation of chip on blur (sgTransformOnBlur directive)

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -36,39 +36,39 @@
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content class="md-flex" layout="column" md-scroll-y="md-scroll-y"
                   md-colors="::{ backgroundColor: 'default-background-300' }">
-        <section class="md-flex" layout="column"
-                 ng-repeat="account in app.accounts track by account.id">
-          <md-subheader class="sg-md-subheader--with-secondary-icon"
-                        ng-class="{ 'sg-md-subheader--with-icon': account.id == 0 }"
-                        md-colors="::{ backgroundColor: 'default-background-300' }">
-            <div layout="row" layout-align="start center">
-              <md-button class="sg-icon-button"
+        <section layout="column"
+                 ng-repeat="account in ::app.accounts track by account.id"
+                 ng-class="{ 'md-flex': account.$expanded }">
+          <md-list>
+            <md-list-item ng-click="app.toggleAccountState(account)">
+              <div class="sg-no-wrap">{{account.name}}</div>
+              <div class="md-flex"><!-- spacer --></div>
+              <md-button class="md-icon-button md-secondary"
                          ng-show="account.id == 0"
                          label:aria-label="Delegation..."
                          ng-click="app.delegate(account)">
                 <md-tooltip md-delay="300"><var:string label:value="Delegation..."/></md-tooltip>
                 <md-icon>people</md-icon>
               </md-button>
-              <div class="sg-no-wrap">{{account.name}}</div>
-              <div class="md-flex"><!-- spacer --></div>
-              <md-button class="sg-icon-button"
+              <md-button class="md-icon-button md-secondary"
                          label:aria-label="New Folder..."
                          ng-click="app.newFolder(account)">
                 <md-tooltip md-delay="300"><var:string label:value="New Folder..."/></md-tooltip>
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
-            </div>
-          </md-subheader>
+            </md-list-item>
+          </md-list>
           <div class="sg-quota ng-hide" ng-show="account.$quota">
             <md-progress-linear md-mode="determinate"
                                 ng-class="{ 'md-warn': account.$quota.percent > 70 }"
                                 value="{{account.$quota.percent}}"><!-- quota --></md-progress-linear>
             <div class="sg-md-caption md-default-theme md-fg md-primary"
+                 ng-show="account.$expanded"
                  ng-class="{ 'md-warn': account.$quota.percent > 70 }">{{account.$quota.description}}</div>
           </div>
-          <md-virtual-repeat-container class="md-flex">
+          <md-virtual-repeat-container ng-class="{ 'md-flex': account.$expanded }">
             <md-list>
-              <md-list-item md-virtual-repeat="folder in account.$flattenMailboxes()" md-item-size="48"
+              <md-list-item md-virtual-repeat="folder in account" md-item-size="48" md-on-demand="md-on-demand"
                             class="md-default-theme md-background md-hue-1"
                             ng-class="{'md-bg': folder.id == app.service.selectedFolder.id}"
                             ng-dblclick="app.editFolder(folder)">

UI/WebServerResources/js/Mailer/Account.service.js

@@ -91,6 +91,32 @@
     return collection;
   };
 
+  /**
+   * @function getLength
+   * @memberof Account.prototype
+   * @desc Used by md-virtual-repeat / md-on-demand
+   * @returns the number of mailboxes in the account
+   */
+  Account.prototype.getLength = function() {
+    return this.$flattenMailboxes().length;
+  };
+
+  /**
+   * @function getItemAtIndex
+   * @memberof Account.prototype
+   * @desc Used by md-virtual-repeat / md-on-demand
+   * @returns the mailbox at the specified index
+   */
+  Account.prototype.getItemAtIndex = function(index) {
+    var expandedMailboxes;
+
+    expandedMailboxes = this.$flattenMailboxes();
+    if (index >= 0 && index < expandedMailboxes.length)
+      return expandedMailboxes[index];
+
+    return null;
+  };
+
   /**
    * @function $getMailboxes
    * @memberof Account.prototype
@@ -125,6 +151,7 @@
               expandedFolders = angular.fromJson(Account.$Preferences.settings.Mail.ExpandedFolders);
             else
               expandedFolders = Account.$Preferences.settings.Mail.ExpandedFolders;
+            _this.$expanded = (expandedFolders.indexOf('/' + _this.id) >= 0) || Account.$accounts.length == 1;
             if (expandedFolders.length > 0) {
               _visit(_this.$mailboxes);
             }
@@ -170,6 +197,9 @@
         if (options && options.saveState) {
           // Save expansion state of mailboxes to the server
           _.forEach(Account.$accounts, function(account) {
+            if (account.$expanded) {
+              expandedMailboxes.push('/' + account.id);
+            }
             _.reduce(account.$$flattenMailboxes, function(expandedFolders, mailbox) {
               if (mailbox.$expanded) {
                 expandedFolders.push('/' + mailbox.id);

UI/WebServerResources/js/Mailer/MailboxesController.js

@@ -6,14 +6,15 @@
   /**
    * @ngInject
    */
-  MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgConstant', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
-  function MailboxesController($state, $timeout, $mdDialog, $mdToast, $mdMedia, $mdSidenav, sgConstant, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
+  MailboxesController.$inject = ['$state', '$timeout', '$window', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgConstant', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
+  function MailboxesController($state, $timeout, $window, $mdDialog, $mdToast, $mdMedia, $mdSidenav, sgConstant, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
     var vm = this,
         account,
         mailbox;
 
     vm.service = Mailbox;
     vm.accounts = stateAccounts;
+    vm.toggleAccountState = toggleAccountState;
     vm.newFolder = newFolder;
     vm.delegate = delegate;
     vm.editFolder = editFolder;
@@ -130,6 +131,17 @@
       }
     }
 
+    function toggleAccountState(account) {
+      account.$expanded = !account.$expanded;
+      account.$flattenMailboxes({ reload: true, saveState: true });
+      // Fire a window resize to recompute the virtual-repeater.
+      // This is a fix until the following issue is officially resolved:
+      // https://github.com/angular/material/issues/7309
+      $timeout(function() {
+        angular.element($window).triggerHandler('resize');
+      }, 150);
+    }
+
     function newFolder(parentFolder) {
       Dialog.prompt(l('New folder'),
                     l('Enter the new name of your folder :'))