From 4e20f7a8a28e28ab9ea149149cd9d4343faf9d4b Mon Sep 17 00:00:00 2001
From: Dmitry S <dsagal+git@gmail.com>
Date: Fri, 7 Aug 2020 17:53:53 -0400
Subject: [PATCH] (core) Add some media queries to improve printing

Summary:
- Hides left and right panels and the top bar
- Hides cursor and active-section highlight
- Hides "=" icon on formulas
- Nudges browser to include background for row/column headers, which is not
  otherwise included.

Still only what's visible is printed (e.g. large tables not paginated).

Test Plan: Tried a few pages manually on Firefox and Chrome.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2579
---
 app/client/ui/PagePanels.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index e86b4d55..b45bef8d 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -139,6 +139,11 @@ export const cssLeftPane = styled(cssVBox, `
     min-width: 160px;
     max-width: 320px;
   }
+  @media print {
+    & {
+      display: none;
+    }
+  }
 `);
 const cssMainPane = styled(cssVBox, `
   position: relative;
@@ -160,6 +165,11 @@ const cssRightPane = styled(cssVBox, `
     min-width: 240px;
     max-width: 320px;
   }
+  @media print {
+    & {
+      display: none;
+    }
+  }
 `);
 const cssTopHeader = styled('div', `
   height: 48px;
@@ -168,6 +178,12 @@ const cssTopHeader = styled('div', `
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid ${colors.mediumGrey};
+
+  @media print {
+    & {
+      display: none;
+    }
+  }
 `);
 const cssResizeFlexVHandle = styled(resizeFlexVHandle, `
   --resize-handle-color: ${colors.mediumGrey};