Add scroll in Popups (#233)

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

packages/presentation/src/components/SpacesPopup.svelte

@@ -23,6 +23,7 @@
   import { createQuery } from '../utils'
 
   export let _class: Ref<Class<Space>>
+  export let maxHeight: number = 0
 
   let search: string = ''
   let objects: Space[] = []
@@ -32,16 +33,20 @@
   $: query.query(_class, {}, result => { objects = result })
 </script>
 
-<div class="popup">
+<div class="popup" style="max-height: {(maxHeight) ? maxHeight + 'px' : 'max-content'}">
   <div class="flex-col">
     <EditWithIcon icon={IconSearch} bind:value={search} placeholder={'Search...'} />
     <div class="label"><Label label={'SUGGESTED'} /></div>
   </div>
-  {#each objects as space}
-    <button class="menu-item" on:click={() => { dispatch('close', space) }}>
-      <SpaceInfo size={'large'} value={space} />
-    </button>
-  {/each}
+  <div class="flex-grow scroll">
+    <div class="flex-col h-full box">
+      {#each objects as space}
+        <button class="menu-item" on:click={() => { dispatch('close', space) }}>
+          <SpaceInfo size={'large'} value={space} />
+        </button>
+      {/each}
+    </div>
+  </div>
 </div>
 
 <style lang="scss">
@@ -65,6 +70,11 @@
     color: var(--theme-content-dark-color);
   }
 
+  .scroll {
+    overflow-y: scroll;
+    .box { margin-right: 1px; }
+  }
+
   .menu-item {
     justify-content: start;
     padding: .375rem;

packages/presentation/src/components/UsersPopup.svelte

@@ -26,6 +26,7 @@
   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[] = []
@@ -35,17 +36,21 @@
   $: query.query(_class, { name: { $like: '%'+search+'%' } }, result => { objects = result })
 </script>
 
-<div class="popup">
+<div class="popup" style="max-height: {(maxHeight) ? maxHeight + 'px' : 'max-content'}">
   <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>
-  {#each objects as person}
-    <button class="menu-item" on:click={() => { dispatch('close', person) }}>
-      <UserInfo size={'medium'} value={person} />
-    </button>
-  {/each}
+  <div class="flex-grow scroll">
+    <div class="flex-col h-full box">
+      {#each objects as person}
+        <button class="menu-item" on:click={() => { dispatch('close', person) }}>
+          <UserInfo size={'medium'} value={person} />
+        </button>
+      {/each}
+    </div>
+  </div>
 </div>
 
 <style lang="scss">
@@ -77,6 +82,11 @@
     }
   }
 
+  .scroll {
+    overflow-y: scroll;
+    .box { margin-right: 1px; }
+  }
+
   .menu-item {
     justify-content: start;
     padding: .375rem;

packages/ui/src/components/PopupInstance.svelte

@@ -26,6 +26,7 @@ export let zIndex: number
 
 let modalHTML: HTMLElement
 let modalOHTML: HTMLElement
+let maxHeight: number = 0
 
 function close(result: any) {
   console.log('popup close result', result)
@@ -36,23 +37,19 @@ function close(result: any) {
 $: {
   if (modalHTML) {
     if (element) {
+      maxHeight = 0
       if (typeof element !== 'string') {
         const rect = element.getBoundingClientRect()
         const rectPopup = modalHTML.getBoundingClientRect()
         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 (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'
-          }
+          maxHeight = rect.top - 28
         } 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'
-          }
+          maxHeight = document.body.clientHeight - rect.bottom - 28
         }
         if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
           modalHTML.style.left = ''
@@ -85,7 +82,7 @@ $: {
 </script>
 
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
-  <svelte:component this={is} {...props} on:close={ (ev) => close(ev.detail) } />
+  <svelte:component this={is} {...props} {maxHeight} on:close={ (ev) => close(ev.detail) } />
 </div>
 <div bind:this={modalOHTML} class="modal-overlay" style={`z-index: ${zIndex};`} on:click={() => close(undefined)} />