diff --git a/app/client/components/Printing.ts b/app/client/components/Printing.ts index 3532aed9..9175bd03 100644 --- a/app/client/components/Printing.ts +++ b/app/client/components/Printing.ts @@ -64,7 +64,7 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec) } const sub1 = dom.onElem(window, 'beforeprint', () => prepareToPrint(true)); - const sub2 = dom.onElem(window, 'afterprint', () => { + const sub2 = dom.onElem(window, 'afterprint', (window as any).afterPrintCallback = () => { sub1.dispose(); sub2.dispose(); // To debug printing, set window.debugPrinting=1 in the console, then print a section, dismiss @@ -75,6 +75,7 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec) } else { prepareToPrint(false); } + delete (window as any).afterPrintCallback; }); // Running print on a timeout makes it possible to test printing using selenium, and doesn't diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index df5eff51..4014739a 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -10,7 +10,7 @@ import {getStorage} from 'app/client/lib/storage'; import {urlState} from 'app/client/models/gristUrlState'; import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes'; import {Theme, ThemeAppearance} from 'app/common/ThemePrefs'; -import {dom, makeTestId, Observable, styled, TestId} from 'grainjs'; +import {dom, DomElementMethod, makeTestId, Observable, styled, TestId} from 'grainjs'; import debounce = require('lodash/debounce'); import values = require('lodash/values'); @@ -893,3 +893,16 @@ function getOrCreateStyleElement(id: string) { document.head.append(style); return style; } + +// A dom method to hide element in print view +export function hideInPrintView(): DomElementMethod { + return cssHideInPrint.cls(''); +} + +const cssHideInPrint = styled('div', ` + @media print { + & { + display: none !important; + } + } +`); diff --git a/app/client/ui2018/links.ts b/app/client/ui2018/links.ts index d9c5c1b2..ae5c3a47 100644 --- a/app/client/ui2018/links.ts +++ b/app/client/ui2018/links.ts @@ -1,5 +1,5 @@ import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState'; -import { theme } from 'app/client/ui2018/cssVars'; +import { hideInPrintView, theme } from 'app/client/ui2018/cssVars'; import { CellValue } from 'app/plugin/GristData'; import { dom, IDomArgs, Observable, styled } from 'grainjs'; @@ -30,6 +30,7 @@ export function gristLink(href: string|Observable, ...args: IDomArgs use(formattedValue).hasBlankReference), dom.style('text-align', this.alignment), dom.cls('text_wrapping', this.wrapping), - cssRefIcon('FieldReference', testId('ref-link-icon')), + cssRefIcon('FieldReference', testId('ref-link-icon'), hideInPrintView()), dom.text(use => { if (use(referenceId) === 0) { return ''; } if (use(formattedValue).hasBlankReference) { return '[Blank]'; }