62 lines
1.5 KiB
Svelte
62 lines
1.5 KiB
Svelte
|
<!--
|
||
|
|
Copyright: Ankitects Pty Ltd and contributors
|
||
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import IconButton from "../components/IconButton.svelte";
|
||
|
|
import { mdiClose } from "./icons";
|
||
|
|
|
||
|
|
export let type: "success" | "error" = "success";
|
||
|
|
export let message;
|
||
|
|
export let showToast = false;
|
||
|
|
const closeToast = () => {
|
||
|
|
showToast = false;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if showToast}
|
||
|
|
<div class="toast-container">
|
||
|
|
<div class="toast {type === 'success' ? 'success' : 'error'}">
|
||
|
|
{message}
|
||
|
|
<IconButton iconSize={96} on:click={closeToast} class="toast-icon">
|
||
|
|
{@html mdiClose}</IconButton
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.toast-container {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 3rem;
|
||
|
|
z-index: 100;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.toast {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 1rem;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||
|
|
width: 60%;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.success {
|
||
|
|
background: #66bb6a;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.error {
|
||
|
|
background: #ef5350;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
:global(.toast-icon) {
|
||
|
|
background: unset !important;
|
||
|
|
color: white !important;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
</style>
|