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

adds smooth removal of notifications using animate:flip

This commit is contained in:
Keviin Åberg Kultalahti 2021-01-22 13:05:52 +01:00
parent 0cab858780
commit 3f8d57eadb
2 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script> <script>
import { notificationStore } from "builderStore/store/notifications" import { notificationStore } from "builderStore/store/notifications"
import { flip } from 'svelte/animate';
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
export let themes = { export let themes = {
@ -26,6 +27,7 @@
<div class="notifications"> <div class="notifications">
{#each $notificationStore.notifications as notification (notification.id)} {#each $notificationStore.notifications as notification (notification.id)}
<div <div
animate:flip
class="toast" class="toast"
style="background: {themes[notification.type]};" style="background: {themes[notification.type]};"
transition:fly={{ y: -30 }}> transition:fly={{ y: -30 }}>

2
packages/client/src/components/NotificationDisplay.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { flip } from 'svelte/animate';
import { fly } from "svelte/transition" import { fly } from "svelte/transition"
import { getContext } from "svelte" import { getContext } from "svelte"
const notifications = getContext("notifications") const notifications = getContext("notifications")
@ -15,6 +16,7 @@
<div class="notifications"> <div class="notifications">
{#each $notifications as notification (notification.id)} {#each $notifications as notification (notification.id)}
<div <div
animate:flip
class="toast" class="toast"
style="background: {themes[notification.type]};" style="background: {themes[notification.type]};"
transition:fly={{ y: -30 }}> transition:fly={{ y: -30 }}>