From c1153f19e6323bbc76145d3defe0bca6b2b6088e Mon Sep 17 00:00:00 2001 From: 0neGal Date: Tue, 8 Feb 2022 22:36:25 +0100 Subject: added toasts No functional toasts yet, just the code for them, I'll add the actual toasts later... --- src/app/index.html | 3 +++ src/app/main.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/toast.js | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 src/app/toast.js (limited to 'src/app') diff --git a/src/app/index.html b/src/app/index.html index b861736..8222416 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -7,12 +7,14 @@
+
+
@@ -116,6 +118,7 @@ + diff --git a/src/app/main.css b/src/app/main.css index 94ef767..14348bd 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -558,6 +558,60 @@ code { margin-bottom: calc(var(--spacing) / 2); } +#toasts { + position: fixed; + z-index: 100000; + right: calc(var(--padding) * 1.5); + bottom: calc(var(--padding) * 1.5); +} + +@keyframes bodyfadeaway { + 0% {opacity: 0.0; transform: scale(0.95)} + 100% {opacity: 1.0; transform: scale(1.0)} +} + +#toasts .toast { + width: 300px; + opacity: 0.0; + cursor: pointer; + overflow: hidden; + max-height: 100vh; + background: #FFFFFF; + transform: scale(0.95); + transition: 0.2s ease-in-out; + padding: calc(var(--padding) / 2); + margin-top: calc(var(--padding) / 2); + border-radius: calc(var(--padding) / 2.5); + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); + + animation-duration: 0.2s; + animation-iteration-count: 1; + animation-name: bodyfadeaway; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; +} + +#toasts .toast.hidden { + margin-top: 0px; + max-height: 0px; + padding-top: 0px; + padding-bottom: 0px; + filter: opacity(0.0); + transform: scale(0.95); +} + +#toasts .toast:not(.hidden):hover {filter: opacity(0.9)} +#toasts .toast:not(.hidden):active {filter: opacity(0.8)} + +.toast .title { +} + +.toast .description { + opacity: 0.8; + font-size: 0.8em; + font-weight: 400; +} + /* drag control */ #bgHolder, diff --git a/src/app/toast.js b/src/app/toast.js new file mode 100644 index 0000000..8d78e37 --- /dev/null +++ b/src/app/toast.js @@ -0,0 +1,58 @@ +function Toast(properties) { + let toast = { + fg: "#000000", + bg: "#FFFFFF", + timeout: 3000, + title: "Untitled Toast", + description: "No description provided for toast", + ...properties + } + + switch(toast.scheme) { + case "error": + toast.fg = "#FFFFFF"; + toast.bg = "var(--red)"; + break + case "success": + toast.fg = "#FFFFFF"; + toast.bg = "#60D394"; + break + case "warning": + toast.fg = "#FFFFFF"; + toast.bg = "#FF9B85"; + break + } + + + let id = Date.now(); + let el = document.createElement("div"); + + el.classList.add("toast"); + + el.style.color = toast.fg; + el.style.background = toast.bg; + + el.id = id; + el.setAttribute("onclick", `dismissToast(${id})`); + + el.innerHTML = ` +
${toast.title}
+
${toast.description}
+ ` + + toasts.appendChild(el); + + setTimeout(() => { + dismissToast(id); + }, toast.timeout) +} + +function dismissToast(id) { + id = document.getElementById(id); + if (id) { + id.classList.add("hidden"); + setTimeout(() => { + id.remove(); + }, 500) + } +} -- cgit v1.2.3