Auto-maximize attached files on open (#9472)

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

packages/presentation/src/components/FilePreviewPopup.svelte

@@ -16,7 +16,18 @@
   import { Analytics } from '@hcengineering/analytics'
   import { BlobMetadata, SortingOrder, type Blob, type Ref } from '@hcengineering/core'
   import { getEmbeddedLabel } from '@hcengineering/platform'
-  import { Button, Dialog, IconHistory, IconScribble, showPopup, tooltip } from '@hcengineering/ui'
+  import {
+    Button,
+    Modal,
+    IconHistory,
+    IconScribble,
+    showPopup,
+    tooltip,
+    ButtonIcon,
+    IconMaximize,
+    IconMinimize,
+    IconClose
+  } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
 
   import ActionContext from './ActionContext.svelte'
@@ -122,13 +133,39 @@
 </script>
 
 <ActionContext context={{ mode: 'browser' }} />
-<Dialog
+<Modal
+  type={'type-component'}
+  padding={'0.5rem'}
+  bottomPadding={'0'}
   on:fullsize
   on:close={() => {
     dispatch('close')
   }}
-  padding="0.5rem"
 >
+  <svelte:fragment slot="beforeTitle">
+    <ButtonIcon
+      icon={IconClose}
+      kind={'tertiary'}
+      size={'small'}
+      noPrint
+      on:click={() => {
+        dispatch('close')
+      }}
+    />
+    <div class="hulyHeader-divider short no-line no-print" />
+    <ButtonIcon
+      icon={!fullSize ? IconMaximize : IconMinimize}
+      kind={'tertiary'}
+      size={'small'}
+      noPrint
+      on:click={() => {
+        fullSize = !fullSize
+        dispatch('fullsize', fullSize)
+      }}
+    />
+    <div class="hulyHeader-divider short no-print" />
+  </svelte:fragment>
+
   <svelte:fragment slot="title">
     <div class="antiTitle icon-wrapper">
       {#if showIcon}
@@ -140,7 +177,7 @@
     </div>
   </svelte:fragment>
 
-  <svelte:fragment slot="utils">
+  <svelte:fragment slot="actions">
     {#if props.drawingAvailable === true}
       {#if props.drawings !== undefined && props.drawings.length > 0}
         <Button
@@ -176,4 +213,4 @@
   {#if file}
     <FilePreview {file} {contentType} {name} {metadata} {props} fit />
   {/if}
-</Dialog>
+</Modal>

packages/presentation/src/filetypes.ts

@@ -95,9 +95,9 @@ export async function getPreviewType (
  */
 export function getPreviewAlignment (contentType: string): PopupAlignment {
   if (contentType.startsWith('image/')) {
-    return 'full-centered'
+    return 'centered'
   } else if (contentType.startsWith('video/')) {
-    return 'full-centered'
+    return 'centered'
   } else {
     return 'float'
   }

packages/theme/styles/components.scss

@@ -477,8 +477,14 @@
     height: var(--spacing-4);
     background-color: var(--theme-divider-color); // var(--global-surface-02-BorderColor);
     
+    &.no-line {
+      width: 0;
+      background-color: transparent;
+    }
     &.short {
       margin: 0 var(--spacing-1);
+
+      &.no-line { margin: 0 var(--spacing-0_125); }
     }
   }
   .hulyHeader-titleGroup,

packages/ui/src/components/Modal.svelte

@@ -30,6 +30,7 @@
   export let canSave: boolean = false
   export let okLabel: IntlString = ui.string.Ok
   export let padding: string | undefined = undefined
+  export let bottomPadding: string | undefined = undefined
   export let hidden: boolean = false
   export let noTopIndent: boolean = false
   export let hideFooter: boolean = false
@@ -89,7 +90,7 @@
     {#if scrollableContent}
       <Scroller
         padding={padding ?? typePadding}
-        bottomPadding={type === 'type-popup'
+        bottomPadding={bottomPadding ?? type === 'type-popup'
           ? undefined
           : type === 'type-aside'
             ? 'var(--spacing-2)'

packages/ui/src/components/PopupInstance.svelte

@@ -40,6 +40,7 @@
     initialProps = Object.assign(initialProps, props)
   }
   const WINDOW_PADDING = 1
+  const ALLOW_ANIMATION = false // Fullsize animation
 
   interface PopupParams {
     x: number
@@ -51,7 +52,7 @@
   let modalHTML: HTMLElement
   let componentInstance: any
   let docSize: boolean = false
-  let fullSize: boolean = false
+  let fullSize: boolean = initialProps?.fullSize ?? false
 
   let clientWidth = -1
   let clientHeight = -1
@@ -282,7 +283,7 @@
   id={popup.options.refId}
   class="popup {testing ? 'endShow' : showing === undefined ? 'endShow' : !showing ? 'preShow' : 'startShow'}"
   class:testing
-  class:anim={(element === 'float' || element === 'centered') && !testing && !drag}
+  class:anim={(element === 'float' || element === 'centered') && !testing && !drag && ALLOW_ANIMATION}
   bind:this={modalHTML}
   style={`z-index: ${zIndex};`}
   style:top={options?.props?.top}

plugins/attachment-resources/src/components/PreviewWidget.svelte

@@ -69,7 +69,7 @@
       showTooltip={{ label: attachment.string.OpenInWindow }}
       on:click={() => {
         closeTooltip()
-        showPopup(FilePreviewPopup, { file, name: fileName, contentType, metadata }, 'centered')
+        showPopup(FilePreviewPopup, { file, name: fileName, contentType, metadata, fullSize: true }, 'centered')
       }}
     />
   </svelte:fragment>

plugins/attachment-resources/src/utils.ts

@@ -155,9 +155,12 @@ export function isAttachment (value: Attachment | BlobType): value is WithLookup
   return (value as Attachment)._id !== undefined
 }
 
-export function showAttachmentPreviewPopup (value: WithLookup<Attachment> | BlobType): PopupResult {
+export function showAttachmentPreviewPopup (
+  value: WithLookup<Attachment> | BlobType,
+  fullSize: boolean = true
+): PopupResult {
   closeTooltip()
-  return showPopup(AttachmentPreviewPopup, { value }, getPreviewAlignment(value.type ?? ''))
+  return showPopup(AttachmentPreviewPopup, { value, fullSize }, getPreviewAlignment(value.type ?? ''))
 }
 
 interface ImageDimensions {