From 7d12548067e400897315504cf6926a53eba6b77e Mon Sep 17 00:00:00 2001
From: Alexey Zinoviev <alexey.zinoviev@xored.com>
Date: Mon, 29 Apr 2024 11:40:10 +0400
Subject: [PATCH] EZQMS-762: Improve printing layout (#5486)

Improve printing layout
---
 packages/panel/src/components/Panel.svelte    | 14 ++++-
 .../components/CollaborativeTextEditor.svelte |  2 +-
 .../src/components/toc/TableOfContents.svelte |  2 +-
 packages/theme/styles/_print.scss             | 21 +++++++
 packages/theme/styles/global.scss             |  5 ++
 packages/theme/styles/panel.scss              | 24 ++++++++
 packages/ui/src/components/Panel.svelte       | 57 ++++++++++++++-----
 .../ui/src/components/PanelInstance.svelte    | 13 +++++
 packages/ui/src/components/Scroller.svelte    |  4 ++
 packages/ui/src/components/TabsControl.svelte |  2 +-
 .../ui/src/components/internal/Root.svelte    |  5 ++
 .../src/components/AttachmentRefInput.svelte  |  2 +-
 .../src/components/EditDoc.svelte             |  1 +
 .../src/components/Guest.svelte               |  6 ++
 .../components/issues/edit/EditIssue.svelte   |  1 +
 .../issues/edit/QueryIssuesList.svelte        |  2 +-
 .../src/components/Workbench.svelte           | 10 +++-
 17 files changed, 149 insertions(+), 22 deletions(-)
 create mode 100644 packages/theme/styles/_print.scss

diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 543118bef5..59f5077f53 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -45,6 +45,8 @@
   export let customAside: ButtonItem[] | undefined = undefined
   export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
   export let kind: 'default' | 'modern' = 'default'
+  export let printHeader = true
+  export let printAside = false
 
   export function getAside (): string | boolean {
     return panel.getAside()
@@ -109,6 +111,8 @@
   bind:useMaxWidth
   {isFullSize}
   {customAside}
+  {printHeader}
+  {printAside}
   bind:selectedAside
   on:select={(result) => {
     selectedAside = result.detail
@@ -131,7 +135,7 @@
   <svelte:fragment slot="utils">
     {#if isUtils && $$slots.utils}
       <slot name="utils" />
-      <div class="buttons-divider max-h-7 h-7 mx-2" />
+      <div class="buttons-divider max-h-7 h-7 mx-2 no-print" />
     {/if}
   </svelte:fragment>
 
@@ -183,6 +187,14 @@
     <slot name="post-utils" />
   </svelte:fragment>
 
+  <svelte:fragment slot="page-header">
+    <slot name="page-header" />
+  </svelte:fragment>
+
+  <svelte:fragment slot="page-footer">
+    <slot name="page-footer" />
+  </svelte:fragment>
+
   {#if $deviceInfo.isMobile}
     <div bind:this={content} class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
       <slot />
diff --git a/packages/text-editor/src/components/CollaborativeTextEditor.svelte b/packages/text-editor/src/components/CollaborativeTextEditor.svelte
index 666381eb00..049e824883 100644
--- a/packages/text-editor/src/components/CollaborativeTextEditor.svelte
+++ b/packages/text-editor/src/components/CollaborativeTextEditor.svelte
@@ -562,7 +562,7 @@
   </div>
 
   {#if refActions.length > 0}
-    <div class="buttons-panel flex-between clear-mins">
+    <div class="buttons-panel flex-between clear-mins no-print">
       <div class="buttons-group xsmall-gap mt-3">
         {#each refActions as a}
           <Button
diff --git a/packages/text-editor/src/components/toc/TableOfContents.svelte b/packages/text-editor/src/components/toc/TableOfContents.svelte
index ed68ead5e3..3fbdc4c9fc 100644
--- a/packages/text-editor/src/components/toc/TableOfContents.svelte
+++ b/packages/text-editor/src/components/toc/TableOfContents.svelte
@@ -54,7 +54,7 @@
   }
 </script>
 
-<div class="root">
+<div class="root no-print">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="toc" class:hovered on:click={handleOpenToc}>
diff --git a/packages/theme/styles/_print.scss b/packages/theme/styles/_print.scss
new file mode 100644
index 0000000000..83058143b4
--- /dev/null
+++ b/packages/theme/styles/_print.scss
@@ -0,0 +1,21 @@
+@media print {
+  .no-print { 
+    display: none !important;
+  }
+
+  .pagebreak { 
+    page-break-before: always; 
+  }
+}
+
+@media not print {
+  .only-print {
+    display: none !important;
+  }
+}
+
+@mixin watermark {
+  position: fixed;
+  z-index: 9999;
+  page-break-after: always;
+}
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 19c3dfbf21..f3e054d191 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -17,6 +17,7 @@
 @import "./_colors.scss";
 @import "./_lumia-colors.scss";
 @import "./_layouts.scss";
+@import "./_print.scss";
 @import "./common.scss";
 @import "./button.scss";
 @import "./editors.scss";
@@ -142,4 +143,8 @@ body {
   width: 100%;
   overflow: hidden;
   touch-action: none;
+
+  @media print {
+    overflow: visible !important;
+  }
 }
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 358b3ac630..097d46c0ae 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -372,12 +372,32 @@
       }
     }
 
+    @media print {
+      border: none;
+    }
+
     // &.asideShown .popupPanel-body__main {
     //   border: 1px solid var(--divider-color);
     //   border-radius: 0 0 .5rem .5rem;
     // }
   }
 
+  .popupPanel-pageHeader {
+    @include watermark;
+
+    top: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+  
+  .popupPanel-pageFooter {
+    @include watermark;
+
+    bottom: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+
   &.modern {
     border: 1px solid transparent;
     border-radius: var(--small-focus-BorderRadius);
@@ -386,6 +406,10 @@
       min-height: 3.5rem;
     }
   }
+
+  @media print {
+    overflow: visible;
+  }
 }
 
 // Full size state
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index ff6988d55d..f623be77ee 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -45,6 +45,8 @@
   export let customAside: ButtonItem[] | undefined = undefined
   export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside
   export let kind: 'default' | 'modern' = 'default'
+  export let printHeader = true
+  export let printAside = false
 
   export function getAside (): string | boolean {
     if (customAside) return selectedAside
@@ -130,36 +132,51 @@
     }
     dispatch('select', result.detail)
   }
+
+  let isPrinting = false
 </script>
 
+<svelte:window
+  on:beforeprint={() => {
+    isPrinting = true
+  }}
+  on:afterprint={() => {
+    isPrinting = false
+  }}
+/>
+
 <div
   bind:this={el}
   class="popupPanel panel {kind}"
+  class:withPageHeader={$$slots['page-header'] !== undefined}
+  class:withPageFooter={$$slots['page-footer'] !== undefined}
   class:embedded
   use:resizeObserver={(element) => {
     panelWidth = element.clientWidth
     checkPanel()
   }}
 >
-  <div class="popupPanel-title" class:indent={allowClose}>
+  <div class="popupPanel-title" class:no-print={!printHeader} class:indent={allowClose}>
     {#if allowClose}
-      <Button
-        id={'btnPClose'}
-        focusIndex={10001}
-        icon={IconClose}
-        iconProps={{ size: 'medium' }}
-        kind={'icon'}
-        on:click={() => {
-          dispatch('close')
-        }}
-      />
-      <div class="antiHSpacer x2" />
+      <div class="no-print">
+        <Button
+          id={'btnPClose'}
+          focusIndex={10001}
+          icon={IconClose}
+          iconProps={{ size: 'medium' }}
+          kind={'icon'}
+          on:click={() => {
+            dispatch('close')
+          }}
+        />
+        <div class="antiHSpacer x2" />
+      </div>
     {/if}
     <div class="popupPanel-title__content">
       {#if !withoutTitle}<slot name="title" />{/if}
     </div>
     <slot name="pre-utils" />
-    <div class="flex-row-center ml-3">
+    <div class="flex-row-center ml-3 no-print">
       <slot name="utils" />
       {#if $$slots.aside && isAside}
         {#if customAside}
@@ -242,11 +259,17 @@
           </div>
         {/if}
         <slot />
+        {#if isPrinting && printAside}
+          <div class="only-print pagebreak">
+            <slot name="aside" />
+          </div>
+        {/if}
       </div>
     {/if}
+
     {#if $$slots.aside && isAside && asideShown}
       <Separator name={'panel-aside'} float={asideFloat} index={0} />
-      <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
+      <div class="popupPanel-body__aside no-print" class:float={asideFloat} class:shown={asideShown}>
         <Separator name={'panel-aside'} float={asideFloat ? 'aside' : true} index={0} />
         <div class="antiPanel-wrap__content">
           <slot name="aside" />
@@ -254,4 +277,10 @@
       </div>
     {/if}
   </div>
+  <div class="popupPanel-pageHeader only-print" id="page-header">
+    <slot name="page-header" />
+  </div>
+  <div class="popupPanel-pageFooter only-print" id="page-footer">
+    <slot name="page-footer" />
+  </div>
 </div>
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index c746c58ee0..48dee549ae 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -148,6 +148,12 @@
   on:keydown={(evt) => {
     if (props) handleKeydown(evt)
   }}
+  on:beforeprint={() => {
+    if (props && contentPanel) fitPopup(props, contentPanel)
+  }}
+  on:afterprint={() => {
+    if (props && contentPanel) fitPopup(props, contentPanel)
+  }}
 />
 {#if props}
   {#if !component}
@@ -204,6 +210,13 @@
     z-index: 401;
     position: fixed;
     background-color: transparent;
+
+    @media print {
+      position: static;
+      z-index: initial;
+      width: auto !important;
+      height: auto !important;
+    }
   }
 
   .modal-overlay {
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 04ac6ee2b9..ed08e67538 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -844,6 +844,10 @@
     &::-webkit-scrollbar:horizontal {
       height: 0;
     }
+
+    @media print {
+      overflow: visible !important;
+    }
   }
   .box {
     display: flex;
diff --git a/packages/ui/src/components/TabsControl.svelte b/packages/ui/src/components/TabsControl.svelte
index 3eb3f6e2cf..83726bedaa 100644
--- a/packages/ui/src/components/TabsControl.svelte
+++ b/packages/ui/src/components/TabsControl.svelte
@@ -23,7 +23,7 @@
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<div class="flex-stretch tabs-container" class:small={size === 'small'} style:padding class:noMargin>
+<div class="flex-stretch tabs-container no-print" class:small={size === 'small'} style:padding class:noMargin>
   {#each model as tab, i}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index d944bac993..1e875b0c5a 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -247,10 +247,15 @@
       .clock {
         margin: 0 12px 0 8px;
       }
+
+      @media print {
+        display: none;
+      }
     }
 
     .app {
       display: flex;
+      flex-direction: column;
       height: calc(100% - var(--status-bar-height));
 
       .error {
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index 444929b7b4..6193fd138f 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -265,7 +265,7 @@
   }
 </script>
 
-<div bind:this={refContainer} on:paste={pasteAction}>
+<div class="no-print" bind:this={refContainer} on:paste={pasteAction}>
   <input
     bind:this={inputFile}
     multiple
diff --git a/plugins/document-resources/src/components/EditDoc.svelte b/plugins/document-resources/src/components/EditDoc.svelte
index 9fc21e8bba..86e46d1028 100644
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@@ -236,6 +236,7 @@
     isCustomAttr={false}
     isSub={false}
     useMaxWidth={false}
+    printHeader={false}
     {embedded}
     {kind}
     bind:content
diff --git a/plugins/guest-resources/src/components/Guest.svelte b/plugins/guest-resources/src/components/Guest.svelte
index 77524d1e1a..da089071f6 100644
--- a/plugins/guest-resources/src/components/Guest.svelte
+++ b/plugins/guest-resources/src/components/Guest.svelte
@@ -350,4 +350,10 @@
     justify-content: center;
     padding: 2rem;
   }
+
+  @media print {
+    .workbench-container:has(~ .panel-instance) {
+      display: none;
+    }
+  }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index 64ff383df7..93a49816ba 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -183,6 +183,7 @@
     {embedded}
     {kind}
     withoutActivity={false}
+    printAside={true}
     bind:content
     bind:innerWidth
     on:open
diff --git a/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte b/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte
index 7953bb566c..562778357c 100644
--- a/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte
@@ -132,7 +132,7 @@
       </Button>
     {/if}
   {/if}
-  <div class="flex-row-center gap-2">
+  <div class="flex-row-center gap-2 no-print">
     {#if hasSubIssues}
       <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'ghost'} bind:viewlet />
     {/if}
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 77254bcf4b..b09db7e41e 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -646,7 +646,7 @@
     class:modern-app={modern}
     style:flex-direction={appsDirection === 'horizontal' ? 'column-reverse' : 'row'}
   >
-    <div class="antiPanel-application {appsDirection}" class:lastDivider={!visibleNav}>
+    <div class="antiPanel-application {appsDirection} no-print" class:lastDivider={!visibleNav}>
       <div
         class="hamburger-container clear-mins"
         class:portrait={appsDirection === 'horizontal'}
@@ -750,7 +750,7 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         {#if navFloat}<div class="cover shown" on:click={() => (visibleNav = false)} />{/if}
-        <div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
+        <div class="antiPanel-navigator no-print {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
           <div class="antiPanel-wrap__content">
             {#if currentApplication}
               <NavHeader label={currentApplication.label} />
@@ -1017,4 +1017,10 @@
       }
     }
   }
+
+  @media print {
+    .workbench-container:has(~ .panel-instance) {
+      display: none;
+    }
+  }
 </style>