(css) Initial media print (for messages only)

NEWS

@@ -20,6 +20,7 @@ Enhancements
  - [web] list search now displays a warning regarding the minlength constraint
  - [web] loading an LDAP-based addressbook is now instantaneous when listRequiresDot is disabled (#438, #3464)
  - [web] improve display of messages with many recipients
+ - [web] initial stylesheet for printing
  - [eas] now support EAS MIME truncation
 
 Bug fixes

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -87,6 +87,12 @@
                   <var:string label:value="View Message Source"/>
                 </md-button>
               </md-menu-item>
+              <md-menu-item>
+                <md-button label:aria-label="Print..."
+                           ng-click="viewer.print()">
+                  <var:string label:value="Print..."/>
+                </md-button>
+              </md-menu-item>
               <md-menu-divider><!-- divider --></md-menu-divider>
               <md-menu-item>
                 <md-button label:aria-label="Convert To Event"
@@ -192,7 +198,7 @@
           </div>
 
           <!-- S/MIME Signature -->
-          <md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
+          <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="row" layout-align="space-between center"
                          ng-show="::viewer.message.$smime.message">
             <div layout="row" layout-align="start center">
               <div class="md-tile-left">
@@ -204,7 +210,7 @@
           </md-whiteframe>
 
           <!-- Load external images -->
-          <md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
+          <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="row" layout-align="space-between center"
                          ng-show="viewer.message.$hasUnsafeContent">
             <div layout="row" layout-align="start center" class="layout-fill">
               <div class="md-tile-left">
@@ -220,7 +226,7 @@
           </md-whiteframe>
 
           <!-- Return Receipt / Send MDN -->
-          <md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
+          <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="column" layout-align="center start"
                          ng-show="viewer.message.shouldAskReceipt == 1">
             <div layout="row" layout-align="start center">
               <div class="md-tile-left">

UI/WebServerResources/js/Mailer/MessageController.js

@@ -35,6 +35,7 @@
     vm.saveMessage = saveMessage;
     vm.toggleRawSource = toggleRawSource;
     vm.showRawSource = false;
+    vm.print = print;
     vm.convertToEvent = convertToEvent;
     vm.convertToTask = convertToTask;
 
@@ -257,6 +258,10 @@
       }
     }
 
+    function print($event) {
+      $window.print();
+    }
+
     function convertToEvent($event) {
       return convertToComponent($event, 'appointment');
     }

UI/WebServerResources/scss/core/print.scss

@@ -0,0 +1,39 @@
+/// print.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+// Common print media stylesheet
+// See https://github.com/angular/material/issues/1747
+
+@media print {
+
+  // Don't print some components
+  md-sidenav,
+  md-card-actions,
+  .toolbar-main,
+  .view-list,
+  .sg-reversible.sg-flip .sg-face,
+  .sg-reversible:not(.sg-flip) .sg-back,
+  .sg-no-print
+   {
+    display: none !important;
+  }
+
+  // Content must be visible to be printed on multiple pages
+  md-content,
+  md-card-content,
+  md-card-content pre,
+  .view-detail,
+  .sg-reversible:not(.sg-flip) .sg-face,
+  .sg-reversible.sg-flip .sg-back {
+    overflow: visible !important;
+  }
+
+  // Remove shadow from Cards
+  md-card {
+    box-shadow: none !important;
+  }
+
+  // Ignore layout-fill style
+  .layout-fill {
+    height: auto !important;
+  }
+}

UI/WebServerResources/scss/styles.scss

@@ -22,6 +22,7 @@
 @import 'core/structure';
 @import 'core/layout';
 @import 'core/typography';
+@import 'core/print';
 
 // Original angular-material components
 // ------------------------------------------------------------------------------