From a29118ac5e5d0d8893fef7b280b8d1ac29ab4220 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 21 Sep 2021 13:21:41 +0300
Subject: [PATCH] Fix Popup, click on UserBox anywhere (#204)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/UserBox.svelte             | 26 +++++++++----------
 .../ui/src/components/PopupInstance.svelte    | 24 ++++++++++++++---
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/packages/presentation/src/components/UserBox.svelte b/packages/presentation/src/components/UserBox.svelte
index 3a30c7da22..0667edba78 100644
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@@ -33,6 +33,7 @@
 
   let selected: Person | undefined
   let btn: HTMLElement
+  let container: HTMLElement
 
   const client = getClient()
 
@@ -50,19 +51,17 @@
   })
 </script>
 
-<div class="flex-row-center">
-  <button
-    class="focused-button btn"
-    class:selected
-    bind:this={btn}
-    on:click|preventDefault={(ev) => {
-      showPopup(UsersPopup, { _class, title, caption }, ev.target, (result) => {
-        if (result) {
-          value = result._id
-        }
-      })
-    }}
-  >
+<div class="flex-row-center container" bind:this={container}
+  on:click|preventDefault={() => {
+    btn.focus()
+    showPopup(UsersPopup, { _class, title, caption }, container, (result) => {
+      if (result) {
+        value = result._id
+      }
+    })
+  }}
+>
+  <button class="focused-button btn" class:selected bind:this={btn}>
     {#if selected}
       <Avatar size={'medium'} />
     {:else}
@@ -79,6 +78,7 @@
 </div>
 
 <style lang="scss">
+  .container { cursor: pointer; }
   .btn {
     width: 2.25rem;
     height: 2.25rem;
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index db67da4a9c..d1ab6fd976 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -39,16 +39,32 @@ $: {
     if (element) {
       if (typeof element !== 'string') {
         const rect = element.getBoundingClientRect()
-        if (rect.top > document.body.clientHeight - rect.bottom) {
-          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
+        const rectPopup = modalHTML.getBoundingClientRect()
+        if (rect.bottom + rectPopup.height + 28 < document.body.clientHeight) {
+          modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
+        } else if (rect.top > document.body.clientHeight - rect.bottom) {
+          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
+          if (rectPopup.height > rect.top - 28) {
+            modalHTML.style.top = '1rem'
+            modalHTML.style.height = rect.top - 28 + 'px'
+          }
         } else {
           modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
+          if (rectPopup.height > document.body.clientHeight - rect.bottom - 28) {
+            modalHTML.style.bottom = '1rem'
+            modalHTML.style.height = document.body.clientHeight - rect.bottom - 28 + 'px'
+          }
         }
-        if (rect.left > document.body.clientWidth - rect.right) {
-          modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
+        if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
+          modalHTML.style.left = ''
+          modalHTML.style.right = '1rem'
         } else {
           modalHTML.style.left = rect.left + 'px'
+          modalHTML.style.right = ''
         }
+        console.log('STYLE', modalHTML.style)
+        console.log('RECT', rect)
+        console.log('RECTpopup', rectPopup)
       } else if (element === 'right') {
         modalHTML.style.top = '0'
         modalHTML.style.bottom = '0'