(css) Initial media print (for messages only)

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
 // ------------------------------------------------------------------------------