Sidebar attachments preview (#6797)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

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

@@ -25,10 +25,12 @@
   } from '@hcengineering/presentation'
   import { IconMoreH, Menu, Action as UIAction, closeTooltip, showPopup, tooltip } from '@hcengineering/ui'
   import view, { Action } from '@hcengineering/view'
+  import workbench from '@hcengineering/workbench'
 
   import AttachmentAction from './AttachmentAction.svelte'
   import FileDownload from './icons/FileDownload.svelte'
   import attachmentPlugin from '../plugin'
+  import { openAttachmentInSidebar } from '../utils'
 
   export let attachment: WithLookup<Attachment>
   export let isSaved = false
@@ -95,6 +97,13 @@
     if (canPreview) {
       actions.push(openAction)
     }
+    actions.push({
+      icon: view.icon.DetailsFilled,
+      label: workbench.string.OpenInSidebar,
+      action: async () => {
+        await openAttachmentInSidebar(attachment)
+      }
+    })
     actions.push({
       label: saveAttachmentAction.label,
       icon: saveAttachmentAction.icon,

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

@@ -17,11 +17,10 @@
   import type { Attachment } from '@hcengineering/attachment'
   import core, { type WithLookup } from '@hcengineering/core'
   import presentation, {
-    FilePreviewPopup,
     canPreviewFile,
+    FilePreviewPopup,
     getBlobRef,
     getFileUrl,
-    getPreviewAlignment,
     previewTypes,
     sizeToWidth
   } from '@hcengineering/presentation'
@@ -29,7 +28,7 @@
   import { permissionsStore } from '@hcengineering/view-resources'
   import filesize from 'filesize'
   import { createEventDispatcher } from 'svelte'
-  import { getType } from '../utils'
+  import { getType, openAttachmentInSidebar } from '../utils'
 
   import AttachmentName from './AttachmentName.svelte'
 
@@ -70,7 +69,7 @@
     canPreview = false
   }
 
-  function clickHandler (e: MouseEvent): void {
+  async function clickHandler (e: MouseEvent): Promise<void> {
     if (value === undefined || !canPreview) return
 
     e.preventDefault()
@@ -80,16 +79,20 @@
       return
     }
     closeTooltip()
-    showPopup(
-      FilePreviewPopup,
-      {
-        file: value.file,
-        contentType: value.type,
-        name: value.name,
-        metadata: value.metadata
-      },
-      getPreviewAlignment(value.type)
-    )
+    if (value.type.startsWith('image/') || value.type.startsWith('video/') || value.type.startsWith('audio/')) {
+      showPopup(
+        FilePreviewPopup,
+        {
+          file: value.file,
+          contentType: value.type,
+          name: value.name,
+          metadata: value.metadata
+        },
+        'centered'
+      )
+    } else {
+      await openAttachmentInSidebar(value)
+    }
   }
 
   function middleClickHandler (e: MouseEvent): void {

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

@@ -14,13 +14,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Attachment } from '@hcengineering/attachment'
+  import { Attachment } from '@hcengineering/attachment'
   import { FilePreviewPopup } from '@hcengineering/presentation'
   import { closeTooltip, showPopup } from '@hcengineering/ui'
   import { ListSelectionProvider } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
+  import { WithLookup } from '@hcengineering/core'
 
-  import type { WithLookup } from '@hcengineering/core'
   import { AttachmentImageSize } from '../types'
   import { getType } from '../utils'
   import AttachmentActions from './AttachmentActions.svelte'

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

@@ -0,0 +1,41 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { Blob, Ref } from '@hcengineering/core'
+  import { BlobMetadata } from '@hcengineering/presentation'
+  import { Button, closePopup, closeTooltip, IconDetailsFilled } from '@hcengineering/ui'
+  import workbench from '@hcengineering/workbench'
+
+  import { openFilePreviewInSidebar } from '../utils'
+
+  export let file: Ref<Blob> | undefined
+  export let name: string
+  export let contentType: string
+  export let metadata: BlobMetadata | undefined
+</script>
+
+{#if file}
+  <Button
+    icon={IconDetailsFilled}
+    kind="icon"
+    on:click={() => {
+      if (file === undefined) return
+      closeTooltip()
+      closePopup()
+      void openFilePreviewInSidebar(file, name, contentType, metadata)
+    }}
+    showTooltip={{ label: workbench.string.OpenInSidebar }}
+  />
+{/if}

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

@@ -0,0 +1,68 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import workbench, { Widget, WidgetTab } from '@hcengineering/workbench'
+  import { FilePreview, DownloadFileButton, FilePreviewPopup, FileTypeIcon } from '@hcengineering/presentation'
+  import { Breadcrumbs, Button, closeTooltip, Header, IconOpen, showPopup } from '@hcengineering/ui'
+  import { getResource } from '@hcengineering/platform'
+  import view from '@hcengineering/view'
+
+  import attachment from '../plugin'
+
+  export let widget: Widget
+  export let tab: WidgetTab
+
+  $: file = tab.data?.file
+  $: fileName = tab.data?.name ?? ''
+  $: contentType = tab.data?.contentType
+  $: metadata = tab.data?.metadata
+
+  async function closeTab (): Promise<void> {
+    const fn = await getResource(workbench.function.CloseWidgetTab)
+    await fn(widget, tab.id)
+  }
+</script>
+
+<Header
+  allowFullsize={false}
+  type="type-aside"
+  hideBefore={true}
+  hideActions={false}
+  hideDescription={true}
+  adaptive="disabled"
+  closeOnEscape={false}
+  on:close={closeTab}
+>
+  <Breadcrumbs
+    items={[{ title: fileName, icon: FileTypeIcon, iconProps: { name: fileName }, iconMargin: '0 0.5rem 0 0' }]}
+    currentOnly
+  />
+  <svelte:fragment slot="actions">
+    <DownloadFileButton name={fileName} {file} />
+    <Button
+      icon={view.icon.Open}
+      kind="icon"
+      showTooltip={{ label: attachment.string.OpenInWindow }}
+      on:click={() => {
+        closeTooltip()
+        showPopup(FilePreviewPopup, { file, name: fileName, contentType, metadata }, 'centered')
+      }}
+    />
+  </svelte:fragment>
+</Header>
+
+{#if file}
+  <FilePreview {file} {contentType} name={fileName} {metadata} />
+{/if}