Improve display of message attachments

Images are now "zoomable" by clicking on them.

UI/WebServerResources/js/Mailer/Message.service.js

@@ -325,6 +325,8 @@
 
               if (part.type == 'UIxMailPartImageViewer')
                 part.msgclass = 'msg-attachment-image';
+              else if (part.type == 'UIxMailPartLinkViewer')
+                part.msgclass = 'msg-attachment-link';
 
               // Trusted content that can be compiled (Angularly-speaking)
               part.compile = true;

UI/WebServerResources/js/Mailer/sgZoomableImage.directive.js

@@ -0,0 +1,41 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /*
+   * sgZoomableImage - Toggle the 'sg-zoom' class when clicking on the image inside the container.
+   * @memberof SOGo.MailerUI
+   * @restrict attribute
+   * @ngInject
+   * @example:
+
+   <div sg-zoomable-image="sg-zoomable-image">
+     <md-card>
+       <img src="foo.png">
+     </md-card>
+   </div>
+  */
+  function sgZoomableImage() {
+    return {
+      restrict: 'A',
+      link: link
+    };
+
+    function link(scope, iElement, attrs, ctrl) {
+      var parentNode = iElement.parent(),
+          toggleClass;
+
+      toggleClass = function(event) {
+        if (event.target.tagName == 'IMG')
+          parentNode.toggleClass('sg-zoom');
+      };
+
+      iElement.on('click', toggleClass);
+    }
+  }
+
+  angular
+    .module('SOGo.MailerUI')
+    .directive('sgZoomableImage', sgZoomableImage);
+})();