MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve notification styles

This commit is contained in:
Andrew Kingston 2020-10-02 21:06:37 +01:00
parent b8c5813d65
commit 501d4638a7
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/builder/src/components/common/Notification/NotificationDisplay.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { notificationStore } from "builderStore/store/notifications" import { notificationStore } from "builderStore/store/notifications"
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy } from "svelte"
import { fade } from "svelte/transition" import { fly } from "svelte/transition"
export let themes = { export let themes = {
danger: "#E26D69", danger: "#E26D69",
@ -24,36 +24,41 @@
} }
</script> </script>
<ul class="notifications"> <div class="notifications">
{#each $notificationStore.notifications as notification (notification.id)} {#each $notificationStore.notifications as notification (notification.id)}
<li <div
class="toast" class="toast"
style="background: {themes[notification.type]};" style="background: {themes[notification.type]};"
transition:fade> transition:fly={{ y: -30 }}>
<div class="content">{notification.message}</div> <div class="content">{notification.message}</div>
{#if notification.icon} {#if notification.icon}
<i class={notification.icon} /> <i class={notification.icon} />
{/if} {/if}
</li> </div>
{/each} {/each}
</ul> </div>
<style> <style>
.notifications { .notifications {
width: 40vw;
list-style: none;
position: fixed; position: fixed;
top: 0; top: 10px;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin: 0 auto;
margin-right: auto;
padding: 0; padding: 0;
z-index: 9999; z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
} }
.toast { .toast {
flex: 0 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
border-radius: var(--border-radius-s);
/* The toasts now support being auto sized, so this static width could be removed */
width: 40vw;
} }
.content { .content {