diff --git a/plugins/chunter-resources/package.json b/plugins/chunter-resources/package.json index c4938a37d8..b69a835f1a 100644 --- a/plugins/chunter-resources/package.json +++ b/plugins/chunter-resources/package.json @@ -24,6 +24,7 @@ "@anticrm/chunter":"~0.6.0", "svelte":"^3.37.0", "@anticrm/text-editor":"~0.6.0", - "@anticrm/contact": "~0.6.0" + "@anticrm/contact": "~0.6.0", + "@anticrm/view-resources": "~0.6.0" } } diff --git a/plugins/chunter-resources/src/components/AttachmentPopup.svelte b/plugins/chunter-resources/src/components/AttachmentPopup.svelte index 719a6ae030..c7fe8bac48 100644 --- a/plugins/chunter-resources/src/components/AttachmentPopup.svelte +++ b/plugins/chunter-resources/src/components/AttachmentPopup.svelte @@ -17,71 +17,17 @@ <script lang="ts"> import type { Bag } from '@anticrm/core' import type { Attachment } from '@anticrm/chunter' - import { showPopup, closeTooltip } from '@anticrm/ui' - import { PDFViewer } from '@anticrm/presentation' + import { Table } from '@anticrm/view-resources' + + import chunter from '@anticrm/chunter' export let files: Bag<Attachment> - const maxLenght: number = 32 - const trimFilename = (fname: string): string => (fname.length > maxLenght) - ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) - : fname </script> -<table class="table-body"> - <tbody> - <!-- {#each Object.values(files) as file} - <tr class="tr-body"> - <td class="item flex-row-center" on:click={() => { - closeTooltip() - showPopup(PDFViewer, { file: file.file }, 'right') - }}> - <div class="flex-center file-icon">pdf</div> - <div class="flex-col flex-grow"> - <div class="overflow-label caption-color">{trimFilename(file.name)}</div> - <div class="overflow-label file-desc">{file.type}</div> - </div> - </td> - <td>10 / 8</td> - </tr> - {/each} --> - </tbody> -</table> - -<style lang="scss"> - th, td { - padding: .75rem 0; - text-align: left; - } - th { - font-weight: 500; - font-size: .75rem; - color: var(--theme-content-dark-color); - } - td { - color: var(--theme-caption-color); - } - .tr-body { - border-top: 1px solid var(--theme-button-border-hovered); - &:first-child { border-top: none; } - } - - .item { padding: .75rem 1rem .75rem 0; cursor: pointer; } - .file-icon { - margin-right: 1.25rem; - width: 2rem; - height: 2rem; - font-weight: 500; - font-size: 0.625rem; - line-height: 150%; - text-transform: uppercase; - color: #fff; - background-color: var(--primary-button-enabled); - border: 1px solid rgba(0, 0, 0, .1); - border-radius: .5rem; - } - .file-desc { - font-size: 0.75rem; - color: var(--theme-content-dark-color); - } -</style> +<Table +_class={chunter.class.Attachment} +config={['', 'file', 'type']} +options={ {} } +search="" +/> diff --git a/plugins/chunter-resources/src/components/AttachmentPresenter.svelte b/plugins/chunter-resources/src/components/AttachmentPresenter.svelte index d7230651c3..ab4fc8df91 100644 --- a/plugins/chunter-resources/src/components/AttachmentPresenter.svelte +++ b/plugins/chunter-resources/src/components/AttachmentPresenter.svelte @@ -16,6 +16,8 @@ <script lang="ts"> import type { Attachment } from '@anticrm/chunter' + import { showPopup, closeTooltip } from '@anticrm/ui' + import { PDFViewer } from '@anticrm/presentation' export let value: Attachment @@ -25,7 +27,7 @@ : fname </script> -<div class="flex-row-center"> +<div class="flex-row-center" on:click={()=> { closeTooltip(); showPopup(PDFViewer, { file: value.file }, 'right') }}> <div class="flex-center icon">PDF</div> <div class="flex-col"> <div class="caption-color">{trimFilename(value.name)}</div>