diff --git a/plugins/view-resources/src/components/ActionContext.svelte b/packages/presentation/src/components/ActionContext.svelte similarity index 100% rename from plugins/view-resources/src/components/ActionContext.svelte rename to packages/presentation/src/components/ActionContext.svelte diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte index e95080468b..0835110a4f 100644 --- a/packages/presentation/src/components/PDFViewer.svelte +++ b/packages/presentation/src/components/PDFViewer.svelte @@ -19,6 +19,7 @@ import presentation from '..' import { getFileUrl } from '../utils' import Download from './icons/Download.svelte' + import ActionContext from './ActionContext.svelte' export let file: string export let name: string @@ -40,6 +41,7 @@ let download: HTMLAnchorElement + { return await import(`../lang/${lang}.json`) diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index 6f3f0a4889..cd20a415bc 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -32,6 +32,16 @@ export interface PopupResult { export const popupstore = writable([]) +export function updatePopup (id: string, props: Partial): void { + popupstore.update((popups) => { + const popupIndex = popups.findIndex((p) => p.id === id) + if (popupIndex !== -1) { + popups[popupIndex] = { ...popups[popupIndex], ...props } + } + return popups + }) +} + function addPopup (props: CompAndProps): void { popupstore.update((popups) => { popups.push(props) diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte index 1583c9fcc3..5973ab4b0f 100644 --- a/plugins/attachment-resources/src/components/AttachmentPreview.svelte +++ b/plugins/attachment-resources/src/components/AttachmentPreview.svelte @@ -21,9 +21,13 @@ import AttachmentPresenter from './AttachmentPresenter.svelte' import AttachmentActions from './AttachmentActions.svelte' import AudioPlayer from './AudioPlayer.svelte' + import { ListSelectionProvider } from '@hcengineering/view-resources' + import { createEventDispatcher } from 'svelte' export let value: Attachment export let isSaved: boolean = false + export let listProvider: ListSelectionProvider | undefined = undefined + const dispatch = createEventDispatcher() $: type = getType(value.type) @@ -34,11 +38,13 @@ class="content flex-center buttonContainer cursor-pointer" on:click={() => { closeTooltip() - showPopup( + if (listProvider !== undefined) listProvider.updateFocus(value) + const popupInfo = showPopup( PDFViewer, { file: value.file, name: value.name, contentType: value.type }, value.type.startsWith('image/') ? 'centered' : 'float' ) + dispatch('open', popupInfo.id) }} > diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte index 5248ec113a..b3bd351c9a 100644 --- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte +++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte @@ -18,12 +18,13 @@ import { IntlString, setPlatformStatus, unknownError } from '@hcengineering/platform' import { createQuery, DraftController, draftsStore, getClient } from '@hcengineering/presentation' import { StyledTextBox } from '@hcengineering/text-editor' - import { IconSize } from '@hcengineering/ui' + import { IconSize, updatePopup } from '@hcengineering/ui' import { createEventDispatcher, onDestroy } from 'svelte' import attachment from '../plugin' import { deleteFile, uploadFile } from '../utils' import AttachmentPresenter from './AttachmentPresenter.svelte' import AttachmentPreview from './AttachmentPreview.svelte' + import { ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources' export let objectId: Ref | undefined = undefined export let space: Ref | undefined = undefined @@ -48,6 +49,18 @@ $: draftKey = objectId ? `${objectId}_attachments` : undefined const dispatch = createEventDispatcher() + let attachmentPopupId: string = '' + const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => { + const currentAttachmentIndex = listProvider.current() + if (currentAttachmentIndex === undefined) return + const selected = currentAttachmentIndex + offset + const sel = listProvider.docs()[selected] as Attachment + if (sel !== undefined && attachmentPopupId !== '') { + listProvider.updateFocus(sel) + updatePopup(attachmentPopupId, { props: { file: sel.file, name: sel.name, contentType: sel.type } }) + } + }) + $: listProvider.update(Array.from(attachments.values()).filter((attachment) => attachment.type.startsWith('image/'))) export function focus (): void { refInput.focus() @@ -358,10 +371,10 @@ {#if attachments.size && fakeAttach === 'normal'} - {#each Array.from(attachments.values()) as attachment} + {#each Array.from(attachments.values()) as attachment, index} {#if useAttachmentPreview} - + (attachmentPopupId = res.detail)} /> {:else}