2021-03-31 11:59:07 +02:00
|
|
|
<script>
|
|
|
|
|
import Portal from "svelte-portal"
|
2021-07-14 15:21:11 +02:00
|
|
|
import Button from "../Button/Button.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
|
2021-09-16 13:15:32 +02:00
|
|
|
export let fillWidth
|
2022-04-27 18:50:01 +02:00
|
|
|
export let left = "334px"
|
|
|
|
|
export let width = "calc(100% - 616px)"
|
2022-02-21 14:41:57 +01:00
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
let visible = false
|
2022-02-21 14:41:57 +01:00
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
export function show() {
|
|
|
|
|
if (visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function hide() {
|
|
|
|
|
if (!visible) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
visible = false
|
|
|
|
|
}
|
2022-02-21 14:41:57 +01:00
|
|
|
|
|
|
|
|
const easeInOutQuad = x => {
|
|
|
|
|
return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Use a custom svelte transition here because the built-in slide
|
|
|
|
|
// transition has a horrible overshoot
|
|
|
|
|
const slide = () => {
|
|
|
|
|
return {
|
|
|
|
|
duration: 360,
|
|
|
|
|
css: t => {
|
|
|
|
|
const translation = 100 - Math.round(easeInOutQuad(t) * 100)
|
|
|
|
|
return `transform: translateY(${translation}%);`
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-03-31 11:59:07 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
{#if visible}
|
|
|
|
|
<Portal>
|
2022-04-27 18:50:01 +02:00
|
|
|
<section
|
|
|
|
|
class:fillWidth
|
|
|
|
|
class="drawer"
|
|
|
|
|
transition:slide|local
|
|
|
|
|
style={`width: ${width}; left: ${left};`}
|
|
|
|
|
>
|
2021-03-31 11:59:07 +02:00
|
|
|
<header>
|
|
|
|
|
<div class="text">
|
2021-04-30 13:38:06 +02:00
|
|
|
<Heading size="XS">{title}</Heading>
|
2021-07-14 15:21:11 +02:00
|
|
|
<Body size="S">
|
2021-05-04 10:55:14 +02:00
|
|
|
<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-07-14 15:21:11 +02:00
|
|
|
<Button secondary quiet on:click={hide}>Cancel</Button>
|
2021-03-31 11:59:07 +02:00
|
|
|
<slot name="buttons" />
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<slot name="body" />
|
|
|
|
|
</section>
|
|
|
|
|
</Portal>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
<style>
|
2022-02-14 15:57:06 +01:00
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
.drawer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: var(--background);
|
2021-07-14 15:21:11 +02:00
|
|
|
border-top: var(--border-light);
|
2021-03-31 11:59:07 +02:00
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
|
2021-09-16 13:15:32 +02:00
|
|
|
.fillWidth {
|
|
|
|
|
width: calc(100% - 260px) !important;
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-31 11:59:07 +02:00
|
|
|
header {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: var(--border-light);
|
2021-07-14 15:21:11 +02:00
|
|
|
padding: var(--spacing-l) var(--spacing-xl);
|
|
|
|
|
gap: var(--spacing-xl);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
display: flex;
|
2021-07-14 15:21:11 +02:00
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
gap: var(--spacing-xs);
|
2021-03-31 11:59:07 +02:00
|
|
|
}
|
2022-02-10 12:46:57 +01:00
|
|
|
|
|
|
|
|
.buttons {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-m);
|
|
|
|
|
}
|
2021-03-31 11:59:07 +02:00
|
|
|
</style>
|
