Update MentionList size and position. Added inline display. (#886)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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

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>

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

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

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>

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}

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>

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