From abc1664ef72e639a720b8c6bad743c62c63e5fba Mon Sep 17 00:00:00 2001 From: Mendel Konikov Date: Thu, 31 Jan 2019 09:59:58 -0500 Subject: [PATCH 1/4] WIP: Snackbar close --- client/coral-embed/src/SnackBar.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/client/coral-embed/src/SnackBar.js b/client/coral-embed/src/SnackBar.js index 67851ce4e..e71676f28 100644 --- a/client/coral-embed/src/SnackBar.js +++ b/client/coral-embed/src/SnackBar.js @@ -24,7 +24,16 @@ export default class Snackbar { constructor(customStyle = {}) { this.timeout = null; this.el = document.createElement('div'); - this.el.id = 'coral-notif'; + this.el.id = 'coral-notif-tat'; + + const closeButton = document.createElement('i'); + closeButton.className = 'material-icons'; + closeButton.textContent = 'close'; + closeButton.onclick = function() { + this.el.style.opacity = 0; + }; + this.el.appendChild(closeButton); + // message overrides contents. need to fix. // Apply custom styles to the snackbar. const style = Object.assign({}, DEFAULT_STYLE, customStyle); From 17a05059d92745814a2bb06e1f1c1074106c0ee6 Mon Sep 17 00:00:00 2001 From: Mendel Konikov Date: Fri, 8 Feb 2019 10:31:57 -0500 Subject: [PATCH 2/4] Add working close button and style --- client/coral-embed/src/SnackBar.js | 46 ++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/client/coral-embed/src/SnackBar.js b/client/coral-embed/src/SnackBar.js index e71676f28..c07872555 100644 --- a/client/coral-embed/src/SnackBar.js +++ b/client/coral-embed/src/SnackBar.js @@ -5,35 +5,48 @@ const DEFAULT_STYLE = { backgroundColor: '#323232', zIndex: 3, willChange: 'transform, opacity', - transition: 'transform .35s cubic-bezier(.55,0,.1,1), opacity .35s', pointerEvents: 'none', - padding: '12px 18px', + transition: 'transform .35s cubic-bezier(.55,0,.1,1), opacity .35s', + padding: '12px 18px 0', color: '#fff', - borderRadius: '3px 3px 0 0', - textAlign: 'center', + borderRadius: '4px', maxWidth: '400px', left: '50%', opacity: 0, transform: 'translate(-50%, 20px)', - bottom: 0, + bottom: '20px', boxSizing: 'border-box', fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif', + display: 'flex', +}; + +const CLOSE_STYLE = { + fontSize: '20px', + cursor: 'pointer', + marginLeft: '10px', + position: 'relative', + top: '-4px', }; export default class Snackbar { constructor(customStyle = {}) { this.timeout = null; this.el = document.createElement('div'); - this.el.id = 'coral-notif-tat'; + this.el.id = 'coral-notif'; - const closeButton = document.createElement('i'); - closeButton.className = 'material-icons'; - closeButton.textContent = 'close'; - closeButton.onclick = function() { - this.el.style.opacity = 0; - }; + const closeButton = document.createElement('div'); + closeButton.className = 'snackbar-close'; + for (let key in CLOSE_STYLE) { + closeButton.style[key] = CLOSE_STYLE[key]; + } + closeButton.textContent = '×'; + closeButton.onclick = () => this.clear(); + + this.snackbarText = document.createElement('div'); + this.snackbarText.className = 'snackbar-text'; + this.snackbarText.style.paddingBottom = '12px'; + this.el.appendChild(this.snackbarText); this.el.appendChild(closeButton); - // message overrides contents. need to fix. // Apply custom styles to the snackbar. const style = Object.assign({}, DEFAULT_STYLE, customStyle); @@ -44,6 +57,7 @@ export default class Snackbar { clear() { this.el.style.opacity = 0; + this.el.style.pointerEvents = 'none'; } alert(message) { @@ -51,7 +65,7 @@ export default class Snackbar { this.el.style.transform = 'translate(-50%, 20px)'; this.el.style.opacity = 0; this.el.className = `coral-notif-${type}`; - this.el.textContent = text; + this.snackbarText.textContent = text; if (this.timeout) { clearTimeout(this.timeout); @@ -60,10 +74,12 @@ export default class Snackbar { this.timeout = setTimeout(() => { this.el.style.transform = 'translate(-50%, 0)'; this.el.style.opacity = 1; + this.el.style.pointerEvents = 'auto'; this.timeout = setTimeout(() => { this.el.style.opacity = 0; - }, 7000); + this.el.style.pointerEvents = 'none'; + }, 15000); }, 0); } From 174a80c377c295e7dc8207604a0ece37a8ce6122 Mon Sep 17 00:00:00 2001 From: Mendel Konikov Date: Fri, 8 Feb 2019 10:34:40 -0500 Subject: [PATCH 3/4] Reorder style as previous --- client/coral-embed/src/SnackBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-embed/src/SnackBar.js b/client/coral-embed/src/SnackBar.js index c07872555..2799a01c5 100644 --- a/client/coral-embed/src/SnackBar.js +++ b/client/coral-embed/src/SnackBar.js @@ -5,8 +5,8 @@ const DEFAULT_STYLE = { backgroundColor: '#323232', zIndex: 3, willChange: 'transform, opacity', - pointerEvents: 'none', transition: 'transform .35s cubic-bezier(.55,0,.1,1), opacity .35s', + pointerEvents: 'none', padding: '12px 18px 0', color: '#fff', borderRadius: '4px', From c6ee54c2f55890b4aac0241c0b1499b06d89e9ba Mon Sep 17 00:00:00 2001 From: Mendel Konikov Date: Fri, 8 Feb 2019 10:46:32 -0500 Subject: [PATCH 4/4] Rename classes to match id --- client/coral-embed/src/SnackBar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/coral-embed/src/SnackBar.js b/client/coral-embed/src/SnackBar.js index 2799a01c5..ca9c813d4 100644 --- a/client/coral-embed/src/SnackBar.js +++ b/client/coral-embed/src/SnackBar.js @@ -35,7 +35,7 @@ export default class Snackbar { this.el.id = 'coral-notif'; const closeButton = document.createElement('div'); - closeButton.className = 'snackbar-close'; + closeButton.className = 'coral-notif-close'; for (let key in CLOSE_STYLE) { closeButton.style[key] = CLOSE_STYLE[key]; } @@ -43,7 +43,7 @@ export default class Snackbar { closeButton.onclick = () => this.clear(); this.snackbarText = document.createElement('div'); - this.snackbarText.className = 'snackbar-text'; + this.snackbarText.className = 'coral-notif-text'; this.snackbarText.style.paddingBottom = '12px'; this.el.appendChild(this.snackbarText); this.el.appendChild(closeButton);