UBER-295: Fix blur'y popups (#3278)

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

packages/ui/src/components/PopupInstance.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { deviceOptionsStore as deviceInfo } from '..'
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
   import { fitPopupElement } from '../popups'
   import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement } from '../types'
 
@@ -34,6 +34,9 @@
   let docSize: boolean = false
   let fullSize: boolean = false
 
+  let clientWidth = -1
+  let clientHeight = -1
+
   let options: PopupOptions = {
     props: {
       top: '',
@@ -74,11 +77,11 @@
     contentPanel: HTMLElement | undefined
   ): void => {
     if ((fullSize || docSize) && (element === 'float' || element === 'centered')) {
-      options = fitPopupElement(modalHTML, 'full', contentPanel)
+      options = fitPopupElement(modalHTML, 'full', contentPanel, clientWidth, clientHeight)
       options.props.maxHeight = '100vh'
       if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
     } else {
-      options = fitPopupElement(modalHTML, element, contentPanel)
+      options = fitPopupElement(modalHTML, element, contentPanel, clientWidth, clientHeight)
       if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
     }
     options.fullSize = fullSize
@@ -107,6 +110,8 @@
   let oldModalHTML: HTMLElement | undefined = undefined
 
   $: if (modalHTML !== undefined && oldModalHTML !== modalHTML) {
+    clientWidth = -1
+    clientHeight = -1
     oldModalHTML = modalHTML
     fitPopup(modalHTML, element, contentPanel)
     showing = true
@@ -152,6 +157,11 @@
   style:min-width={options.props.minWidth}
   style:min-height={options.props.minHeight}
   style:transform={options.props.transform}
+  use:resizeObserver={(element) => {
+    clientWidth = element.clientWidth
+    clientHeight = element.clientHeight
+    fitPopupInstance()
+  }}
 >
   <svelte:component
     this={is}

packages/ui/src/popups.ts

@@ -183,7 +183,9 @@ export function fitPopupPositionedElement (
 export function fitPopupElement (
   modalHTML: HTMLElement,
   element?: PopupAlignment,
-  contentPanel?: HTMLElement
+  contentPanel?: HTMLElement,
+  clientWidth?: number,
+  clientHeight?: number
 ): PopupOptions {
   let show = true
   const newProps: Record<string, string | number> = {}
@@ -205,9 +207,13 @@ export function fitPopupElement (
       show = true
     } else if (element === 'top') {
       newProps.top = '15vh'
-      newProps.left = '50%'
       newProps.maxHeight = '75vh'
+      if (clientWidth !== undefined && clientHeight !== undefined) {
+        newProps.left = `calc(50% - ${clientWidth / 2}px`
+      } else {
+        newProps.left = '50%'
         newProps.transform = 'translateX(-50%)'
+      }
       show = true
     } else if (element === 'float') {
       newProps.top = 'calc(var(--status-bar-height) + 4px)'
@@ -216,9 +222,14 @@ export function fitPopupElement (
       newProps.right = '4px'
       show = true
     } else if (element === 'center') {
+      if (clientWidth !== undefined && clientHeight !== undefined) {
+        newProps.top = `calc(50% - ${clientHeight / 2}px`
+        newProps.left = `calc(50% - ${clientWidth / 2}px`
+      } else {
         newProps.top = '50%'
         newProps.left = '50%'
         newProps.transform = 'translate(-50%, -50%)'
+      }
       show = true
     } else if (element === 'centered') {
       newProps.top = newProps.bottom = '15%'
@@ -285,18 +296,28 @@ export function fitPopupElement (
         newProps.top = '15%'
       }
       newProps.bottom = '12px'
+
+      if (clientWidth !== undefined && clientHeight !== undefined) {
+        newProps.left = `calc(50% - ${clientWidth / 2}px`
+      } else {
         newProps.left = '50%'
         newProps.transform = 'translateX(-50%)'
+      }
     } else if (element === 'help-center') {
       newProps.top = 'calc(var(--status-bar-height) + 12px)'
       newProps.bottom = '12px'
       newProps.right = '12px'
       show = true
     }
+  } else {
+    if (clientWidth !== undefined && clientHeight !== undefined) {
+      newProps.top = `calc(50% - ${clientHeight / 2}px`
+      newProps.left = `calc(50% - ${clientWidth / 2}px`
     } else {
       newProps.top = '50%'
       newProps.left = '50%'
       newProps.transform = 'translate(-50%, -50%)'
+    }
     show = true
   }
   // applyStyle(newProps, modalHTML)