(js) Fix selected message class in advanced search

Also improved display of accounts subheaders.

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -208,12 +208,12 @@
       <md-virtual-repeat-container class="md-flex">
         <md-list class="sg-section-list">
           <md-list-item
+              class="md-default-theme md-background md-hue-1"
               md-virtual-repeat="currentMessage in mailbox.service.selectedFolder"
               md-on-demand="md-on-demand"
-              ng-class="{'sg-active': currentMessage.uid == mailbox.service.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
+              ng-class="{'md-bg': mailbox.selectedFolder.isSelectedMessage(currentMessage.uid, currentMessage.$mailbox.path),
-              ng-click="mailbox.selectMessage(currentMessage)"
+                          unread: !currentMessage.isread}"
-              ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})"
+              ng-click="mailbox.selectMessage(currentMessage)">
-              ui-sref-active="md-default-theme md-background md-bg md-hue-1">
             <div class="sg-selected-avatar"
                  ng-show="currentMessage.selected"
                  ng-click="mailbox.toggleMessageSelection($event, currentMessage)"><!-- selected avatar --></div>

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -231,21 +231,20 @@
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <section ng-repeat="account in app.accounts track by account.id">
           <md-subheader class="md-hue-2">
-            <div layout="row" layout-align="space-between center">
+            <div layout="row" layout-align="start center">
-              <span>{{account.name}}</span>
+              <div class="sg-no-wrap">{{account.name}}</div>
-              <div>
+              <div class="md-flex"><!-- spacer --></div>
-                <md-button class="sg-icon-button"
+              <md-button class="sg-icon-button"
-                           label:aria-label="New Folder..."
+                         label:aria-label="New Folder..."
-                           ng-click="app.newFolder(account)">
+                         ng-click="app.newFolder(account)">
-                  <md-icon>add_circle_outline</md-icon>
+                <md-icon>add_circle_outline</md-icon>
-                </md-button>
+              </md-button>
-                <md-button class="sg-icon-button"
+              <md-button class="sg-icon-button"
-                           ng-show="account.id == 0"
+                         ng-show="account.id == 0"
-                           label:aria-label="Delegation..."
+                         label:aria-label="Delegation..."
-                           ng-click="app.delegate(account)">
+                         ng-click="app.delegate(account)">
-                  <md-icon>people</md-icon>
+                <md-icon>people</md-icon>
-                </md-button>
+              </md-button>
-              </div>
             </div>
           </md-subheader>
           <md-list>

UI/WebServerResources/js/Mailer/Mailbox.service.js

@@ -224,6 +224,17 @@
   };
 
   /**
+   * @function isSelectedMessage
+   * @memberof Mailbox.prototype
+   * @desc Check if the specified message is selected.
+   * @param {string} messageId
+   * @returns true if the specified message is selected
+   */
+  Mailbox.prototype.isSelectedMessage = function(messageId) {
+    return this.selectedMessage == messageId;
+  };
+
+    /**
    * @function $filter
    * @memberof Mailbox.prototype
    * @desc Fetch the messages metadata of the mailbox

UI/WebServerResources/js/Mailer/Mailer.app.js

@@ -191,17 +191,14 @@
       return mailbox;
     };
 
-    if (Mailbox.$virtualMode)
-      return Mailbox.selectedFolder;
-
     return _find(stateAccount.$mailboxes);
   }
 
   /**
    * @ngInject
    */
-  stateMessages.$inject = ['$q', 'Mailbox', 'stateMailbox'];
+  stateMessages.$inject = ['Mailbox', 'stateMailbox'];
-  function stateMessages($q, Mailbox, stateMailbox) {
+  function stateMessages(Mailbox, stateMailbox) {
     if (Mailbox.$virtualMode)
       return [];
 
@@ -236,10 +233,12 @@
   function stateVirtualMailboxOfMessage($q, Mailbox, decodeUriFilter, $stateParams) {
     var mailboxId = decodeUriFilter($stateParams.mailboxId);
 
-    if (Mailbox.$virtualMode)
+    if (Mailbox.$virtualMode) {
+      Mailbox.selectedFolder.resetSelectedMessage();
       return _.find(Mailbox.selectedFolder.$mailboxes, function(mailboxObject) {
         return mailboxObject.path == mailboxId;
       });
+    }
     else
       return $q.reject("No virtual mailbox defined for message");
   }
@@ -247,8 +246,8 @@
   /**
    * @ngInject
    */
-  stateMessage.$inject = ['Mailbox', 'encodeUriFilter', '$stateParams', '$state', 'stateMailbox'];
+  stateMessage.$inject = ['Mailbox', 'encodeUriFilter', '$stateParams', '$state', 'stateMailbox', 'stateMessages'];
-  function stateMessage(Mailbox, encodeUriFilter, $stateParams, $state, stateMailbox) {
+  function stateMessage(Mailbox, encodeUriFilter, $stateParams, $state, stateMailbox, stateMessages) {
     var message;
 
     message = _.find(stateMailbox.$messages, function(messageObject) {

UI/WebServerResources/js/Mailer/VirtualMailbox.service.js

@@ -59,7 +59,7 @@
 
   /**
    * @function init
-   * @memberof Mailbox.prototype
+   * @memberof VirtualMailbox.prototype
    * @desc Extend instance with new data and compute additional attributes.
    * @param {object} data - attributes of mailbox
    */
@@ -103,9 +103,34 @@
     this.$isLoading = false;
   };
 
+  /**
+   * @function resetSelectedMessage
+   * @memberof VirtualMailbox.prototype
+   * @desc Delete 'selectedMessage' attribute of all submailboxes.
+   */
+  VirtualMailbox.prototype.resetSelectedMessage = function() {
+    _.each(this.$mailboxes, function(mailbox) {
+      delete mailbox.selectedMessage;
+    });
+  };
+
+  /**
+   * @function isSelectedMessage
+   * @memberof VirtualMailbox.prototype
+   * @desc Check if the message of the specified mailbox is selected.
+   * @param {string} messageId
+   * @param {string} mailboxPath
+   * @returns true if the specified message is selected
+   */
+  VirtualMailbox.prototype.isSelectedMessage = function(messageId, mailboxPath) {
+    return angular.isDefined(_.find(this.$mailboxes, function(mailbox) {
+      return mailbox.path == mailboxPath && mailbox.selectedMessage == messageId;
+    }));
+  };
+
   /**
    * @function getLength
-   * @memberof Mailbox.prototype
+   * @memberof VirtualMailbox.prototype
    * @desc Used by md-virtual-repeat / md-on-demand
    * @returns the number of items in the mailbox
    */
@@ -124,7 +149,7 @@
 
   /**
    * @function getItemAtIndex
-   * @memberof Mailbox.prototype
+   * @memberof VirtualMailbox.prototype
    * @desc Used by md-virtual-repeat / md-on-demand
    * @returns the message as the specified index
    */

UI/WebServerResources/scss/core/typography.scss

@@ -369,6 +369,12 @@ html p {
   white-space: normal;
 }
 
+.sg-no-wrap {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .sg-label-outline {
   // See also .sg-outline-button in button.scss
   border-width: 1px;