Position tooltip and edit box in same place. (#1770)

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

packages/ui/src/components/PanelInstance.svelte

@@ -24,7 +24,11 @@
 
   let modalHTML: HTMLElement
   let componentInstance: any
-  let show: boolean = false
+
+  let options: {
+    show: boolean
+    direction: string
+  } = { show: false, direction: 'bottom' }
 
   let component: AnySvelteComponent
 
@@ -58,7 +62,7 @@
 
   const fitPopup = (props: PanelProps, contentPanel: HTMLElement): void => {
     if (modalHTML) {
-      show = fitPopupElement(modalHTML, props.element, contentPanel)
+      options = fitPopupElement(modalHTML, props.element, contentPanel)
     }
   }
 
@@ -108,7 +112,13 @@
       </div>
     </div>
     {#if props.element !== 'content'}
-      <div class="modal-overlay" class:show on:click={() => escapeClose()} on:keydown={() => {}} on:keyup={() => {}} />
+      <div
+        class="modal-overlay"
+        class:show={options.show}
+        on:click={() => escapeClose()}
+        on:keydown={() => {}}
+        on:keyup={() => {}}
+      />
     {/if}
   {/if}
 {/if}

packages/ui/src/components/PopupInstance.svelte

@@ -29,9 +29,13 @@
 
   let modalHTML: HTMLElement
   let componentInstance: any
-  let show: boolean = false
   let height: number
 
+  let options: {
+    show: boolean
+    direction: string
+  } = { show: false, direction: 'bottom' }
+
   function _update (result: any): void {
     if (onUpdate !== undefined) onUpdate(result)
     fitPopup()
@@ -51,7 +55,7 @@
 
   const fitPopup = (): void => {
     if (modalHTML) {
-      show = fitPopupElement(modalHTML, element)
+      options = fitPopupElement(modalHTML, element)
     }
   }
 
@@ -71,13 +75,19 @@
     this={is}
     bind:this={componentInstance}
     {...props}
+    direction={options.direction}
     on:update={(ev) => {
       _update(ev.detail)
     }}
     on:close={(ev) => _close(ev.detail)}
   />
 </div>
-<div class="modal-overlay" class:antiOverlay={show} style={`z-index: ${zIndex};`} on:click={() => escapeClose()} />
+<div
+  class="modal-overlay"
+  class:antiOverlay={options.show}
+  style={`z-index: ${zIndex};`}
+  on:click={() => escapeClose()}
+/>
 
 <style lang="scss">
   .popup {

packages/ui/src/components/TooltipInstance.svelte

@@ -196,7 +196,7 @@
     background-color: var(--accent-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-aside-shadow);
     user-select: none;
     z-index: 10000;
 
@@ -285,7 +285,7 @@
     background-color: var(--accent-bg-color);
     border: 1px solid var(--divider-color);
     border-radius: 0.75rem;
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--popup-aside-shadow);
     user-select: none;
     z-index: 10000;
 

packages/ui/src/popups.ts

@@ -117,7 +117,8 @@ export function fitPopupPositionedElement (
   modalHTML: HTMLElement,
   alignment: PopupPositionElement,
   newProps: Record<string, string | number>
-): boolean {
+): { show: boolean, direction: string } {
+  let direction: string = ''
   const rect = alignment.getBoundingClientRect()
   const rectPopup = modalHTML.getBoundingClientRect()
   newProps.left = newProps.right = newProps.top = newProps.bottom = ''
@@ -135,24 +136,30 @@ export function fitPopupPositionedElement (
     } else if (alignment.position.h === 'left') {
       newProps.left = `calc(${rect.left - rectPopup.width}px - .125rem)`
     }
+    direction = alignment.position.v + '|' + alignment.position.h
   } else {
     // Vertical
     if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
       newProps.top = `${rect.bottom + 1}px`
+      direction = 'bottom'
     } else if (rectPopup.height + 28 < rect.top) {
       newProps.bottom = `${document.body.clientHeight - rect.top + 1}px`
+      direction = 'top'
     } else {
       newProps.top = modalHTML.style.bottom = '1rem'
+      direction = 'top'
     }
 
     // Horizontal
     if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
       newProps.right = `${document.body.clientWidth - rect.right}px`
+      direction += '|left'
     } else {
       newProps.left = `${rect.left}px`
+      direction += '|right'
     }
   }
-  return false
+  return { show: false, direction }
 }
 
 function applyStyle (values: Record<string, string | number>, modalHTML: HTMLElement): void {
@@ -171,7 +178,11 @@ function applyStyle (values: Record<string, string | number>, modalHTML: HTMLEle
  *
  * return boolean to show or not modal overlay.
  */
-export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignment, contentPanel?: HTMLElement): boolean {
+export function fitPopupElement (
+  modalHTML: HTMLElement,
+  element?: PopupAlignment,
+  contentPanel?: HTMLElement
+): { show: boolean, direction: string } {
   let show = true
   const newProps: Record<string, string | number> = {}
   if (element != null) {
@@ -238,7 +249,7 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
     show = true
   }
   applyStyle(newProps, modalHTML)
-  return show
+  return { show, direction: '' }
 }
 
 export function eventToHTMLElement (evt: MouseEvent): HTMLElement {