aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-02-08 22:36:25 +0100
committer0neGal <mail@0negal.com>2022-02-08 22:36:25 +0100
commitc1153f19e6323bbc76145d3defe0bca6b2b6088e (patch)
tree37614f44c05cdd4892b55db7c910450ba4e9fe75
parent3ee7928a2412b8041044afd8bd49b922c9941972 (diff)
downloadViper-c1153f19e6323bbc76145d3defe0bca6b2b6088e.tar.gz
Viper-c1153f19e6323bbc76145d3defe0bca6b2b6088e.zip
added toasts
No functional toasts yet, just the code for them, I'll add the actual toasts later...
-rw-r--r--src/app/index.html3
-rw-r--r--src/app/main.css54
-rw-r--r--src/app/toast.js58
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)
+ }
+}