wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-06-01 21:31:04 +00:00
Code Issues Actions 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 selected: Person | undefined
let btn: HTMLElement let btn: HTMLElement
let container: HTMLElement
const client = getClient() const client = getClient()
@ -50,19 +51,17 @@
}) })
</script> </script>
<div class="flex-row-center"> <div class="flex-row-center container" bind:this={container}
<button on:click|preventDefault={() => {
class="focused-button btn" btn.focus()
class:selected showPopup(UsersPopup, { _class, title, caption }, container, (result) => {
bind:this={btn} if (result) {
on:click|preventDefault={(ev) => { value = result._id
showPopup(UsersPopup, { _class, title, caption }, ev.target, (result) => { }
if (result) { })
value = result._id }}
} >
}) <button class="focused-button btn" class:selected bind:this={btn}>
}}
>
{#if selected} {#if selected}
<Avatar size={'medium'} /> <Avatar size={'medium'} />
{:else} {:else}
@ -79,6 +78,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.container { cursor: pointer; }
.btn { .btn {
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;

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

@ -39,16 +39,32 @@ $: {
if (element) { if (element) {
if (typeof element !== 'string') { if (typeof element !== 'string') {
const rect = element.getBoundingClientRect() const rect = element.getBoundingClientRect()
if (rect.top > document.body.clientHeight - rect.bottom) { const rectPopup = modalHTML.getBoundingClientRect()
modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)` 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 { } else {
modalHTML.style.top = `calc(${rect.bottom}px + .75rem)` 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) { if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
modalHTML.style.right = document.body.clientWidth - rect.right + 'px' modalHTML.style.left = ''
modalHTML.style.right = '1rem'
} else { } else {
modalHTML.style.left = rect.left + 'px' 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') { } else if (element === 'right') {
modalHTML.style.top = '0' modalHTML.style.top = '0'
modalHTML.style.bottom = '0' modalHTML.style.bottom = '0'