From 0887196db436bddf1749214dbbd7bb08f55f9888 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 8 May 2019 07:52:12 -0700 Subject: [PATCH] feat: add snackbar alert with refresh button (#1193) * feat: add snackbar alert with refresh button fixes #77 * fixup * change refresh to reload --- src/build/template.html | 3 + src/routes/_components/snackbar/Snackbar.html | 137 ++++++++++++++++++ src/routes/_components/snackbar/snackbar.js | 22 +++ src/routes/_utils/asyncModules.js | 4 + src/routes/_utils/serviceWorkerClient.js | 4 +- src/scss/themes/_base.scss | 3 + src/scss/themes/_dark.scss | 2 + 7 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 src/routes/_components/snackbar/Snackbar.html create mode 100644 src/routes/_components/snackbar/snackbar.js diff --git a/src/build/template.html b/src/build/template.html index 764957f3..fd86e0de 100644 --- a/src/build/template.html +++ b/src/build/template.html @@ -45,6 +45,9 @@
+ +
+ diff --git a/src/routes/_components/snackbar/Snackbar.html b/src/routes/_components/snackbar/Snackbar.html new file mode 100644 index 00000000..65739227 --- /dev/null +++ b/src/routes/_components/snackbar/Snackbar.html @@ -0,0 +1,137 @@ +
+
+ + {text} + +
+ + +
+
+
+ + diff --git a/src/routes/_components/snackbar/snackbar.js b/src/routes/_components/snackbar/snackbar.js new file mode 100644 index 00000000..17d94434 --- /dev/null +++ b/src/routes/_components/snackbar/snackbar.js @@ -0,0 +1,22 @@ +import { importSnackbar } from '../../_utils/asyncModules' + +let snackbar + +const lazySnackbar = { + async announce (text, buttonText, buttonAction) { + if (!snackbar) { + let Snackbar = await importSnackbar() + if (!snackbar) { + snackbar = new Snackbar({ + target: document.querySelector('#theSnackbar') + }) + if (process.env.NODE_ENV !== 'production') { + window.snackbar = snackbar // for debugging + } + } + } + snackbar.announce(text, buttonText, buttonAction) + } +} + +export { lazySnackbar as snackbar } diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js index 2f1b7021..16d27d2e 100644 --- a/src/routes/_utils/asyncModules.js +++ b/src/routes/_utils/asyncModules.js @@ -47,3 +47,7 @@ export const importEmojiMart = () => import( export const importToast = () => import( /* webpackChunkName: 'Toast.html' */ '../_components/toast/Toast.html' ).then(getDefault) + +export const importSnackbar = () => import( + /* webpackChunkName: 'Snackbar.html' */ '../_components/snackbar/Snackbar.html' + ).then(getDefault) diff --git a/src/routes/_utils/serviceWorkerClient.js b/src/routes/_utils/serviceWorkerClient.js index 35949539..d846f083 100644 --- a/src/routes/_utils/serviceWorkerClient.js +++ b/src/routes/_utils/serviceWorkerClient.js @@ -1,11 +1,11 @@ -import { toast } from '../_components/toast/toast' +import { snackbar } from '../_components/snackbar/snackbar' function onUpdateFound (registration) { const newWorker = registration.installing newWorker.addEventListener('statechange', async () => { if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { - toast.say('App update available. Reload to update.') + snackbar.announce('App update available.', 'Reload', () => document.location.reload(true)) } }) } diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss index 86a081ec..03c8cc14 100644 --- a/src/scss/themes/_base.scss +++ b/src/scss/themes/_base.scss @@ -66,6 +66,9 @@ --toast-bg: #{$toast-bg}; --toast-border: #{$toast-border}; --toast-text: #{$secondary-text-color}; + --toast-button-hover: #{lighten($toast-bg, 5%)}; + --toast-button-active: #{lighten($toast-bg, 10%)}; + --toast-anchor-color: #{lighten($anchor-color, 20%)}; --mask-bg: #{$toast-bg}; --mask-svg-fill: #{$secondary-text-color}; diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss index ab6a07f5..1cb0e0ab 100644 --- a/src/scss/themes/_dark.scss +++ b/src/scss/themes/_dark.scss @@ -44,4 +44,6 @@ --tab-bg-active: #{lighten($main-bg-color, 15%)}; --tab-bg-hover: #{lighten($main-bg-color, 1%)}; --tab-bg-hover-non-selected: #{darken($main-bg-color, 1%)}; + + --toast-anchor-color: #{$anchor-color}; }