wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-27 10:49:44 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix popups (#5086)

Browse Source 
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov 2024-03-28 19:14:00 +05:00 committed by GitHub
parent 0e20c35194
commit 92d0b93692
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/ui/src/components/PopupInstance.svelte
View File

@ -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 = ''
}
}}
/>

15
packages/ui/src/popups.ts
View File

@ -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) {

59
packages/ui/src/types.ts
View File

@ -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