diff --git a/app/client/components/Printing.css b/app/client/components/Printing.css index 06c7e3a2..7d436fba 100644 --- a/app/client/components/Printing.css +++ b/app/client/components/Printing.css @@ -5,6 +5,10 @@ display: none; } + .print-force-hide { + display: none !important; + } + .print-parent { display: block !important; position: relative !important; @@ -51,6 +55,10 @@ .ui-resizable-handle { display: none !important; } + + .viewsection_content .filter_bar { + display: none !important; + } } /* @@ -68,4 +76,8 @@ .print-all-rows { display: none; } + + .screen-force-hide { + display: none !important; + } } diff --git a/app/client/models/DataRowModel.ts b/app/client/models/DataRowModel.ts index 169415c4..0638d8db 100644 --- a/app/client/models/DataRowModel.ts +++ b/app/client/models/DataRowModel.ts @@ -21,6 +21,9 @@ export class DataRowModel extends BaseRowModel { public _validationFailures: ko.PureComputed>>; public _isAddRow: ko.Observable; + // Observable that's set whenever a change to a row model is likely to be real, and unset when a + // row model is being reassigned to a different row. If a widget uses CSS transitions for + // changes, those should only be enabled when _isRealChange is true. public _isRealChange: ko.Observable; public constructor(dataTableModel: DataTableModel, colNames: string[]) { diff --git a/app/client/widgets/Toggle.ts b/app/client/widgets/Toggle.ts index 4ad16f6f..f6a170f8 100644 --- a/app/client/widgets/Toggle.ts +++ b/app/client/widgets/Toggle.ts @@ -10,7 +10,7 @@ import { cssLabel, cssRow } from 'app/client/ui/RightPanelStyles'; import { buttonSelect } from 'app/client/ui2018/buttonSelect'; import { theme } from 'app/client/ui2018/cssVars'; import { NewAbstractWidget, Options } from 'app/client/widgets/NewAbstractWidget'; -import { dom, DomContents, makeTestId } from 'grainjs'; +import { dom, DomContents, DomElementArg, makeTestId } from 'grainjs'; const t = makeT('Toggle'); @@ -74,14 +74,7 @@ export class ToggleCheckBox extends ToggleBase { public buildDom(row: DataRowModel) { const value = row.cells[this.field.colId.peek()] as KoSaveableObservable; return dom('div.field_clip', - dom('div.widget_checkbox', - dom('div.widget_checkmark', - dom.show(value), - dom('div.checkmark_kick'), - dom('div.checkmark_stem') - ), - this._addClickEventHandlers(row), - ) + buildCheckbox(value, this._addClickEventHandlers(row)) ); } } @@ -91,16 +84,42 @@ export class ToggleSwitch extends ToggleBase { super(field, {defaultTextColor: '#2CB0AF'}); } - public buildDom(row: DataRowModel) { + public override buildDom(row: DataRowModel) { const value = row.cells[this.field.colId.peek()] as KoSaveableObservable; return dom('div.field_clip', - dom('div.widget_switch', - dom.cls('switch_on', value), - dom.cls('switch_transition', row._isRealChange), - dom('div.switch_slider'), - dom('div.switch_circle'), + // For printing, we will show this as a checkbox (without handlers). + buildCheckbox(value, dom.cls('screen-force-hide')), + // For screen, we will show this as a switch (with handlers). + buildSwitch( + value, + row._isRealChange, this._addClickEventHandlers(row), + dom.cls('print-force-hide') ) ); } } + +function buildCheckbox(value: KoSaveableObservable, ...args: DomElementArg[]) { + return dom('div.widget_checkbox', + dom('div.widget_checkmark', + dom.show(value), + dom('div.checkmark_kick'), + dom('div.checkmark_stem') + ), + ...args + ); +} + +function buildSwitch( + value: KoSaveableObservable, + isTransitionEnabled: ko.Observable, + ...args: DomElementArg[]) { + return dom('div.widget_switch', + dom.cls('switch_on', value), + dom.cls('switch_transition', isTransitionEnabled), + dom('div.switch_slider'), + dom('div.switch_circle'), + ...args + ); +}