Telegram: latest messages below. Update AttachmentPreview layout. (#1768)

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import type { Attachment } from '@anticrm/attachment'
   import { getResource } from '@anticrm/platform'
-  import { showPopup, ActionIcon, IconMoreH, Menu, Icon } from '@anticrm/ui'
+  import { showPopup, ActionIcon, IconMoreH, Menu } from '@anticrm/ui'
   import { Action } from '@anticrm/view'
   import { getFileUrl } from '@anticrm/presentation'
 
@@ -55,19 +55,9 @@
   }
 </script>
 
-<div class="actions">
-  <a class="downloadButton" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation>
-    <Icon icon={FileDownload} size={'small'} />
+<div class="flex">
+  <a class="mr-1" href={getFileUrl(attachment.file)} download={attachment.name} on:click|stopPropagation>
+    <ActionIcon icon={FileDownload} size={'small'} action={() => {}} />
   </a>
   <ActionIcon icon={IconMoreH} size={'small'} action={showMenu} />
 </div>
-
-<style lang="scss">
-  .actions {
-    display: flex;
-  }
-
-  .downloadButton {
-    margin-right: 0.2rem;
-  }
-</style>

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

@@ -22,17 +22,11 @@
 </script>
 
 {#if attachments.length}
-  <div class="container">
+  <div class="flex-col">
     {#each attachments as attachment}
-      <div class="item">
+      <div class="step-tb75">
         <AttachmentPreview value={attachment} isSaved={savedAttachmentsIds?.includes(attachment._id) ?? false} />
       </div>
     {/each}
   </div>
 {/if}
-
-<style lang="scss">
-  .item {
-    padding: 0.5rem;
-  }
-</style>

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

@@ -28,8 +28,7 @@
   $: type = getType(value.type)
 </script>
 
-<div class="flex-row-center">
-  {#if type === 'image'}
+{#if type === 'image'}
   <div
     class="content flex-center buttonContainer cursor-pointer"
     on:click={() => {
@@ -38,18 +37,18 @@
     }}
   >
     <img src={getFileUrl(value.file)} alt={value.name} />
-      <div class="actions">
+    <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} />
     </div>
   </div>
-  {:else if type === 'audio'}
+{:else if type === 'audio'}
   <div class="buttonContainer">
     <AudioPlayer {value} />
-      <div class="actions">
+    <div class="actions conner" style:padding={'0.125rem 0.25rem'}>
       <AttachmentActions attachment={value} {isSaved} />
     </div>
   </div>
-  {:else if type === 'video'}
+{:else if type === 'video'}
   <div class="content buttonContainer flex-center">
     <video controls>
       <source src={getFileUrl(value.file)} type={value.type} />
@@ -58,33 +57,52 @@
         <AttachmentPresenter {value} />
       </div>
     </video>
-      <div class="actions">
+    <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} />
     </div>
   </div>
-  {:else}
-    <div class="flex container buttonContainer">
+{:else}
+  <div class="flex container buttonContainer extraWidth">
     <AttachmentPresenter {value} />
-      <div class="actions">
+    <div class="actions conner">
       <AttachmentActions attachment={value} {isSaved} />
     </div>
   </div>
-  {/if}
-</div>
+{/if}
 
 <style lang="scss">
   .container {
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-bg-accent-color);
-    border-radius: 0.75rem;
+    background-color: var(--board-card-bg-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: 0.5rem;
     padding: 0.5rem;
   }
 
   .buttonContainer {
-    align-items: flex-start;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+
+    &.extraWidth {
+      padding-right: 2.5rem;
+    }
+
     .actions {
-      margin-left: 0.5rem;
       visibility: hidden;
+      position: absolute;
+      top: 0.25rem;
+      right: 0.25rem;
+      padding: 0.25rem;
+      background-color: var(--button-bg-color);
+      border-radius: 0.75rem;
+      box-shadow: var(--board-card-shadow);
+
+      &.conner {
+        top: 0;
+        right: 0;
+        padding: 0.25rem;
+        border-radius: 0 0.4rem 0 0.25rem;
+      }
     }
   }
 

plugins/telegram-resources/src/components/Chat.svelte

@@ -74,7 +74,7 @@
       telegram.class.Message,
       { attachedTo: channelId },
       (res) => {
-        messages = res
+        messages = res.reverse()
         if (channel !== undefined) {
           notificationClient.updateLastView(channel._id, channel._class, undefined, true)
         }