(web) Restore mail threads

Fixes #3478
Fixes #4616
Fixes #4735

UI/WebServerResources/js/Mailer/sgMessageListItemMain.directive.js

@@ -26,6 +26,9 @@
         '  <div class="sg-md-body">',
         '    <div class="sg-tile-subject"><!-- subject --></div>',
         '    <div class="sg-tile-size"><!-- size --></div>',
+        '    <md-button class="sg-tile-thread md-secondary ng-hide" md-colors="::{ color: \'accent-600\'}" ng-click="$ctrl.toggleThread()">',
+        '      <md-icon class="md-rotate-180-ccw" md-colors="::{ color: \'accent-600\'}">expand_more</md-icon><span><span>', // expanded by default (icon is rotated)
+        '    </md-button>',
         '  </div>',
         '</div>',
         '<div class="sg-tile-icons">',
@@ -59,7 +62,7 @@
     var $ctrl = this;
 
     this.$postLink = function () {
-      var contentDivElement, iconsDivElement;
+      var contentDivElement, threadButton, iconsDivElement;
       var parentControllerOnUpdate, setVisibility;
 
       this.parentController = $scope.parentController;
@@ -74,6 +77,12 @@
           iconsDivElement = angular.element(div);
       });
 
+      threadButton = contentDivElement.find('button')[0];
+      this.threadButton = threadButton;
+      threadButton = angular.element(threadButton);
+      this.threadIconElement = threadButton.find('md-icon')[0];
+      this.threadCountElement = threadButton.find('span')[0];
+
       this.priorityIconElement = contentDivElement.find('md-icon')[0];
 
       if (Mailbox.$virtualMode) {
@@ -147,9 +156,19 @@
         else
           $ctrl.priorityIconElement.classList.add('ng-hide');
 
+        // Mail thread
+        if ($ctrl.message.first) {
+          $ctrl.threadButton.classList.remove('ng-hide');
+          $ctrl.threadCountElement.innerHTML = $ctrl.message.threadCount;
+          if ($ctrl.message.collapsed)
+            $ctrl.threadIconElement.classList.remove('md-rotate-180-ccw');
+        }
+        else {
+          $ctrl.threadButton.classList.add('ng-hide');
+        }
+
         // Subject
         $ctrl.subjectElement.innerHTML = $ctrl.message.subject.encodeEntities();
-
         // Message size
         $ctrl.sizeElement.innerHTML = $ctrl.message.size;
 
@@ -173,6 +192,14 @@
       this.MailboxService = Mailbox;
     };
 
+    this.toggleThread = function() {
+      if (this.message.collapsed)
+        this.threadIconElement.classList.add('md-rotate-180-ccw');
+      else
+        this.threadIconElement.classList.remove('md-rotate-180-ccw');
+      this.message.toggleThread();
+    };
+
   }