(feat) pimped the mail part viewers

UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox

@@ -11,7 +11,7 @@
          var:title="filenameForDisplay"
          class="md-card-image"></img>
     <md-card-content>
-      <p>
+      <p class="md-caption">
         <var:string value="filenameForDisplay" /><br/>
         <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
       </p>

UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox

@@ -4,23 +4,15 @@
   xmlns:var="http://www.skyrix.com/od/binding"
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:label="OGo:label">
-  <md-whiteframe class="md-whiteframe-z1" layout="row" layout-align="space-between center">
-    <div layout="row">
-      <div>
+  <md-card>
+      <md-card-content>
         <img var:src="mimeImageURL"/>
-      </div>
-      
-      <div layout="column" layout-align="start start" layout-padding="layout-padding">
-        <div>
-          <var:string value="filenameForDisplay"/>
-        </div>
-        <div class="md-caption">
+        <p class="md-caption">
+          <var:string value="filenameForDisplay"/><br/>
           <var:string value="bodyInfo.size" formatter="sizeFormatter"/>
-        </div>
-      </div>
-    </div>
-    
-    <div layout="row" layout-align="end end">
+        </p>
+      </md-card-content>
+    <div class="md-actions" layout="row" layout-align="end center">
       <md-button class="sg-icon-button" var:href="pathToAttachment">
         <md-tooltip md-direction="left"><var:string label:value="View Attachment"/></md-tooltip>
         <md-icon>open_in_browser</md-icon>
@@ -50,5 +42,5 @@
          PartPath: <var:string value="partPath" /><br />
     -->
     
-  </md-whiteframe>
+  </md-card>
 </div>

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -136,9 +136,11 @@
       <div class="msg-date sg-md-body-multi">
         <time datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
       </div>
-      <div class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
-        <div ng-if="part.html" ng-bind-html="part.content"><!-- msg --></div>
-        <div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
+      <div layout="row" layout-wrap="layout-wrap">
+        <div ng-class="part.msgclass" layout="row" layout-wrap="layout-wrap" class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
+          <div ng-if="part.html" ng-bind-html="part.content"><!-- msg --></div>
+          <div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
+        </div>
       </div>
     </div>
   </md-content>

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

@@ -177,6 +177,7 @@
     var _this = this,
         parts = [],
         _visit = function(part) {
+          part.msgclass = 'msg-attachment-other';
           if (part.type == 'UIxMailPartAlternativeViewer') {
             _visit(_.find(part.content, function(alternatePart) {
               return part.preferredPart == alternatePart.contentType;
@@ -231,6 +232,9 @@
                 });
               }
 
+              if (part.type == 'UIxMailPartImageViewer')
+                part.msgclass = 'msg-attachment-image';
+
               // Trusted content that can be compiled (Angularly-speaking)
               part.compile = true;
               parts.push(part);

UI/WebServerResources/scss/views/MailerUI.scss

@@ -36,6 +36,27 @@
 .msg-date {
   text-align: right;
 }
+
+.msg-attachment-image {
+  @media (min-width: $layout-breakpoint-sm) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  @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%;
+  }
+}
+
+.msg-attachment-other {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
 // sg-md title don't fit in message headers
 .sg-md-title-msg {
   @extend .sg-md-title;