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

Fix issue with click_outside and drawers

This commit is contained in:
Andrew Kingston 2024-03-13 13:01:44 +00:00
parent 95f71efdab
commit 5666a965e0
2 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/bbui/src/Actions/click_outside.js
View File

@ -33,8 +33,8 @@ const handleClick = event => {
} }
// Ignore clicks for drawers, unless the handler is registered from a drawer // Ignore clicks for drawers, unless the handler is registered from a drawer
const sourceInDrawer = handler.anchor.closest(".drawer-container") != null const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
const clickInDrawer = event.target.closest(".drawer-container") != null const clickInDrawer = event.target.closest(".drawer-wrapper") != null
if (clickInDrawer && !sourceInDrawer) { if (clickInDrawer && !sourceInDrawer) {
return return
} }

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

@ -172,37 +172,44 @@
{#if visible} {#if visible}
<Portal target=".modal-container"> <Portal target=".modal-container">
<div class="underlay" class:hidden={!$modal} transition:drawerFade|local /> <!-- This class is unstyled, but needed by click_outside -->
<div <div class="drawer-wrapper">
class="drawer" <div
class:stacked={depth > 0} class="underlay"
class:modal={$modal} class:hidden={!$modal}
transition:drawerSlide|local transition:drawerFade|local
{style} />
> <div
<header> class="drawer"
{#if $$slots.title} class:stacked={depth > 0}
<slot name="title" /> class:modal={$modal}
{:else} transition:drawerSlide|local
<div class="text">{title || "Bindings"}</div> {style}
{/if} >
<div class="buttons"> <header>
<Button secondary quiet on:click={hide}>Cancel</Button> {#if $$slots.title}
<slot name="buttons" /> <slot name="title" />
{#if $resizable} {:else}
<ActionButton <div class="text">{title || "Bindings"}</div>
size="M"
quiet
selected={$modal}
on:click={() => modal.set(!$modal)}
>
<Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
</ActionButton>
{/if} {/if}
</div> <div class="buttons">
</header> <Button secondary quiet on:click={hide}>Cancel</Button>
<slot name="body" /> <slot name="buttons" />
<div class="overlay" class:hidden={$modal || depth === 0} /> {#if $resizable}
<ActionButton
size="M"
quiet
selected={$modal}
on:click={() => modal.set(!$modal)}
>
<Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
</ActionButton>
{/if}
</div>
</header>
<slot name="body" />
<div class="overlay" class:hidden={$modal || depth === 0} />
</div>
</div> </div>
</Portal> </Portal>
{/if} {/if}