Fix popups (#5086)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/ui/src/components/PopupInstance.svelte

@@ -83,7 +83,7 @@
       options.props.maxHeight = '100vh'
       if (!modalHTML.classList.contains('fullsize')) modalHTML.classList.add('fullsize')
     } else {
-      if (element !== 'float' || options?.props?.top === undefined || options?.props?.top === '') {
+      if (element !== 'movable' || options?.props?.top === undefined || options?.props?.top === '') {
         options = fitPopupElement(modalHTML, device, element, contentPanel, clientWidth, clientHeight)
       }
       if (modalHTML.classList.contains('fullsize')) modalHTML.classList.remove('fullsize')
@@ -180,9 +180,10 @@
     fitPopupInstance()
   }}
   on:mousedown={(e) => {
-    if (element === 'float') {
-      dragParams.x = e.offsetX
-      dragParams.y = e.offsetY
+    if (element === 'movable') {
+      const rect = e.currentTarget.getBoundingClientRect()
+      dragParams.x = e.clientX - rect.left
+      dragParams.y = e.clientY - rect.top
       drag = true
     }
   }}
@@ -190,9 +191,16 @@
     drag = false
   }}
   on:mousemove={(e) => {
-    if (element === 'float' && drag) {
-      options.props.top = `${e.clientY - dragParams.y}px`
-      options.props.left = `${e.clientX - dragParams.x}px`
+    if (element === 'movable' && drag) {
+      const newTop = e.clientY - dragParams.y
+      const newLeft = e.clientX - dragParams.x
+      if (newTop > 0) {
+        options.props.top = `${newTop}px`
+      }
+      if (newLeft > 0) {
+        options.props.left = `${newLeft}px`
+      }
+      options.props.right = ''
     }
   }}
 >
@@ -230,9 +238,16 @@
       drag = false
     }}
     on:mousemove={(e) => {
-      if (element === 'float' && drag) {
-        options.props.top = `${e.clientY - dragParams.y}px`
-        options.props.left = `${e.clientX - dragParams.x}px`
+      if (element === 'movable' && drag) {
+        const newTop = e.clientY - dragParams.y
+        const newLeft = e.clientX - dragParams.x
+        if (newTop > 0) {
+          options.props.top = `${newTop}px`
+        }
+        if (newLeft > 0) {
+          options.props.left = `${newLeft}px`
+        }
+        options.props.right = ''
       }
     }}
   />

packages/ui/src/popups.ts

@@ -228,14 +228,10 @@ export function fitPopupElement (
       newProps.maxHeight = fullHeight ? 'calc(100vh - 2rem)' : '75vh'
       show = true
     } else if (element === 'float') {
-      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%)'
-      }
+      newProps.top = 'calc(var(--status-bar-height) + 4px)'
+      newProps.bottom = '4px'
+      newProps.left = '60%'
+      newProps.right = '4px'
       show = true
     } else if (element === 'center') {
       if (clientWidth !== undefined && clientHeight !== undefined) {
@@ -345,6 +341,9 @@ export function fitPopupElement (
     } else if (element === 'status') {
       newProps.top = 'calc(var(--status-bar-height) + 7.5px)'
       newProps.right = '12px'
+    } else if (element === 'movable') {
+      newProps.top = 'calc(var(--status-bar-height) + 4px)'
+      newProps.right = '1rem'
     }
   } else {
     if (clientWidth !== undefined && clientHeight !== undefined) {

packages/ui/src/types.ts

@@ -200,43 +200,32 @@ export interface PopupPositionElement {
   kind?: 'submenu'
 }
 
-export type PopupPosAlignment =
-  | 'right'
-  | 'top'
-  | 'float'
-  | 'logo'
-  | 'logo-mini'
-  | 'logo-portrait'
-  | 'account'
-  | 'account-portrait'
-  | 'account-mobile'
-  | 'notify'
-  | 'notify-mobile'
-  | 'full'
-  | 'content'
-  | 'middle'
-  | 'help-center'
-  | 'centered'
-  | 'center'
-  | 'status'
+export const posAlignment = [
+  'right',
+  'top',
+  'float',
+  'logo',
+  'logo-mini',
+  'logo-portrait',
+  'account',
+  'account-portrait',
+  'account-mobile',
+  'notify',
+  'notify-mobile',
+  'full',
+  'content',
+  'middle',
+  'help-center',
+  'centered',
+  'center',
+  'status',
+  'movable'
+] as const
+
+export type PopupPosAlignment = (typeof posAlignment)[number]
 
 export function isPopupPosAlignment (x: any): x is PopupPosAlignment {
-  return (
-    typeof x === 'string' &&
-    (x === 'right' ||
-      x === 'top' ||
-      x === 'float' ||
-      x === 'logo' ||
-      x === 'logo-mini' ||
-      x === 'logo-portrait' ||
-      x === 'account' ||
-      x === 'full' ||
-      x === 'content' ||
-      x === 'middle' ||
-      x === 'help-center' ||
-      x === 'centered' ||
-      x === 'center')
-  )
+  return typeof x === 'string' && (posAlignment as typeof posAlignment).includes(x as PopupPosAlignment)
 }
 
 export type PopupAlignment = PopupPosAlignment | PopupPositionElement | null