From 03716f3c3e0e1819c7367f89abe89631b557add2 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Tue, 8 Jan 2019 15:25:25 -0500
Subject: [PATCH] (css) Fix printing of long mails

Fixes #3731
---
 UI/Templates/ContactsUI/UIxContactEditorTemplate.wox | 2 +-
 UI/Templates/ContactsUI/UIxContactFoldersView.wox    | 6 +++---
 UI/Templates/ContactsUI/UIxContactViewTemplate.wox   | 2 +-
 UI/Templates/MailerUI/UIxMailFolderTemplate.wox      | 4 ++--
 UI/Templates/MailerUI/UIxMailMainFrame.wox           | 2 +-
 UI/Templates/MailerUI/UIxMailViewTemplate.wox        | 8 ++++----
 UI/Templates/PreferencesUI/UIxAccountEditor.wox      | 2 +-
 UI/Templates/SchedulerUI/UIxCalMainView.wox          | 8 ++++----
 UI/WebServerResources/scss/core/print.scss           | 8 ++++----
 9 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index f7fecda64..bf280f9ff 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -136,7 +136,7 @@
             <div class="section" ng-if="editor.card.hasCertificate">
               <div class="pseudo-input-container">
                 <label class="pseudo-input-label"><var:string label:value="Security"/></label>
-                <sg-block-toggle class="sg-no-print" layout="column">
+                <sg-block-toggle class="hide-print" layout="column">
                   <md-list-item class="sg-button-toggle">
                     <p class="md-flex">
                       <md-icon rsrc:md-svg-src="img/certificate.svg"><!-- certificate --></md-icon>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index b7eaed27b..0b815eea4 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -232,9 +232,9 @@
       <var:component className="UIxTopnavToolbar" />
     </md-toolbar>
 
-    <div layout="row" class="md-flex">
+    <div layout="row" class="md-flex sg-block-print">
 
-      <div class="view-list sg-no-print" layout="column" ng-class="{'view-list--close': addressbook.centerIsClose(centerIsClose)}">
+      <div class="view-list hide-print" layout="column" ng-class="{'view-list--close': addressbook.centerIsClose(centerIsClose)}">
 
         <!-- single-selection toolbar -->
         <md-toolbar class="md-accent md-hue-1"
@@ -542,7 +542,7 @@
         </md-fab-actions>
       </md-fab-speed-dial>
 
-      <div id="detailView" class="view-detail"
+      <div id="detailView" class="view-detail sg-block-print"
            layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
            md-colors="::{backgroundColor: 'default-background-200'}"
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 0becff098..247e883c0 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -107,7 +107,7 @@
             <div class="section" ng-if="editor.card.hasCertificate">
               <div class="pseudo-input-container">
                 <label class="pseudo-input-label"><var:string label:value="Security"/></label>
-                <sg-block-toggle class="sg-no-print" layout="column">
+                <sg-block-toggle class="hide-print" layout="column">
                   <md-list-item class="sg-button-toggle">
                     <p class="md-flex">
                       <md-icon rsrc:md-svg-src="img/certificate.svg"><!-- certificate --></md-icon>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 6d82cbce7..b048c5ac5 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -3,7 +3,7 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:label="OGo:label">
-  <div class="view-list sg-no-print" layout="column" ng-class="{'view-list--close': mailbox.centerIsClose(centerIsClose)}">
+  <div class="view-list hide-print" layout="column" ng-class="{'view-list--close': mailbox.centerIsClose(centerIsClose)}">
 
     <!-- in virtual mailbox mode -->
     <md-toolbar class="md-whiteframe-z1 md-hue-3"
@@ -363,7 +363,7 @@
     <md-icon>edit</md-icon>
   </md-button>
 
-  <div id="detailView" class="view-detail"
+  <div id="detailView" class="view-detail sg-block-print"
        layout="column" layout-align="start center"
        ng-class="{ 'sg-close': !mailbox.service.selectedFolder.hasSelectedMessage() }"
        md-colors="::{backgroundColor: 'default-background-200'}"
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 1b4923176..f62b760f5 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -176,7 +176,7 @@
       </div>
     </md-toolbar>
 
-    <div layout="row" class="md-flex">
+    <div layout="row" class="md-flex sg-block-print">
       <var:component className="UIxMailFolderTemplate" />
     </div>
   </script>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 4c47ccb2a..c8831c051 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -208,7 +208,7 @@
           </div>
 
           <!-- S/MIME Signature -->
-          <sg-block-toggle class="sg-no-print" layout="column"
+          <sg-block-toggle class="hide-print" layout="column"
                            ng-show="::viewer.message.signed">
             <md-divider><!-- divider --></md-divider>
             <md-list-item class="sg-button-toggle">
@@ -248,7 +248,7 @@
           </sg-block-toggle>
 
           <!-- S/MIME Encryption -->
-          <div class="sg-no-print" layout="column"
+          <div class="hide-print" layout="column"
                ng-show="::viewer.message.encrypted">
             <md-divider><!-- divider --></md-divider>
             <md-list-item>
@@ -261,7 +261,7 @@
           </div>
 
           <!-- Load external images -->
-          <div class="sg-no-print" ng-show="viewer.message.$hasUnsafeContent">
+          <div class="hide-print" ng-show="viewer.message.$hasUnsafeContent">
             <md-divider><!-- divider --></md-divider>
             <md-list-item class="md-clickable" layout="row" layout-align="space-between center"
                           label:aria-label="Load Images"
@@ -273,7 +273,7 @@
           </div>
 
           <!-- Return Receipt / Send MDN -->
-          <md-whiteframe class="md-whiteframe-z2 sg-no-print" layout="column" layout-align="center start"
+          <md-whiteframe class="md-whiteframe-z2 hide-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">
diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
index dc12d9ac8..b3dec3f18 100644
--- a/UI/Templates/PreferencesUI/UIxAccountEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -184,7 +184,7 @@
 
             <div layout="column" ng-show="$AccountDialogController.account.security.hasCertificate">
               <!-- S/MIME Certificate -->
-              <sg-block-toggle class="sg-no-print" layout="column">
+              <sg-block-toggle class="hide-print" layout="column">
                 <md-list-item class="sg-button-toggle">
                   <p class="md-flex">
                     <md-icon rsrc:md-svg-src="img/certificate.svg"><!-- certificate --></md-icon>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 123820c83..a3bb31a27 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -151,7 +151,7 @@
              ng-show="list.selectedList >= 0"
              ng-class="{'view-list--close': centerIsClose}"
              ui-view="listView">
-          <md-toolbar class="md-accent md-hue-1 sg-no-print" flex-none="flex-none"
+          <md-toolbar class="md-accent md-hue-1 hide-print" flex-none="flex-none"
                       ng-hide="list.mode.multiple">
             <!-- sort/filter mode (default) -->
             <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
@@ -378,7 +378,7 @@
             </div>
           </md-toolbar>
 
-          <md-divider class="sg-no-print"><!-- divider --></md-divider>
+          <md-divider class="hide-print"><!-- divider --></md-divider>
 
           <md-content layout="column" class="view-list">
             <md-tabs md-dynamic-height="true"
@@ -386,7 +386,7 @@
               <!-- Events list -->
               <md-tab label:label="Events"
                       md-on-select="list.selectComponentType('events')">
-                <md-subheader class="sg-no-print">
+                <md-subheader class="hide-print">
                   <div layout="row"  layout-align="space-between center">
                     <div class="md-truncate" ng-bind="list.filter() | loc"><!-- active filter --></div>
                     <div class="md-truncate"><md-icon ng-class="{ 'md-flip': list.ascending() }">sort</md-icon> <span ng-bind="list.sort() | loc"><!-- active sort --></span></div>
@@ -433,7 +433,7 @@
               <!-- Tasks list -->
               <md-tab label:label="Tasks"
                       md-on-select="list.selectComponentType('tasks')">
-                <md-subheader class="sg-no-print">
+                <md-subheader class="hide-print">
                   <div layout="row"  layout-align="space-between center">
                     <div class="md-truncate" ng-bind="list.filter() | loc"><!-- active filter --></div>
                     <div class="md-truncate"><md-icon ng-class="{ 'md-flip': list.ascending() }">sort</md-icon> <span ng-bind="list.sort() | loc"><!-- active sort --></span></div>
diff --git a/UI/WebServerResources/scss/core/print.scss b/UI/WebServerResources/scss/core/print.scss
index fd7e0a947..ca90e3acf 100644
--- a/UI/WebServerResources/scss/core/print.scss
+++ b/UI/WebServerResources/scss/core/print.scss
@@ -56,9 +56,7 @@
   .toolbar-main,
   .view-list--close,
   .view-detail .sg-reversible.sg-flip .sg-face,
-  .view-detail .sg-reversible:not(.sg-flip) .sg-back,
-  .sg-no-print
-   {
+  .view-detail .sg-reversible:not(.sg-flip) .sg-back {
     display: none !important;
   }
 
@@ -84,12 +82,14 @@
   md-card-content pre,
   .view-detail .sg-reversible,
   .view-detail .sg-reversible:not(.sg-flip) .sg-face,
-  .view-detail .sg-reversible.sg-flip .sg-back {
+  .view-detail .sg-reversible.sg-flip .sg-back,
+  .sg-block-print {
     display: block !important;
     height: auto !important;
     min-height: auto !important;
     overflow: visible !important;
     position: relative !important;
+    flex: none;
   }
 
   // Remove shadow from Cards