CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 05:50:57 +12:00
Code Issues Projects Releases Wiki Activity

Fix issue with click_outside and drawers

Browse source
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
const sourceInDrawer = handler.anchor.closest(".drawer-container") != null
const clickInDrawer = event.target.closest(".drawer-container") != null
const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
const clickInDrawer = event.target.closest(".drawer-wrapper") != null
if (clickInDrawer && !sourceInDrawer) {
return
}

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

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