From fb581e570beef961f67db5bd5fe6171db7a34893 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 11 Oct 2021 21:03:29 +0300
Subject: [PATCH] Change popup position on update content (#255)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/SpacesPopup.svelte         |  6 ++---
 .../src/components/UsersPopup.svelte          | 20 +++++++++-----
 .../ui/src/components/PopupInstance.svelte    | 26 +++++++------------
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/presentation/src/components/SpacesPopup.svelte b/packages/presentation/src/components/SpacesPopup.svelte
index d17eac8b22..3c2308cce7 100644
--- a/packages/presentation/src/components/SpacesPopup.svelte
+++ b/packages/presentation/src/components/SpacesPopup.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
 
   import { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -23,7 +23,6 @@
   import { createQuery } from '../utils'
 
   export let _class: Ref<Class<Space>>
-  export let maxHeight: number = 0
 
   let search: string = ''
   let objects: Space[] = []
@@ -31,9 +30,10 @@
   const dispatch = createEventDispatcher()
   const query = createQuery()
   $: query.query(_class, {}, result => { objects = result })
+  afterUpdate(() => { dispatch('update', Date.now()) })
 </script>
 
-<div class="popup" style="max-height: {(maxHeight) ? maxHeight + 'px' : 'max-content'}">
+<div class="popup">
   <div class="flex-col">
     <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
     <div class="label"><Label label={'SUGGESTED'} /></div>
diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte
index 2604250f39..3cae1ccfff 100644
--- a/packages/presentation/src/components/UsersPopup.svelte
+++ b/packages/presentation/src/components/UsersPopup.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { afterUpdate, createEventDispatcher } from 'svelte'
 
   import { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
   import UserInfo from './UserInfo.svelte'
@@ -26,7 +26,6 @@
   export let _class: Ref<Class<Person>>
   export let title: IntlString
   export let caption: IntlString
-  export let maxHeight: number = 0
 
   let search: string = ''
   let objects: Person[] = []
@@ -34,16 +33,17 @@
   const dispatch = createEventDispatcher()
   const query = createQuery()
   $: query.query(_class, { name: { $like: '%'+search+'%' } }, result => { objects = result })
+  afterUpdate(() => { dispatch('update', Date.now()) })
 </script>
 
-<div class="popup" style="max-height: {(maxHeight) ? maxHeight + 'px' : 'max-content'}">
+<div class="popup">
   <div class="header">
     <div class="title"><Label label={title} /></div>
     <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
     <div class="caption"><Label label={caption} /></div>
   </div>
-  <div class="flex-grow scroll">
-    <div class="flex-col h-full box">
+  <div class="scroll">
+    <div class="box">
       {#each objects as person}
         <button class="menu-item" on:click={() => { dispatch('close', person) }}>
           <UserInfo size={'medium'} value={person} />
@@ -58,6 +58,7 @@
     display: flex;
     flex-direction: column;
     padding: 1rem;
+    max-height: 100%;
     color: var(--theme-caption-color);
     background-color: var(--theme-button-bg-hovered);
     border: 1px solid var(--theme-button-border-enabled);
@@ -83,8 +84,13 @@
   }
 
   .scroll {
-    overflow-y: scroll;
-    .box { margin-right: 1px; }
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .box {
+      margin-right: 1px;
+      height: 100%;
+    }
   }
 
   .menu-item {
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index f5e9641ac8..1edcad713d 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -27,7 +27,6 @@
 
   let modalHTML: HTMLElement
   let modalOHTML: HTMLElement
-  let maxHeight: number = 0
 
   function close(result: any) {
     console.log('popup close result', result)
@@ -38,27 +37,20 @@
   const fitPopup = (): void => {
     if (modalHTML) {
       if (element) {
-        maxHeight = 0
         modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = ''
         if (typeof element !== 'string') {
           const rect = element.getBoundingClientRect()
           const rectPopup = modalHTML.getBoundingClientRect()
-          if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
+          // Vertical
+          if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight)
             modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-            maxHeight = document.body.clientHeight - rect.bottom - 28
-          } else if (rectPopup.height + 28 < rect.top) {
+          else if (rectPopup.height + 28 < rect.top)
             modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
-            maxHeight = rect.top - 28
-          } else {
-            modalHTML.style.top = modalHTML.style.bottom = '1rem'
-            maxHeight = document.body.clientHeight - 32
-          }
-          
-          if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
+          else modalHTML.style.top = modalHTML.style.bottom = '1rem'
+          // Horizontal
+          if (rect.left + rectPopup.width + 16 > document.body.clientWidth)
             modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
-          } else {
-            modalHTML.style.left = rect.left + 'px'
-          }
+          else modalHTML.style.left = rect.left + 'px'
         } else if (element === 'right') {
           modalHTML.style.top = '0'
           modalHTML.style.bottom = '0'
@@ -81,12 +73,12 @@
     }
   }
 
-  afterUpdate(() => { fitPopup() })
+  afterUpdate(() => fitPopup())
 </script>
 
 <svelte:window on:resize={fitPopup} />
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
-  <svelte:component this={is} {...props} {maxHeight} on:close={ (ev) => close(ev.detail) } />
+  <svelte:component this={is} {...props} on:update={fitPopup} on:close={ (ev) => close(ev.detail) } />
 </div>
 <div bind:this={modalOHTML} class="modal-overlay" style={`z-index: ${zIndex};`} on:click={() => close(undefined)} />