Reserving height for content in FilePreview (#5902)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

packages/presentation/src/components/FilePreview.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { type Blob } from '@hcengineering/core'
-  import { Button, Component, Label } from '@hcengineering/ui'
+  import { Button, Component, Label, resizeObserver, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   import presentation from '../plugin'
 
@@ -29,26 +29,67 @@
   export let props: Record<string, any> = {}
 
   let download: HTMLAnchorElement
+  let parentWidth: number
+  let minHeight: number | undefined
+  $: parentHeight = ($deviceInfo.docHeight * 80) / 100
 
   let previewType: FilePreviewExtension | undefined = undefined
   $: void getPreviewType(file.contentType, $previewTypes).then((res) => {
     previewType = res
   })
+
+  const updateHeight = (
+    pWidth: number,
+    pHeight: number,
+    pT: FilePreviewExtension | undefined,
+    mD: BlobMetadata | undefined
+  ): void => {
+    if (pT === undefined || mD?.originalWidth === undefined || mD?.originalHeight === undefined) {
+      minHeight = undefined
+      return
+    }
+    if (pT.contentType === 'audio/*') {
+      minHeight = $deviceInfo.fontSize * 3.375
+      return
+    }
+    if (Array.isArray(pT.contentType) && pT.contentType[0] === 'application/pdf') {
+      minHeight = parentHeight
+      return
+    }
+    const pR: number = mD?.pixelRatio ?? 1
+    const fWidth: number = mD.originalWidth / pR
+    const fHeight: number = mD.originalHeight / pR
+    let mHeight: number = 0
+    let scale: number = 1
+    if (fWidth > pWidth) {
+      scale = fWidth / pWidth
+      mHeight = fHeight / scale
+    }
+    if (fHeight > pHeight && fHeight / pHeight > scale) {
+      scale = fHeight / pHeight
+      mHeight = fHeight / scale
+    }
+    minHeight = scale === 1 ? fHeight : mHeight
+  }
+  $: updateHeight(parentWidth, parentHeight, previewType, metadata)
   $: srcRef = getBlobSrcFor(file, name)
 </script>
 
+<div
+  use:resizeObserver={(element) => (parentWidth = element.clientWidth)}
+  class="content flex-col items-center w-full h-full"
+  style:min-height={`${minHeight ?? 0}px`}
+>
   {#await srcRef then src}
     {#if src === ''}
       <div class="centered">
         <Label label={presentation.string.FailedToPreview} />
       </div>
     {:else if previewType !== undefined}
-    <div class="content flex-col flex-grow items-center">
       <Component
         is={previewType.component}
         props={{ value: file, name, contentType: file.contentType, metadata, ...props }}
       />
-    </div>
     {:else}
       <div class="centered flex-col flex-gap-3">
         <Label label={presentation.string.ContentTypeNotSupported} />
@@ -65,6 +106,7 @@
       </div>
     {/if}
   {/await}
+</div>
 
 <style lang="scss">
   .content {
@@ -72,12 +114,4 @@
     overflow: auto;
     border: none;
   }
-  .centered {
-    flex-grow: 1;
-    width: 100;
-    height: 100;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 </style>

packages/ui/src/components/Panel.svelte

@@ -176,7 +176,7 @@
       {#if !withoutTitle}<slot name="title" />{/if}
     </div>
     <slot name="pre-utils" />
-    <div class="flex-row-center ml-3 no-print">
+    <div class="flex-row-center flex-no-shrink ml-3 no-print">
       <slot name="utils" />
       {#if $$slots.aside && isAside}
         {#if customAside}

packages/ui/src/components/calendar/Month.svelte

@@ -42,6 +42,7 @@
   let monthYear: string
   const today: Date = new Date(Date.now())
   const viewDate: Date = new Date(currentDate ?? today)
+  let selectedDate: Date = new Date(currentDate ?? today)
   $: firstDayOfCurrentMonth = firstDay(viewDate, mondayStart)
   const isToday = (n: number): boolean => {
     if (areDatesEqual(today, new Date(viewDate.getFullYear(), viewDate.getMonth(), n))) return true
@@ -50,8 +51,8 @@
 
   let days: ICell[] = []
   const getDateStyle = (date: Date): TCellStyle => {
-    if (currentDate != null) {
+    if (selectedDate != null) {
-      const zonedTime = fromCurrentToTz(currentDate, timeZone)
+      const zonedTime = fromCurrentToTz(selectedDate, timeZone)
       if (areDatesEqual(zonedTime, date)) {
         return 'selected'
       }
@@ -129,6 +130,7 @@
               : day.dayOfWeek + 2};"
           on:click|stopPropagation={() => {
             viewDate.setDate(i + 1)
+            selectedDate = new Date(viewDate)
             dispatch('update', viewDate)
           }}
         >

plugins/view-resources/src/components/viewer/ImageViewer.svelte

@@ -21,8 +21,14 @@
   export let metadata: BlobMetadata | undefined
 
   $: p = typeof value === 'string' ? getBlobRef(undefined, value, name) : getBlobRef(value, value._id)
-  $: maxWidth = metadata?.originalWidth ? `min(${metadata.originalWidth}px, 100%)` : undefined
+  $: maxWidth =
-  $: maxHeight = metadata?.originalHeight ? `min(${metadata.originalHeight}px, 80vh)` : undefined
+    metadata?.originalWidth && metadata?.pixelRatio
+      ? `min(${metadata.originalWidth / metadata.pixelRatio}px, 100%)`
+      : undefined
+  $: maxHeight =
+    metadata?.originalHeight && metadata?.pixelRatio
+      ? `min(${metadata.originalHeight / metadata.pixelRatio}px, 80vh)`
+      : undefined
 </script>
 
 {#await p then blobRef}