From 5e10da812dabf1d2125964f6211edd59bcc3454a Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 19 Nov 2024 07:08:56 +0300
Subject: [PATCH] UI fixes (#7192)

---
 packages/theme/styles/_text-editor.scss       |  3 ++
 packages/ui/src/components/Scroller.svelte    |  4 ++
 .../components/MeetingMinutesSection.svelte   | 20 ++++----
 .../src/components/VideoPopup.svelte          | 45 ++++++++++++----
 .../src/components/DOCXViewer.svelte          | 51 +++++++++++++------
 5 files changed, 89 insertions(+), 34 deletions(-)

diff --git a/packages/theme/styles/_text-editor.scss b/packages/theme/styles/_text-editor.scss
index ae5b6235ad..c546f3cebf 100644
--- a/packages/theme/styles/_text-editor.scss
+++ b/packages/theme/styles/_text-editor.scss
@@ -450,3 +450,6 @@
 .select-text p > br.ProseMirror-trailingBreak::selection {
   background: transparent;
 }
+.select-text .text-editor-image-container {
+  user-select: all;
+}
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 56c8dc1c32..039f07bb67 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -48,6 +48,8 @@
   export let disablePointerEventsOnScroll = false
   export let onScroll: ((params: ScrollParams) => void) | undefined = undefined
   export let onResize: (() => void) | undefined = undefined
+  export let containerName: string | undefined = undefined
+  export let containerType: 'size' | 'inline-size' | undefined = containerName !== undefined ? 'inline-size' : undefined
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -598,6 +600,8 @@
             : 'row'}
         style:height={contentDirection === 'vertical-reverse' ? 'max-content' : noStretch ? 'auto' : '100%'}
         style:align-items={align}
+        style:container-name={containerName}
+        style:container-type={containerType}
         class:disableEvents={isScrolling && disablePointerEventsOnScroll}
         use:resizeObserver={() => {
           checkAutoScroll()
diff --git a/plugins/love-resources/src/components/MeetingMinutesSection.svelte b/plugins/love-resources/src/components/MeetingMinutesSection.svelte
index 12f735259b..70ee8628dc 100644
--- a/plugins/love-resources/src/components/MeetingMinutesSection.svelte
+++ b/plugins/love-resources/src/components/MeetingMinutesSection.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { Class, Doc, Ref, Space } from '@hcengineering/core'
-  import { Label, Section } from '@hcengineering/ui'
+  import { Label, Section, Scroller } from '@hcengineering/ui'
   import { Table, ViewletsSettingButton } from '@hcengineering/view-resources'
   import { Viewlet, ViewletPreference } from '@hcengineering/view'
 
@@ -46,14 +46,16 @@
 
   <svelte:fragment slot="content">
     {#if meetings > 0 && viewlet}
-      <Table
-        _class={love.class.MeetingMinutes}
-        config={preference?.config ?? viewlet.config}
-        query={{ attachedTo: objectId }}
-        loadingProps={{ length: meetings }}
-        prefferedSorting="createdOn"
-        {readonly}
-      />
+      <Scroller horizontal>
+        <Table
+          _class={love.class.MeetingMinutes}
+          config={preference?.config ?? viewlet.config}
+          query={{ attachedTo: objectId }}
+          loadingProps={{ length: meetings }}
+          prefferedSorting="createdOn"
+          {readonly}
+        />
+      </Scroller>
     {:else}
       <div class="antiSection-empty solid flex-col mt-3">
         <span class="content-dark-color">
diff --git a/plugins/love-resources/src/components/VideoPopup.svelte b/plugins/love-resources/src/components/VideoPopup.svelte
index ef369c064f..d162084bc5 100644
--- a/plugins/love-resources/src/components/VideoPopup.svelte
+++ b/plugins/love-resources/src/components/VideoPopup.svelte
@@ -141,7 +141,7 @@
     participants = participants
     participantElements.length = participants.length
     await tick()
-    participantElements[index].appendChild(element)
+    participantElements[index]?.appendChild(element)
   }
 
   function attachParticipant (participant: Participant): void {
@@ -362,12 +362,21 @@
   <div class="screenContainer" class:hidden={!$screenSharing || $isSharingEnabled}>
     <video class="screen" bind:this={screen}></video>
   </div>
-  <Scroller bind:divScroll noStretch padding={'0 .5rem'} gap={'flex-gap-2'} onResize={dispatchFit} stickedScrollBars>
-    {#each activeParticipants as participant, i (participant._id)}
-      <div class="video">
-        <ParticipantView bind:this={participantElements[i]} {...participant} small />
-      </div>
-    {/each}
+  <Scroller
+    bind:divScroll
+    noStretch
+    padding={'0 .5rem'}
+    containerName={'videoPopupСontainer'}
+    onResize={dispatchFit}
+    stickedScrollBars
+  >
+    <div class="videoGrid">
+      {#each activeParticipants as participant, i (participant._id)}
+        <div class="video">
+          <ParticipantView bind:this={participantElements[i]} {...participant} small />
+        </div>
+      {/each}
+    </div>
   </Scroller>
   <div class="antiNav-space" />
 </div>
@@ -390,7 +399,6 @@
       border: none;
       box-shadow: none;
     }
-
     .header {
       display: flex;
       justify-content: space-between;
@@ -412,6 +420,9 @@
     max-height: 100%;
     border-radius: 0.75rem;
 
+    &.hidden {
+      display: none;
+    }
     .screen {
       object-fit: contain;
       max-width: 100%;
@@ -419,7 +430,21 @@
       border-radius: 0.75rem;
     }
   }
-  .hidden {
-    display: none;
+
+  .videoGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row;
+    gap: var(--spacing-1);
+  }
+  @container videoPopupСontainer (max-width: 60rem) {
+    .videoGrid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @container videoPopupСontainer (max-width: 30rem) {
+    .videoGrid {
+      grid-template-columns: 1fr;
+    }
   }
 </style>
diff --git a/plugins/print-resources/src/components/DOCXViewer.svelte b/plugins/print-resources/src/components/DOCXViewer.svelte
index c4fa118d1f..bffc197874 100644
--- a/plugins/print-resources/src/components/DOCXViewer.svelte
+++ b/plugins/print-resources/src/components/DOCXViewer.svelte
@@ -38,13 +38,14 @@
 
   $: src = convertedFile === undefined ? '' : getFileUrl(convertedFile as Ref<Blob>, name)
 
-  const colors = $themeStore.dark
+  $: colors = $themeStore.dark
     ? `
     --theme-text-primary-color: rgba(255, 255, 255, .8);
     --theme-link-color: #377AE6;
     --button-border-hover: #45484e;
     --text-editor-table-header-color: rgba(255, 255, 255, 0.06);
     --scrollbar-bar-color: #35354a;
+    --scrollbar-bar-hover: #8a8aa5;
   `
     : `
     --theme-text-primary-color: rgba(0, 0, 0, .8);
@@ -52,7 +53,9 @@
     --button-border-hover: #c9cbcd;
     --text-editor-table-header-color: rgba(0, 0, 0, 0.06);
     --scrollbar-bar-color: #e0e0e0;
+    --scrollbar-bar-hover: #90959d;
   `
+  let oldColors = colors
 
   $: css = `
     * {
@@ -68,10 +71,9 @@
       --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
       --timing-rotate: cubic-bezier(.28,1.92,.39,.56);
       --timing-clock: cubic-bezier(.35,2.1,.79,.71);
-      
-      &::after,
-      &::before { box-sizing: border-box; }
     }
+    *::after,
+    *::before { box-sizing: border-box; }
 
     body {
       ${colors}
@@ -88,6 +90,10 @@
 
       margin: 0 auto;
       max-width: 1200px;
+
+      @media not print {
+        padding: .75rem 1.5rem;
+      }
     }
 
     @media only screen and (max-width: 600px) {
@@ -237,20 +243,17 @@
       }
     }
 
-    &::-webkit-scrollbar-thumb {
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar:horizontal { height: 6px; }
+    ::-webkit-scrollbar-track { margin: 6px; }
+    ::-webkit-scrollbar-thumb {
       background-color: var(--scrollbar-bar-color);
+      border-radius: .25rem;
     }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scrollbar-bar-hover);
-    }
-
-    &::-webkit-scrollbar-corner {
+    ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-bar-hover); }
+    ::-webkit-scrollbar-corner {
       background-color: var(--scrollbar-bar-color);
-    }
-
-    &::-webkit-scrollbar-track {
-      margin: 0;
+      border-radius: .25rem;
     }
 
     cmark {
@@ -261,6 +264,15 @@
   `
 
   let frame: HTMLIFrameElement | undefined = undefined
+  const applyStyles = (): void => {
+    const head = frame?.contentDocument?.querySelector('head')
+
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+    if (css !== undefined && head !== undefined && head !== null) {
+      head.appendChild(document.createElement('style')).textContent = css
+    }
+  }
+
   // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   $: if (css !== undefined && frame !== undefined && frame !== null) {
     frame.onload = () => {
@@ -269,9 +281,18 @@
       // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       if (css !== undefined && head !== undefined && head !== null) {
         head.appendChild(document.createElement('style')).textContent = css
+        oldColors = colors
       }
     }
   }
+  $: if (oldColors !== colors && css !== undefined && frame != null) {
+    const style = frame?.contentDocument?.querySelector('head style')
+
+    if (style != null) {
+      style.textContent = css
+      oldColors = colors
+    }
+  }
 </script>
 
 {#if src}