Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Hides the link icon in print view

Browse Source 
Summary:
Users complained about white spaces left by the link icon when printing.
Diff fixes the issue by hiding link icon completely.

Test Plan: Adds tests in `nbrowser/Printing.ts`

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3767
This commit is contained in:
Cyprien P 2023-01-18 17:43:39 +01:00
parent 1dafe4bae0
commit ca5ae6fa3f
4 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/components/Printing.ts
View File

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

15
app/client/ui2018/cssVars.ts
View File

@ -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;
}
}
`);

3
app/client/ui2018/links.ts
View File

@ -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<string>, ...args: IDomArgs<HTM
// from running on the same process as Grist:
// https://developers.google.com/web/tools/lighthouse/audits/noopener
dom.attr("rel", "noopener noreferrer"),
hideInPrintView(),
args
);
}

4
app/client/widgets/Reference.ts
View File

@ -1,7 +1,7 @@
import {DataRowModel} from 'app/client/models/DataRowModel';
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
import {colors, testId} from 'app/client/ui2018/cssVars';
import {colors, hideInPrintView, testId} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {IOptionFull, select} from 'app/client/ui2018/menus';
import {NTextBox} from 'app/client/widgets/NTextBox';
@ -103,7 +103,7 @@ export class Reference extends NTextBox {
cssRef.cls('-blank', use => 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]'; }