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

Break out notification component to standalone component

This commit is contained in:
Andrew Kingston 2021-07-30 13:58:34 +01:00
parent a831b7f91e
commit e711fffc45
3 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/bbui/src/Notification/Notification.svelte Normal file
View File

@ -0,0 +1,20 @@
<script>
export let type = "info"
export let icon = "Info"
export let message = ""
</script>
<div class="spectrum-Toast spectrum-Toast--{type}">
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<div class="spectrum-Toast-body">
<div class="spectrum-Toast-content">{message || ""}</div>
</div>
</div>

28
packages/bbui/src/Notification/NotificationDisplay.svelte
View File

@ -2,30 +2,16 @@
import "@spectrum-css/toast/dist/index-vars.css" import "@spectrum-css/toast/dist/index-vars.css"
import Portal from "svelte-portal" import Portal from "svelte-portal"
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
import { notifications } from "../Stores/notifications" import { notifications } from "../Stores/notifications"
import Notification from "./Notification.svelte"
import { fly } from "svelte/transition"
</script> </script>
<Portal target=".modal-container"> <Portal target=".modal-container">
<div class="notifications"> <div class="notifications">
{#each $notifications as { type, icon, message, id } (id)} {#each $notifications as { type, icon, message, id } (id)}
<div <div animate:flip transition:fly={{ y: -30 }}>
animate:flip <Notification {type} {icon} {message} />
transition:fly={{ y: -30 }}
class="spectrum-Toast spectrum-Toast--{type} notification-offset"
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<div class="spectrum-Toast-body">
<div class="spectrum-Toast-content">{message}</div>
</div>
</div> </div>
{/each} {/each}
</div> </div>
@ -34,7 +20,7 @@
<style> <style>
.notifications { .notifications {
position: fixed; position: fixed;
top: 10px; top: 20px;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
@ -45,8 +31,6 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
} gap: 10px;
.notification-offset {
margin-bottom: 10px;
} }
</style> </style>

1
packages/bbui/src/index.js
View File

@ -38,6 +38,7 @@ export { default as MenuItem } from "./Menu/Item.svelte"
export { default as Modal } from "./Modal/Modal.svelte" export { default as Modal } from "./Modal/Modal.svelte"
export { default as ModalContent } from "./Modal/ModalContent.svelte" export { default as ModalContent } from "./Modal/ModalContent.svelte"
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte" export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
export { default as Notification } from "./Notification/Notification.svelte"
export { default as SideNavigation } from "./SideNavigation/Navigation.svelte" export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
export { default as SideNavigationItem } from "./SideNavigation/Item.svelte" export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
export { default as DatePicker } from "./Form/DatePicker.svelte" export { default as DatePicker } from "./Form/DatePicker.svelte"