From b2f3479a248e8cf1215ccf2ab5ef1cacee6df267 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 31 Jan 2022 16:07:05 +0700
Subject: [PATCH] Update MentionList size and position. Added inline display.
 (#886)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/message/Nodes.svelte       |  3 +-
 .../src/components/MentionList.svelte         | 24 +++++++------
 packages/theme/styles/_layouts.scss           | 35 +++++++++++++++++++
 .../activity/TxBacklinkReference.svelte       |  8 +----
 .../activity/TxCommentCreate.svelte           |  2 +-
 .../components/OrganizationPresenter.svelte   |  6 ++--
 .../src/components/PersonPresenter.svelte     | 26 ++++----------
 .../src/components/ObjectPresenter.svelte     | 12 +------
 8 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/packages/presentation/src/components/message/Nodes.svelte b/packages/presentation/src/components/message/Nodes.svelte
index 1ca3e8bd7b..9084b5d5d3 100644
--- a/packages/presentation/src/components/message/Nodes.svelte
+++ b/packages/presentation/src/components/message/Nodes.svelte
@@ -31,7 +31,7 @@ export let nodes: NodeListOf<any>
       {:else if node.nodeName === 'STRONG'}
         <strong><svelte:self nodes={node.childNodes}/></strong>
       {:else if node.nodeName === 'P'}
-        <p><svelte:self nodes={node.childNodes}/></p>
+        <p class="p-inline"><svelte:self nodes={node.childNodes}/></p>
       {:else if node.nodeName === 'BLOCKQUOTE'}
         <blockquote><svelte:self nodes={node.childNodes}/></blockquote>
       {:else if node.nodeName === 'CODE'}
@@ -70,4 +70,3 @@ export let nodes: NodeListOf<any>
     {/if}
   {/each}
 {/if}
-
diff --git a/packages/text-editor/src/components/MentionList.svelte b/packages/text-editor/src/components/MentionList.svelte
index fa2b59265f..1257cad204 100644
--- a/packages/text-editor/src/components/MentionList.svelte
+++ b/packages/text-editor/src/components/MentionList.svelte
@@ -79,17 +79,21 @@
   export function done () {
   }
 
-  function updateStyle (popup: HTMLDivElement): void {
-    const x = clientRect().left
-    const height = popup.getBoundingClientRect().height
-    const y = clientRect().bottom
-    style = `left: ${x}px; bottom: calc(100vh - ${y}px + 1.75rem); max-height: calc(${y}px - 2.5rem);`
+  function updateStyle (): void {
+    const rect = clientRect()
+    const docW = document.body.clientWidth
+    let tempStyle = ''
+    if (rect.top < 292) // 20rem - 1.75rem
+      tempStyle = `top: calc(${rect.bottom}px + .75rem); max-heigth: calc(100vh - ${rect.bottom}px - 1.75rem); `
+    else tempStyle = `bottom: calc(100vh - ${rect.top}px + .75rem); max-heigth: calc(${rect.top}px - 1.75rem); `
+    if (docW - rect.left > 452) // 30rem - 1.75rem
+      tempStyle += `left: ${rect.left}px;`
+    else tempStyle += `right: calc(100vw - ${rect.right}px);`
+    style = tempStyle
   }
 
   let style = 'visibility: hidden'
-  $: if (popup) {
-    updateStyle(popup)
-  }
+  $: if (popup) updateStyle()
 
   async function updateItems (category: ObjectSearchCategory, query: string): Promise<void> {
     const f = await getResource(category.query)
@@ -101,7 +105,7 @@
   $: updateItems(category, query)
 </script>
 
-<svelte:window on:resize={() => updateStyle(popup)} />
+<svelte:window on:resize={() => updateStyle()} />
 <div
   class="overlay"
   on:click={() => {
@@ -167,7 +171,7 @@
     min-width: 20rem;
     max-width: 30rem;
     min-height: 0;
-    height: auto;
+    height: 20rem;
     z-index: 2000;
   }
 </style>
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 621e7dca5c..ae9bf8446a 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -90,6 +90,8 @@ table {
 p:first-child { margin-block-start: 0; } // First and last padding
 p:last-child { margin-block-end: 0; }
 
+.p-inline { line-height: 150%; }
+
 /* Flex */
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
@@ -99,6 +101,10 @@ p:last-child { margin-block-end: 0; }
   display: flex;
   flex-wrap: nowrap;
 }
+.flex-baseline {
+  display: inline-flex;
+  align-items: baseline;
+}
 .flex-center {
   display: flex;
   justify-content: center;
@@ -151,6 +157,35 @@ p:last-child { margin-block-end: 0; }
 }
 .justify-between { justify-content: space-between; }
 .justify-end { justify-content: flex-end; }
+.items-baseline { align-items: baseline; }
+
+.flex-presenter, .inline-presenter {
+  cursor: pointer;
+
+  .icon {
+    margin-right: .25rem;
+    color: var(--theme-content-dark-color);
+  }
+  .label {
+    font-weight: 500;
+    text-align: left;
+    color: var(--theme-content-accent-color);
+  }
+  &:hover .icon { color: var(--theme-caption-color); }
+  &:hover .label {
+    text-decoration: underline;
+    color: var(--theme-caption-color);
+  }
+}
+.flex-presenter {
+  display: flex;
+  align-items: center;
+}
+.inline-presenter {
+  display: inline-flex;
+  align-items: baseline;
+  .icon { transform: translateY(.2rem); }
+}
 
 .safari-gap-1 {
   & > * { margin-right: .25rem; }
diff --git a/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte b/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
index da2ac3c6b2..c5b5f52b52 100644
--- a/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
@@ -43,13 +43,7 @@
 
 {#if presenter}
   {className} in
-  <div class='presenter'>
+  <div class="ml-2">
     <svelte:component this={presenter.presenter} value={doc}/>
   </div>
 {/if}
-<style lang="scss">
-  .presenter { 
-    margin-left: 0.5rem;
-  }
-</style>
-
diff --git a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
index bbed102b48..91bde53e4c 100644
--- a/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
+++ b/plugins/chunter-resources/src/components/activity/TxCommentCreate.svelte
@@ -20,7 +20,7 @@
   import { ReferenceInput } from '@anticrm/text-editor'
   import { Button } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
-import { updateBacklinks } from '../../backlinks'
+  import { updateBacklinks } from '../../backlinks'
   import chunter from '../../plugin'
 
   export let tx: TxCreateDoc<Comment>
diff --git a/plugins/contact-resources/src/components/OrganizationPresenter.svelte b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
index 03b3250121..9c7df5d073 100644
--- a/plugins/contact-resources/src/components/OrganizationPresenter.svelte
+++ b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
@@ -20,6 +20,7 @@
   import { EditDoc } from '@anticrm/view-resources'
 
   export let value: Organization
+  export let inline: boolean = false
 
   async function onClick () {
     showPopup(EditDoc, { _id: value._id, _class: value._class }, 'full')
@@ -27,7 +28,8 @@
 </script>
 
 {#if value}
-  <div class="sm-tool-icon" on:click={onClick}>
-    <span class="icon small-size flex-center"><Company size={'small'} /></span>&nbsp;{value.name}
+  <div class="flex-presenter" class:inline-presenter={inline} on:click={onClick}>
+    <div class="icon"><Company size={'small'} /></div>
+    <span class="label">{value.name}</span>
   </div>
 {/if}
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index f7197dd39f..38f5db0cdc 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -20,6 +20,7 @@
   import { EditDoc } from '@anticrm/view-resources'
 
   export let value: Person
+  export let inline: boolean = false
 
   async function onClick () {
     showPopup(EditDoc, { _id: value._id, _class: value._class }, 'full')
@@ -27,25 +28,10 @@
 </script>
 
 {#if value}
-  <div class="flex-row-center user-container" on:click={onClick}>
-    <Avatar size={'x-small'} avatar={value.avatar} />
-    <div class="overflow-label user">{formatName(value.name)}</div>
+  <div class="flex-presenter" class:inline-presenter={inline} on:click={onClick}>
+    <div class="icon">
+      <Avatar size={'x-small'} avatar={value.avatar} />
+    </div>
+    <span class="label">{formatName(value.name)}</span>
   </div>
 {/if}
-
-<style lang="scss">
-  .user-container {
-    cursor: pointer;
-
-    .user {
-      margin-left: 0.5rem;
-      font-weight: 500;
-      text-align: left;
-      color: var(--theme-content-accent-color);
-    }
-    &:hover .user {
-      text-decoration: underline;
-      color: var(--theme-caption-color);
-    }
-  }
-</style>
diff --git a/plugins/view-resources/src/components/ObjectPresenter.svelte b/plugins/view-resources/src/components/ObjectPresenter.svelte
index 91a0872d18..ec3dbcd8ee 100644
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@@ -38,15 +38,5 @@
 </script>
 
 {#if presenter}  
-  <div class='presenter'>
-    <svelte:component this={presenter.presenter} value={doc}/>
-  </div>
+  <svelte:component this={presenter.presenter} value={doc} inline />
 {/if}
-
-<style lang="scss">
-  .presenter {
-    display: inline-flex;
-    vertical-align: sub;
-  }
-</style>
-