wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-14 04:08:19 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

TSK-964: fit popup when component is loaded. Redo cases when popup doesn't fit due to small window sizes (#3022)

Browse Source 
Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
This commit is contained in:
Vyacheslav Tumanov 2023-04-19 23:18:45 +05:00 committed by GitHub
parent 938a630056
commit e7cd05c140
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/ui/src/components/calendar/DatePickerPopup.svelte
View File

@ -61,16 +61,24 @@
const rect = anchor.getBoundingClientRect()
const rectPopup = modalHTML.getBoundingClientRect()
let isMiddle = false
// Vertical
if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
modalHTML.style.top = `calc(${rect.bottom}px + 1px)`
} else if (rectPopup.height + 28 < rect.top) {
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + 1px)`
} else modalHTML.style.top = `calc(${rect.bottom}px + 1px)`
} else {
modalHTML.style.top = `calc(${rect.top}px - ${rectPopup.height / 2}px)`
isMiddle = true
}
// Horizontal
if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
} else if (rect.left - rectPopup.width < 0) {
modalHTML.style.left = rect.left + rectPopup.width + 28 + 'px'
} else if (rect.left - rectPopup.width < document.body.clientWidth && isMiddle) {
modalHTML.style.left = rect.left - rectPopup.width + 'px'
} else {
modalHTML.style.left = rect.left + 'px'
}
@ -84,6 +92,7 @@
}
}
afterUpdate(() => fitPopup())
$: component && fitPopup()
const unfocus = (ev: FocusEvent): void => {
const target = ev.relatedTarget as HTMLElement