add toast

src/const/color.ts

@@ -1,2 +1,5 @@
-export const VERY_DARK_GRAYISH_BLUE = 'hsla(220, 20%, 30%, 1)'
 export const GRAYISH_BLUE_ALPHA80 = 'hsla(220, 20%, 80%, 0.8)'
+export const LIGHT_GRAYISH_LIME_GREEN = '#DFF2DC'
+export const MOSTLY_BLACK = '#282828'
+export const VERY_DARK_GRAYISH_BLUE = 'hsla(220, 20%, 30%, 1)'
+export const VERY_SOFT_RED = '#DFB0B0'

src/const/event.ts

@@ -1,3 +1,13 @@
 export const INIT_CANVAS_CONTROLS = 'init-canvas-controls'
 export const LIST_MODAL_OPEN = 'list-modal-open'
 export const TOAST = 'toast'
+
+export type MessageVariant = 'success' | 'danger'
+
+
+export type ToastMessage = {
+  message: string,
+  variant: MessageVariant,
+}
+
+export type ToastEvent = CustomEvent<ToastMessage>

src/main.ts

@@ -414,17 +414,10 @@ export class MainFooterControls {
   @on.click.at('.save-btn')
   @pub('save')
   save() {
-    this.toast()
-  }
-
-  @pub(Event.TOAST)
-  toast() {
-    return { message: 'toast' }
   }
 
   @on.click.at('.list-btn')
-  //@pub(Event.LIST_MODAL_OPEN)
+  @pub(Event.LIST_MODAL_OPEN)
   list() {
-    this.toast()
   }
 }

src/toast.ts

@@ -1,5 +1,6 @@
 import { component, is, on, prep, sub } from 'capsid'
 import { css } from 'emotion'
+import { LIGHT_GRAYISH_LIME_GREEN, MOSTLY_BLACK, VERY_SOFT_RED } from './const/color'
 import * as Event from './const/event'
 import { defer } from './util/async'
 
@@ -9,10 +10,15 @@ export class ToastProvider {
   el?: HTMLElement
 
   @on(Event.TOAST)
-  onToast(e: CustomEvent) {
+  onToast(e: Event.ToastEvent) {
     const toast = document.createElement('div')
     toast.classList.add('toast')
     toast.textContent = e.detail.message
+    if (e.detail.variant === 'success') {
+      toast.classList.add('is-success')
+    } else if (e.detail.variant === 'danger') {
+      toast.classList.add('is-danger')
+    }
     this.el!.appendChild(toast)
     prep('toast', this.el)
   }
@@ -31,13 +37,20 @@ export class ToastProvider {
   transition-property: opacity;
   transition-duration: 500ms;
   text-align: center;
-  background-color: gray;
-  color: white;
+  background-color: ${MOSTLY_BLACK};
   padding: 8px;
 
   &.show {
     opacity: 0.9;
   }
+
+  &.is-success {
+    background-color: ${LIGHT_GRAYISH_LIME_GREEN};
+  }
+
+  &.is-danger {
+    background-color: ${VERY_SOFT_RED}
+  }
 `)
 export class Toast {
   el?: HTMLElement