Improve display of message attachments

Images are now "zoomable" by clicking on them.

UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox

@@ -11,12 +11,14 @@
          var:title="filenameForDisplay"
          class="md-card-image"></img>
     <md-card-content>
-      <p class="md-caption">
+      <p class="md-caption" var:title="filenameForDisplay">
-        <var:string value="filenameForDisplay" /><br/>
+        <var:string value="filenameForDisplay" />
-        <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
       </p>
     </md-card-content>
-    <md-dialog-actions layout="row" layout-align="end center">
+    <md-dialog-actions layout="row" layout-align="start center">
+      <div class="md-flex sg-attachment-size">
+        <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
+      </div>
       <md-button class="sg-icon-button" var:href="pathForDownload">
         <md-tooltip md-direction="left"><var:string label:value="Save Attachment"/></md-tooltip>
         <md-icon>save</md-icon>

UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox

@@ -1,18 +1,20 @@
 <?xml version="1.0" standalone="yes"?>
 <!DOCTYPE div>
-<div xmlns="http://www.w3.org/1999/xhtml"
+<container xmlns="http://www.w3.org/1999/xhtml"
   xmlns:var="http://www.skyrix.com/od/binding"
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:label="OGo:label">
   <md-card>
-      <md-card-content>
+    <md-card-content>
-        <img var:src="mimeImageURL"/>
+      <img var:src="mimeImageURL"/>
-        <p class="md-caption">
+      <p class="md-caption">
-          <var:string value="filenameForDisplay"/><br/>
+        <var:string value="filenameForDisplay"/>
-          <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
+      </p>
-        </p>
+    </md-card-content>
-      </md-card-content>
     <md-dialog-actions layout="row" layout-align="end center">
+      <div class="md-flex sg-attachment-size">
+        <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
+      </div>
       <md-button class="sg-icon-button" var:href="pathToAttachment" target="_blank">
         <md-tooltip md-direction="left"><var:string label:value="View Attachment"/></md-tooltip>
         <md-icon>open_in_browser</md-icon>
@@ -43,4 +45,4 @@
     -->
     
   </md-card>
-</div>
+</container>

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);
+})();

UI/WebServerResources/scss/views/MailerUI.scss

@@ -45,48 +45,69 @@
 //  margin-bottom: ($mg/2);
 }
 
-md-sidenav md-checkbox {
+md-sidenav {
-  &.sg-folder {
+  md-checkbox {
-    // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
+    &.sg-folder {
-    .md-container:after {
+      // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
-      color: rgba(0,0,0,0.54);
-      font-family: 'Material Icons';
-      font-size: 24px;
-      content: "\e2c7";
-      top: -4px;
-      left: -2px;
-      width: 1em;
-      height: 1em;
-    }
-    .md-icon {
-      border-width: 0;
-    }
-    &.md-checked {
       .md-container:after {
-        content: "\e2c8";
+        color: rgba(0,0,0,0.54);
+        font-family: 'Material Icons';
+        font-size: 24px;
+        content: "\e2c7";
+        top: -4px;
+        left: -2px;
+        width: 1em;
+        height: 1em;
       }
       .md-icon {
-        background-color: initial;
+        border-width: 0;
-        &:after {
+      }
-          border-style: none;
+      &.md-checked {
+        .md-container:after {
+          content: "\e2c8";
+        }
+        .md-icon {
+          background-color: initial;
+          &:after {
+            border-style: none;
+          }
         }
       }
     }
   }
+  .sg-item-name {
+    line-height: 6 * $baseline-grid; // $list-item-height, 48px
+  }
 }
-
+.msg-attachment-image,
-.msg-attachment-image {
+.msg-attachment-link {
-  @media (min-width: $layout-breakpoint-sm) {
+  @media (min-width: $layout-breakpoint-xs) {
     flex: 0 0 100%;
-    max-width: 100%;
+  }
+  @media (min-width: $layout-breakpoint-sm) {
+    flex: 0 0 50%;
   }
   @media (min-width: $layout-breakpoint-md) {
-    flex: 0 0 66.66%;
-    max-width: 66%;
-  }
-  @media (min-width: $layout-breakpoint-lg) {
     flex: 0 0 33.33%;
-    max-width: 33%;
+  }
+  > div {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+// sgZoomableImage directive
+.msg-attachment-image {
+  transition: flex-basis $swift-ease-out-duration $swift-ease-out-timing-function;
+  &.sg-zoom {
+    flex-basis: 100%;
+    order: -1;
+  }
+  &:not(.sg-zoom):hover md-card {
+    @extend .md-whiteframe-3dp;
+  }
+  [sg-zoomable-image] img {
+    cursor: pointer;
   }
 }
 
@@ -95,7 +116,13 @@ md-sidenav md-checkbox {
   max-width: 100%;
 }
 
-// sg-md title don't fit in message headers
+.sg-attachment-size {
+  @extend .md-caption;
+  padding-left: $baseline-grid;
+  color: $colorGrey800;
+}
+
+// sg-md title doesn't fit in message headers
 .sg-md-title-msg {
   @extend .sg-md-title;
   margin: 0;
@@ -106,7 +133,17 @@ md-sidenav md-checkbox {
 
 .mailer_mailcontent {
   @extend .sg-md-body-multi;
+  md-card {
+    md-card-content {
+      padding: $baseline-grid;
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
 }
+
 //$total-columns: 13;
 //$column-gutter: 0;