show attachments in popup

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

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"
   }
 }

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 { Table } from '@anticrm/view-resources'
-  import { PDFViewer } from '@anticrm/presentation'
+
+  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">
+<Table 
-  <tbody>
+_class={chunter.class.Attachment}
-    <!-- {#each Object.values(files) as file}
+config={['', 'file', 'type']}
-      <tr class="tr-body">
+options={ {} }
-        <td class="item flex-row-center" on:click={() => {
+search=""
-          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>

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>