From c6b757d67ca68a3d2b48f2f4c478f41b76c19db8 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 18 May 2022 07:05:29 +0300
Subject: [PATCH] Telegram: latest messages below. Update AttachmentPreview
 layout. (#1768)

---
 .../src/components/AttachmentActions.svelte   |  18 +--
 .../src/components/AttachmentList.svelte      |  10 +-
 .../src/components/AttachmentPreview.svelte   | 104 ++++++++++--------
 .../src/components/Chat.svelte                |   2 +-
 4 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/plugins/attachment-resources/src/components/AttachmentActions.svelte b/plugins/attachment-resources/src/components/AttachmentActions.svelte
index f5ab9ae83dd..e61acd98289 100644
--- a/plugins/attachment-resources/src/components/AttachmentActions.svelte
+++ b/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>
diff --git a/plugins/attachment-resources/src/components/AttachmentList.svelte b/plugins/attachment-resources/src/components/AttachmentList.svelte
index ab6ffbd6a34..1d1d4ad9b2a 100644
--- a/plugins/attachment-resources/src/components/AttachmentList.svelte
+++ b/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>
diff --git a/plugins/attachment-resources/src/components/AttachmentPreview.svelte b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
index 57a9ac26556..b08b11172b4 100644
--- a/plugins/attachment-resources/src/components/AttachmentPreview.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPreview.svelte
@@ -28,63 +28,81 @@
   $: type = getType(value.type)
 </script>
 
-<div class="flex-row-center">
-  {#if type === 'image'}
-    <div
-      class="content flex-center buttonContainer cursor-pointer"
-      on:click={() => {
-        closeTooltip()
-        showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
-      }}
-    >
-      <img src={getFileUrl(value.file)} alt={value.name} />
-      <div class="actions">
-        <AttachmentActions attachment={value} {isSaved} />
-      </div>
+{#if type === 'image'}
+  <div
+    class="content flex-center buttonContainer cursor-pointer"
+    on:click={() => {
+      closeTooltip()
+      showPopup(PDFViewer, { file: value.file, name: value.name, contentType: value.type }, 'right')
+    }}
+  >
+    <img src={getFileUrl(value.file)} alt={value.name} />
+    <div class="actions conner">
+      <AttachmentActions attachment={value} {isSaved} />
     </div>
-  {:else if type === 'audio'}
-    <div class="buttonContainer">
-      <AudioPlayer {value} />
-      <div class="actions">
-        <AttachmentActions attachment={value} {isSaved} />
-      </div>
+  </div>
+{:else if type === 'audio'}
+  <div class="buttonContainer">
+    <AudioPlayer {value} />
+    <div class="actions conner" style:padding={'0.125rem 0.25rem'}>
+      <AttachmentActions attachment={value} {isSaved} />
     </div>
-  {:else if type === 'video'}
-    <div class="content buttonContainer flex-center">
-      <video controls>
-        <source src={getFileUrl(value.file)} type={value.type} />
-        <track kind="captions" label={value.name} />
-        <div class="container">
-          <AttachmentPresenter {value} />
-        </div>
-      </video>
-      <div class="actions">
-        <AttachmentActions attachment={value} {isSaved} />
+  </div>
+{:else if type === 'video'}
+  <div class="content buttonContainer flex-center">
+    <video controls>
+      <source src={getFileUrl(value.file)} type={value.type} />
+      <track kind="captions" label={value.name} />
+      <div class="container">
+        <AttachmentPresenter {value} />
       </div>
+    </video>
+    <div class="actions conner">
+      <AttachmentActions attachment={value} {isSaved} />
     </div>
-  {:else}
-    <div class="flex container buttonContainer">
-      <AttachmentPresenter {value} />
-      <div class="actions">
-        <AttachmentActions attachment={value} {isSaved} />
-      </div>
+  </div>
+{:else}
+  <div class="flex container buttonContainer extraWidth">
+    <AttachmentPresenter {value} />
+    <div class="actions conner">
+      <AttachmentActions attachment={value} {isSaved} />
     </div>
-  {/if}
-</div>
+  </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;
+      }
     }
   }
 
diff --git a/plugins/telegram-resources/src/components/Chat.svelte b/plugins/telegram-resources/src/components/Chat.svelte
index e1ba21757cc..70e102722c6 100644
--- a/plugins/telegram-resources/src/components/Chat.svelte
+++ b/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)
         }