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

TSK-1312: refit tooltip after loading components inside it (#3083)

Browse Source 
Signed-off-by: Vyacheslav Tumanov <me@slavatumanov.me>
This commit is contained in:
Vyacheslav Tumanov 2023-04-26 21:11:57 +05:00 committed by GitHub
parent da2a7ec9c6
commit 60702a48d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/ui/src/components/TooltipInstance.svelte
View File

@ -44,8 +44,8 @@
'' ''
} }
const fitTooltip = (): void => { const fitTooltip = (tooltipHTMLToCheck: HTMLElement): void => {
if (($tooltip.label || $tooltip.component) && tooltipHTML) { if (($tooltip.label || $tooltip.component) && tooltipHTML && tooltipHTMLToCheck) {
if ($tooltip.element) { if ($tooltip.element) {
rect = $tooltip.element.getBoundingClientRect() rect = $tooltip.element.getBoundingClientRect()
rectAnchor = $tooltip.anchor rectAnchor = $tooltip.anchor
@ -54,7 +54,7 @@
if ($tooltip.component) { if ($tooltip.component) {
clearStyles() clearStyles()
if (rect.bottom + tooltipHTML.clientHeight + 28 < docHeight) { if (rect.bottom + tooltipHTMLToCheck.clientHeight + 28 < docHeight) {
tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)` tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
dir = 'bottom' dir = 'bottom'
} else if (rect.top > docHeight - rect.bottom) { } else if (rect.top > docHeight - rect.bottom) {
@ -66,7 +66,7 @@
dir = 'top' dir = 'top'
} else { } else {
tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)` tooltipHTML.style.top = `calc(${rect.bottom}px + 5px + .25rem)`
if (tooltipHTML.clientHeight > docHeight - rect.bottom - 28) { if (tooltipHTMLToCheck.clientHeight > docHeight - rect.bottom - 28) {
tooltipHTML.style.bottom = '1rem' tooltipHTML.style.bottom = '1rem'
tooltipHTML.style.height = `calc(${docHeight - rect.bottom}px - 5px - 1.25rem)` tooltipHTML.style.height = `calc(${docHeight - rect.bottom}px - 5px - 1.25rem)`
} }
@ -89,7 +89,7 @@
if (!$tooltip.direction) { if (!$tooltip.direction) {
if (rectAnchor.right < docWidth / 5) dir = 'right' if (rectAnchor.right < docWidth / 5) dir = 'right'
else if (rectAnchor.left > docWidth - docWidth / 5) dir = 'left' else if (rectAnchor.left > docWidth - docWidth / 5) dir = 'left'
else if (rectAnchor.top < tooltipHTML.clientHeight) dir = 'bottom' else if (rectAnchor.top < tooltipHTMLToCheck.clientHeight) dir = 'bottom'
else dir = 'top' else dir = 'top'
} else dir = $tooltip.direction } else dir = $tooltip.direction
@ -165,7 +165,8 @@
} }
} }
afterUpdate(() => (kind === 'submenu' ? fitSubmenu() : fitTooltip())) $: fitTooltip(tooltipHTML)
afterUpdate(() => (kind === 'submenu' ? fitSubmenu() : fitTooltip(tooltipHTML)))
onDestroy(() => hideTooltip()) onDestroy(() => hideTooltip())
</script> </script>