MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

before sidecar

This commit is contained in:
Gerard Burns 2024-04-05 07:33:14 +01:00
parent 43e60f1305
commit 1d08294c67
1 changed files with 3 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/bbui/src/Tooltip/Context.svelte
View File

@ -36,8 +36,6 @@
} }
const rect = anchor.getBoundingClientRect(); const rect = anchor.getBoundingClientRect();
const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y) const windowOffset = (window.innerHeight - offset) - (currentTooltip.clientHeight + rect.y)
@ -53,7 +51,6 @@
currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y currentY = windowOffset < 0 ? rect.y + windowOffset : rect.y
const fadeIn = [{ opacity: "0" }, { opacity: "1" }]; const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
const fadeOut = [{ opacity: "1" }, { opacity: "0" }]; const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
const color = [{ backgroundColor: previousStyles.backgroundColor }, { backgroundColor: currentStyles.backgroundColor }];
const fadeInTiming = { const fadeInTiming = {
duration: 200, duration: 200,
@ -69,15 +66,8 @@
fill: "forwards" fill: "forwards"
}; };
const colorTiming = {
duration: 300,
iterations: 1,
easing: "ease-in"
};
currentTooltip.animate(fadeIn, fadeInTiming); currentTooltip.animate(fadeIn, fadeInTiming);
previousTooltip.animate(fadeOut, fadeOutTiming); previousTooltip.animate(fadeOut, fadeOutTiming);
wrapper.animate(color, colorTiming);
// Bypass animations if the tooltip has only just been opened // Bypass animations if the tooltip has only just been opened
if (initialShow) { if (initialShow) {
@ -157,7 +147,9 @@
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
pointer-events: none; pointer-events: none;
background-color: var(--spectrum-global-color-gray-200); background-color: var(--background-alt);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.42);
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0; opacity: 0;