(core) Fixing print preview bugs

Summary:
- Hiding pinned filters
- Switch editor (for toggle column) renders itself as checkbox on print preview

Test Plan: Manual

Reviewers: georgegevoian

Reviewed By: georgegevoian

Subscribers: georgegevoian

Differential Revision: https://phab.getgrist.com/D4345

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;
+  }
 }

app/client/models/DataRowModel.ts

@@ -21,6 +21,9 @@ export class DataRowModel extends BaseRowModel {
   public _validationFailures: ko.PureComputed<Array<IRowModel<'_grist_Validations'>>>;
   public _isAddRow: ko.Observable<boolean>;
 
+  // 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<boolean>;
 
   public constructor(dataTableModel: DataTableModel, colNames: string[]) {

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<boolean>;
     return dom('div.field_clip',
-      dom('div.widget_checkbox',
+      buildCheckbox(value, this._addClickEventHandlers(row))
-        dom('div.widget_checkmark',
-          dom.show(value),
-          dom('div.checkmark_kick'),
-          dom('div.checkmark_stem')
-        ),
-        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<boolean>;
     return dom('div.field_clip',
-      dom('div.widget_switch',
+      // For printing, we will show this as a checkbox (without handlers).
-        dom.cls('switch_on', value),
+      buildCheckbox(value, dom.cls('screen-force-hide')),
-        dom.cls('switch_transition', row._isRealChange),
+      // For screen, we will show this as a switch (with handlers).
-        dom('div.switch_slider'),
+      buildSwitch(
-        dom('div.switch_circle'),
+        value,
+        row._isRealChange,
         this._addClickEventHandlers(row),
+        dom.cls('print-force-hide')
       )
     );
   }
 }
+
+function buildCheckbox(value: KoSaveableObservable<boolean>, ...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<boolean>,
+  isTransitionEnabled: ko.Observable<boolean>,
+  ...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
+  );
+}