From 317e705b39754f98287d751c0e1b84416b866a7f Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Sat, 28 Jan 2023 20:23:16 +0600
Subject: [PATCH] Gmail ui fixes (#2554)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 dev/prod/.env                                 |  2 +-
 .../ui/src/components/PopupInstance.svelte    |  1 -
 .../src/components/Chats.svelte               | 15 +++++++---
 .../src/components/FullMessage.svelte         |  6 ++--
 .../src/components/FullMessageContent.svelte  |  2 ++
 .../src/components/FullMessagePopup.svelte    | 28 +++++++++++++++++--
 .../src/components/NewMessage.svelte          |  6 ++--
 .../src/components/PluginCard.svelte          |  3 +-
 8 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/dev/prod/.env b/dev/prod/.env
index 9f9ee8bdf7..af9a193c98 100644
--- a/dev/prod/.env
+++ b/dev/prod/.env
@@ -2,7 +2,7 @@
 LOGIN_ENDPOINT=ws://localhost:3333
 
 TELEGRAM_URL=http://localhost:8086
-GMAIL_URL=http://localhost:8087
+GMAIL_URL=http://localhost:8088
 FRONT_URL=http://localhost:8080
 
 REKONI_URL=http://localhost:4004
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 382fba7b84..7a517789e9 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -171,7 +171,6 @@
     background-color: transparent;
     transform-origin: center;
     opacity: 0;
-    max-width: 95%;
 
     &.preShow {
       transform: scale(0.9);
diff --git a/plugins/gmail-resources/src/components/Chats.svelte b/plugins/gmail-resources/src/components/Chats.svelte
index a0d9e7f223..4fbc3ffab4 100644
--- a/plugins/gmail-resources/src/components/Chats.svelte
+++ b/plugins/gmail-resources/src/components/Chats.svelte
@@ -122,16 +122,22 @@
 </script>
 
 {#if enabled}
-  <div class="popupPanel-body__main-header bottom-divider">
+  <div class="popupPanel-body__main-header bottom-divider p-2">
     {#if selectable}
-      <div class="flex-between w-full">
+      <div class="flex-between">
         <span><b>{selected.size}</b> <Label label={gmail.string.MessagesSelected} /></span>
         <div class="flex">
           <div>
-            <Button label={gmail.string.Cancel} on:click={clear} />
+            <Button label={gmail.string.Cancel} size={'small'} on:click={clear} />
           </div>
           <div class="ml-3">
-            <Button label={gmail.string.PublishSelected} kind={'primary'} disabled={!selected.size} on:click={share} />
+            <Button
+              label={gmail.string.PublishSelected}
+              size={'small'}
+              kind={'primary'}
+              disabled={!selected.size}
+              on:click={share}
+            />
           </div>
         </div>
       </div>
@@ -139,6 +145,7 @@
       <div class="flex-between">
         <Button
           label={gmail.string.CreateMessage}
+          size={'small'}
           kind={'primary'}
           on:click={() => {
             newMessage = true
diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte
index e342e7b42c..f9bc4d992c 100644
--- a/plugins/gmail-resources/src/components/FullMessage.svelte
+++ b/plugins/gmail-resources/src/components/FullMessage.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <div class="popupPanel-body__main-header bottom-divider">
-  <div class="flex-between">
+  <div class="flex-between p-2">
     <div class="buttons-group">
       <Button
         icon={IconArrowLeft}
@@ -79,7 +79,7 @@
   </div>
 </div>
 <Scroller>
-  <div class="popupPanel-body__main-content py-4">
+  <div class="popupPanel-body__main-content py-4 h-full">
     <Label label={currentMessage.incoming ? gmail.string.To : gmail.string.From} />
     {user}
     {#if currentMessage.copy?.length}
@@ -94,7 +94,7 @@
         {/each}
       </div>
     {/if}
-    <div class="flex-col content clear-mins">
+    <div class="flex-col content clear-mins h-full">
       <FullMessageContent content={currentMessage.content} />
     </div>
   </div>
diff --git a/plugins/gmail-resources/src/components/FullMessageContent.svelte b/plugins/gmail-resources/src/components/FullMessageContent.svelte
index 1096016a21..3d5ac08a9a 100644
--- a/plugins/gmail-resources/src/components/FullMessageContent.svelte
+++ b/plugins/gmail-resources/src/components/FullMessageContent.svelte
@@ -21,6 +21,8 @@
 
 <style lang="scss">
   iframe {
+    max-width: calc(100vw - 4rem);
+    width: 700px;
     overflow: auto;
     height: 100%;
     font-family: var(--font-family);
diff --git a/plugins/gmail-resources/src/components/FullMessagePopup.svelte b/plugins/gmail-resources/src/components/FullMessagePopup.svelte
index 5181cedbf4..13e3250f54 100644
--- a/plugins/gmail-resources/src/components/FullMessagePopup.svelte
+++ b/plugins/gmail-resources/src/components/FullMessagePopup.svelte
@@ -14,18 +14,33 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import attachment, { Attachment } from '@hcengineering/attachment'
+  import { AttachmentPresenter } from '@hcengineering/attachment-resources'
   import { SharedMessage } from '@hcengineering/gmail'
+  import { createQuery } from '@hcengineering/presentation'
   import { Label } from '@hcengineering/ui'
   import gmail from '../plugin'
   import FullMessageContent from './FullMessageContent.svelte'
 
   export let message: SharedMessage
 
+  const query = createQuery()
+  let attachments: Attachment[] = []
+
+  $: message._id &&
+    query.query(
+      attachment.class.Attachment,
+      {
+        attachedTo: message._id
+      },
+      (res) => (attachments = res)
+    )
+
   $: title = message.incoming ? message.sender : message.receiver
   $: user = message.incoming ? message.receiver : message.sender
 </script>
 
-<div class="popup flex-col">
+<div class="popup h-full w-full flex-col">
   <div class="fs-title mb-4">
     {message.subject}
   </div>
@@ -40,6 +55,15 @@
   {#if message.copy?.length}
     <Label label={gmail.string.Copy} />: {message.copy.join(', ')}
   {/if}
+  {#if attachments.length}
+    <div class="flex-row-center list mt-2">
+      {#each attachments as attachment}
+        <div class="item flex">
+          <AttachmentPresenter value={attachment} />
+        </div>
+      {/each}
+    </div>
+  {/if}
   <div class="flex-col h-full clear-mins mt-5">
     <FullMessageContent content={message.content} />
   </div>
@@ -48,7 +72,7 @@
 <style lang="scss">
   .popup {
     padding: 1rem;
-    max-height: 500px;
+    max-height: calc(100vh - 4rem);
     background-color: var(--theme-button-bg-focused);
     border: 1px solid var(--theme-button-border-enabled);
     border-radius: 0.75rem;
diff --git a/plugins/gmail-resources/src/components/NewMessage.svelte b/plugins/gmail-resources/src/components/NewMessage.svelte
index 07a46c8037..b8de2d5ad2 100644
--- a/plugins/gmail-resources/src/components/NewMessage.svelte
+++ b/plugins/gmail-resources/src/components/NewMessage.svelte
@@ -146,7 +146,7 @@
   style="display: none"
   on:change={fileSelected}
 />
-<div class="popupPanel-body__main-header bottom-divider">
+<div class="popupPanel-body__main-header bottom-divider p-2">
   <div class="flex-between">
     <div class="buttons-group">
       <Button
@@ -169,13 +169,13 @@
           inputFile.click()
         }}
       />
-      <Button label={plugin.string.Send} kind={'primary'} on:click={sendMsg} />
+      <Button label={plugin.string.Send} size={'small'} kind={'primary'} on:click={sendMsg} />
     </div>
   </div>
 </div>
 <Scroller>
   <div
-    class="popupPanel-body__main-content py-4"
+    class="popupPanel-body__main-content py-4 h-full"
     on:dragover|preventDefault={() => {}}
     on:dragleave={() => {}}
     on:drop|preventDefault|stopPropagation={fileDrop}
diff --git a/plugins/setting-resources/src/components/PluginCard.svelte b/plugins/setting-resources/src/components/PluginCard.svelte
index aa95ab91a7..c6bce9579b 100644
--- a/plugins/setting-resources/src/components/PluginCard.svelte
+++ b/plugins/setting-resources/src/components/PluginCard.svelte
@@ -51,7 +51,8 @@
       })
       if (current === undefined) return
       await client.update(current, {
-        disabled: false
+        disabled: false,
+        value: res.value
       })
     }
   }