UBER-425: Tooltup/popup fixes (#3404)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/text-editor/src/components/ReferenceInput.svelte

@@ -344,12 +344,14 @@
             textEditor.clear()
           }
         }}
-        on:on:blur={() => {
+        on:blur={() => {
           focused = false
+          dispatch('blur', focused)
         }}
         on:focus={() => {
           focused = true
           updateFocus()
+          dispatch('focus', focused)
         }}
         extensions={[completionPlugin]}
         on:selection-update={updateFormattingState}

packages/ui/src/components/TooltipInstance.svelte

@@ -161,7 +161,9 @@
       const inPopup: boolean =
         ev.x >= rectP.left && ev.x <= rectP.right && ev.y >= rectP.top - dT && ev.y <= rectP.bottom + dB
 
-      if ((tooltipSW && !inTrigger) || !(inTrigger || inPopup)) hideTooltip()
+      if ($tooltip.kind !== 'popup') {
+        if ((tooltipSW && !inTrigger) || !(inTrigger || inPopup)) hideTooltip()
+      }
     }
   }
 
@@ -170,15 +172,27 @@
   onDestroy(() => hideTooltip())
 </script>
 
+{#if $tooltip.kind === 'popup'}
+  <div
+    class="modal-overlay antiOverlay"
+    on:click|stopPropagation|preventDefault={() => closeTooltip()}
+    on:keydown|stopPropagation|preventDefault={() => {}}
+  />
+{/if}
+
 <svelte:window
   bind:innerWidth={docWidth}
   bind:innerHeight={docHeight}
-  on:resize={hideTooltip}
+  on:resize={() => {
+    if ($tooltip.kind !== 'popup') {
+      hideTooltip()
+    }
+  }}
   on:mousemove={(ev) => {
     whileShow(ev)
   }}
   on:keydown={(evt) => {
-    if (($tooltip.component || $tooltip.label) && evt.key === 'Escape') {
+    if (($tooltip.component || $tooltip.label) && evt.key === 'Escape' && $tooltip.kind !== 'popup') {
       evt.preventDefault()
       evt.stopImmediatePropagation()
       hideTooltip()
@@ -211,6 +225,9 @@
       <svelte:component
         this={$tooltip.component}
         {...$tooltip.props}
+        on:tooltip={(evt) => {
+          $tooltip = { ...$tooltip, ...evt.detail }
+        }}
         on:update={onUpdate !== undefined ? onUpdate : async () => {}}
       />
     {/if}
@@ -430,4 +447,15 @@
       content: none;
     }
   }
+  .modal-overlay {
+    z-index: 10000;
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    pointer-events: all;
+    touch-action: none;
+  }
 </style>

packages/ui/src/tooltips.ts

@@ -64,7 +64,7 @@ export function showTooltip (
   props?: any,
   anchor?: HTMLElement,
   onUpdate?: (result: any) => void,
-  kind?: 'tooltip' | 'submenu'
+  kind?: 'tooltip' | 'submenu' | 'popup'
 ): void {
   storedValue = {
     label,
@@ -74,9 +74,19 @@ export function showTooltip (
     props,
     anchor,
     onUpdate,
-    kind: kind ?? 'tooltip'
+    kind: undefined
   }
-  tooltipstore.set(storedValue)
+  tooltipstore.update((old) => {
+    if (old.component === storedValue.component) {
+      if (old.kind !== undefined && storedValue.kind === undefined) {
+        storedValue.kind = old.kind
+      }
+      if (storedValue.kind === undefined) {
+        storedValue.kind = 'tooltip'
+      }
+    }
+    return storedValue
+  })
 }
 
 export function closeTooltip (): void {

packages/ui/src/types.ts

@@ -237,7 +237,7 @@ export interface LabelAndProps {
   props?: any
   anchor?: HTMLElement
   onUpdate?: (result: any) => void
-  kind?: 'tooltip' | 'submenu'
+  kind?: 'tooltip' | 'submenu' | 'popup'
 }
 
 export interface ListItem {

plugins/attachment-resources/src/components/AttachmentRefInput.svelte

@@ -286,6 +286,8 @@
       {labelSend}
       {showSend}
       {loading}
+      on:focus
+      on:blur
       on:message={onMessage}
       haveAttachment={attachments.size > 0}
       withoutTopBorder={attachments.size > 0}

plugins/chunter-resources/src/components/CommentInput.svelte

@@ -118,5 +118,7 @@
   {shouldSaveDraft}
   on:message={onMessage}
   on:update={onUpdate}
+  on:focus
+  on:blur
   bind:loading
 />

plugins/chunter-resources/src/components/CommentPopup.svelte

@@ -18,7 +18,7 @@
 
   import chunter, { Comment } from '@hcengineering/chunter'
   import { createQuery } from '@hcengineering/presentation'
-  import { Label, resizeObserver, Spinner } from '@hcengineering/ui'
+  import { Label, resizeObserver, Spinner, closeTooltip } from '@hcengineering/ui'
   import { DocNavLink, ObjectPresenter } from '@hcengineering/view-resources'
   import { createEventDispatcher } from 'svelte'
   import CommentInput from './CommentInput.svelte'
@@ -42,6 +42,11 @@
     { sort: { modifiedOn: SortingOrder.Ascending } }
   )
   const dispatch = createEventDispatcher()
+  let commentMode = false
+
+  $: if (commentMode) {
+    dispatch('tooltip', { kind: 'popup' })
+  }
 </script>
 
 <div class="container">
@@ -50,6 +55,14 @@
     use:resizeObserver={() => {
       dispatch('changeContent')
     }}
+    on:keydown={(evt) => {
+      console.log(evt)
+      if (commentMode) {
+        evt.preventDefault()
+        evt.stopImmediatePropagation()
+        closeTooltip()
+      }
+    }}
   >
     <div class="fs-title mr-2">
       <Label label={chunter.string.Comments} />
@@ -73,7 +86,12 @@
   </div>
   {#if withInput}
     <div class="max-w-120 input">
-      <CommentInput {object} />
+      <CommentInput
+        {object}
+        on:focus={(evt) => {
+          commentMode = true
+        }}
+      />
     </div>
   {/if}
 </div>