diff options
| -rw-r--r-- | src/app/index.html | 3 | ||||
| -rw-r--r-- | src/app/main.css | 54 | ||||
| -rw-r--r-- | src/app/toast.js | 58 |
3 files changed, 115 insertions, 0 deletions
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 @@ </head> <body> <div id="bgHolder"></div> + <div id="toasts"></div> <div id="winbtns"> <div id="minimize" onclick="ipcRenderer.send('minimize')"></div> <div id="close" onclick="ipcRenderer.send('exit')"></div> </div> + <div id="overlay" onclick="Browser.toggle(false)"></div> <div id="browser"> <div id="misc"> @@ -116,6 +118,7 @@ <script src="lang.js"></script> <script src="main.js"></script> + <script src="toast.js"></script> <script src="browser.js"></script> <script src="launcher.js"></script> </body> 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 = ` + <div class="title">${toast.title}</div> + <div class="description">${toast.description}</div> + ` + + 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) + } +} |