Fix issue with drawer positioning when nesting drawers with no target

This commit is contained in:
Andrew Kingston 2024-03-13 09:22:13 +00:00
parent 70821182fe
commit 1eafd5e843
1 changed files with 30 additions and 36 deletions

View File

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