2021-03-31 11:59:07 +02:00
|
|
|
<script>
|
|
|
|
|
import { slide } from "svelte/transition"
|
|
|
|
|
import Portal from "svelte-portal"
|
2021-04-19 15:40:51 +02:00
|
|
|
import ActionButton from "../ActionButton/ActionButton.svelte"
|
2021-04-22 15:14:55 +02:00
|
|
|
import Body from "../Typography/Body.svelte"
|
|
|
|
|
import Heading from "../Typography/Heading.svelte"
|
2021-03-31 11:59:07 +02:00
|
|
|
|
|
|
|
|
export let title
|
|
|
|
|
|
|
|
|
|
let visible = false
|
|
|
|
|
|
|
|
|
|
export function show() {
|
|
|
|
|
if (visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function hide() {
|
|
|
|
|
if (!visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleKey(e) {
|
|
|
|
|
if (visible && e.key === "Escape") {
|
|
|
|
|
hide()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<svelte:window on:keydown={handleKey} />
|
|
|
|
|
|
|
|
|
|
{#if visible}
|
|
|
|
|
<Portal>
|
|
|
|
|
<section class="drawer" transition:slide>
|
|
|
|
|
<header>
|
|
|
|
|
<div class="text">
|
2021-04-22 15:14:55 +02:00
|
|
|
<Heading xs>{title}</Heading>
|
2021-04-30 13:31:45 +02:00
|
|
|
<Body size="XXS"><slot name="description" /></Body>
|
2021-03-31 11:59:07 +02:00
|
|
|
</div>
|
2021-04-22 16:34:18 +02:00
|
|
|
<div class="buttons">
|
2021-03-31 11:59:07 +02:00
|
|
|
<slot name="buttons" />
|
2021-04-23 15:45:10 +02:00
|
|
|
<ActionButton quiet icon="Close" on:click={hide} />
|
2021-03-31 11:59:07 +02:00
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<slot name="body" />
|
|
|
|
|
</section>
|
|
|
|
|
</Portal>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.drawer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 260px;
|
|
|
|
|
width: calc(100% - 520px);
|
|
|
|
|
background: var(--background);
|
|
|
|
|
border: var(--border-light);
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: var(--border-light);
|
2021-04-22 16:34:18 +02:00
|
|
|
padding: var(--spectrum-alias-item-padding-s) 0;
|
2021-04-22 15:14:55 +02:00
|
|
|
}
|
|
|
|
|
header :global(*) + :global(*) {
|
2021-04-22 16:34:18 +02:00
|
|
|
margin: 0 var(--spectrum-alias-grid-baseline);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
display: flex;
|
2021-04-19 15:40:51 +02:00
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
2021-04-22 16:34:18 +02:00
|
|
|
margin-left: var(--spectrum-alias-item-padding-s);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
|
|
|
|
</style>
|
