hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-23 05:53:09 +03:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fix Popup, click on UserBox anywhere (#204)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-21 13:21:41 +03:00 committed by GitHub
parent 598071d50d
commit a29118ac5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/presentation/src/components/UserBox.svelte
View File

@ -33,6 +33,7 @@
let selected: Person | undefined
let btn: HTMLElement
let container: HTMLElement
const client = getClient()
@ -50,19 +51,17 @@
})
</script>
<div class="flex-row-center">
<button
class="focused-button btn"
class:selected
bind:this={btn}
on:click|preventDefault={(ev) => {
showPopup(UsersPopup, { _class, title, caption }, ev.target, (result) => {
if (result) {
value = result._id
}
})
}}
>
<div class="flex-row-center container" bind:this={container}
on:click|preventDefault={() => {
btn.focus()
showPopup(UsersPopup, { _class, title, caption }, container, (result) => {
if (result) {
value = result._id
}
})
}}
>
<button class="focused-button btn" class:selected bind:this={btn}>
{#if selected}
<Avatar size={'medium'} />
{:else}
@ -79,6 +78,7 @@
</div>
<style lang="scss">
.container { cursor: pointer; }
.btn {
width: 2.25rem;
height: 2.25rem;

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

@ -39,16 +39,32 @@ $: {
if (element) {
if (typeof element !== 'string') {
const rect = element.getBoundingClientRect()
if (rect.top > document.body.clientHeight - rect.bottom) {
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
const rectPopup = modalHTML.getBoundingClientRect()
if (rect.bottom + rectPopup.height + 28 < document.body.clientHeight) {
modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
} else if (rect.top > document.body.clientHeight - rect.bottom) {
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .75rem)`
if (rectPopup.height > rect.top - 28) {
modalHTML.style.top = '1rem'
modalHTML.style.height = rect.top - 28 + 'px'
}
} else {
modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
if (rectPopup.height > document.body.clientHeight - rect.bottom - 28) {
modalHTML.style.bottom = '1rem'
modalHTML.style.height = document.body.clientHeight - rect.bottom - 28 + 'px'
}
}
if (rect.left > document.body.clientWidth - rect.right) {
modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
modalHTML.style.left = ''
modalHTML.style.right = '1rem'
} else {
modalHTML.style.left = rect.left + 'px'
modalHTML.style.right = ''
}
console.log('STYLE', modalHTML.style)
console.log('RECT', rect)
console.log('RECTpopup', rectPopup)
} else if (element === 'right') {
modalHTML.style.top = '0'
modalHTML.style.bottom = '0'