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

Update drawer transitions and styles as they were broken with svelte 4 update

This commit is contained in:
Andrew Kingston 2024-03-01 10:28:53 +00:00
parent 245670f585
commit c138cbeba2
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -61,7 +61,6 @@
import Button from "../Button/Button.svelte" import Button from "../Button/Button.svelte"
import { setContext, createEventDispatcher, onDestroy } from "svelte" import { setContext, createEventDispatcher, onDestroy } from "svelte"
import { generate } from "shortid" import { generate } from "shortid"
import { fade } from "svelte/transition"
export let title export let title
export let forceModal = false export let forceModal = false
@ -130,7 +129,7 @@
// Use a custom svelte transition here because the built-in slide // Use a custom svelte transition here because the built-in slide
// transition has a horrible overshoot // transition has a horrible overshoot
const slide = () => { const drawerSlide = () => {
return { return {
duration: 260, duration: 260,
css: t => { css: t => {
@ -138,12 +137,23 @@
const yOffset = (1 - f) * 200 const yOffset = (1 - f) * 200
return ` return `
transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor)))); transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
opacity:${f}; opacity: ${f};
` `
}, },
} }
} }
// Custom fade transition because the default svelte one doesn't work any more
// with svelte 4
const drawerFade = () => {
return {
duration: 260,
css: t => {
return `opacity: ${easeInOutQuad(t)};`
},
}
}
const getScaleFactor = depth => { const getScaleFactor = depth => {
// Quadratic function approaching a limit of 1 as depth tends to infinity // Quadratic function approaching a limit of 1 as depth tends to infinity
const lim = 1 - 1 / (depth * depth + 1) const lim = 1 - 1 / (depth * depth + 1)
@ -161,14 +171,16 @@
{#if visible} {#if visible}
<Portal target=".modal-container"> <Portal target=".modal-container">
<div class="drawer-container"> <div class="drawer-container">
{#if $modal} <div
<div transition:fade={{ duration: 260 }} class="underlay" /> class="underlay"
{/if} class:hidden={!$modal}
transition:drawerFade|local
/>
<div <div
class="drawer" class="drawer"
class:stacked={depth > 0} class:stacked={depth > 0}
class:modal={$modal} class:modal={$modal}
transition:slide|local transition:drawerSlide|local
{style} {style}
> >
<header> <header>
@ -179,9 +191,7 @@
</div> </div>
</header> </header>
<slot name="body" /> <slot name="body" />
{#if !$modal && depth > 0} <div class="overlay" class:hidden={$modal || depth === 0} />
<div class="overlay" transition:fade|local={{ duration: 260 }} />
{/if}
</div> </div>
</div> </div>
</Portal> </Portal>
@ -223,17 +233,23 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: opacity 360ms ease-out;
z-index: 999; z-index: 999;
opacity: 0.5; display: block;
transition: opacity 260ms ease-out;
} }
.overlay { .overlay {
position: absolute; position: absolute;
background: var(--background); background: var(--background);
opacity: 0.5;
} }
.underlay { .underlay {
position: fixed; position: fixed;
background: var(--modal-background, rgba(0, 0, 0, 0.75)); background: rgba(0, 0, 0, 0.5);
}
.underlay.hidden,
.overlay.hidden {
opacity: 0 !important;
pointer-events: none;
} }
header { header {