From e0f71890438f5ebb4e2e032ce13856fd2ae0075c Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Sun, 20 Feb 2022 20:28:36 +0100
Subject: [PATCH] Improved app.toast styles + changes templates to show icons

---
 web/src/app/css/app.css                     | 47 ++++++++++++++++++++-
 web/src/app/css/base.css                    |  2 +
 web/src/app/js/app.js                       |  7 ++-
 web/src/app/js/templates/toast/confirm.html | 12 +++---
 web/src/app/js/templates/toast/error.html   |  7 ++-
 web/src/app/js/templates/toast/info.html    |  6 ++-
 web/src/app/js/templates/toast/warn.html    |  7 ++-
 7 files changed, 72 insertions(+), 16 deletions(-)

diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 51c6c54..887a793 100644
--- a/web/src/app/css/app.css
+++ b/web/src/app/css/app.css
@@ -234,8 +234,53 @@ main {
 	top: 0;
 	width: 100%;
 	height: 100%;
+	overflow: auto;
+	user-select: none;
+	pointer-events: none;
 }
-
 #toasts {
 	margin: auto;
 }
+
+#toast-container.info,
+#toast-container.warn,
+#toast-container.error {
+	background: #0000004d;
+}
+
+.toast .fa { vertical-align: middle }
+.toast .text {
+	padding: 1em;
+	font-size: 1.1em;
+}
+.toast {
+	border-radius: 2em;
+	box-shadow: 0px 0px 2em #00000087;
+	border: 1px solid #00000012;
+	margin-top: 1em;
+	min-width: 15em;
+	color: #fff;
+	user-select: auto;
+	pointer-events: all;
+}
+.toast.info { background: #5959ff }
+.toast.warn { background: #cc8932 }
+.toast.error { background: #d74848 }
+
+.toast .confirm {
+	background: #00000036;
+	border-radius: 0px 0px 2em 2em;
+	padding: .4em 1em;
+}
+.toast .confirm .nope,
+.toast .confirm .yes {
+	padding: .5em;
+	font-weight: bold;
+	user-select: none;
+}
+.toast .confirm .nope {
+	color: #fba8a8;
+}
+.toast .confirm .yes {
+	color: #79ff79;
+}
diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index dbceb98..8211efc 100644
--- a/web/src/app/css/base.css
+++ b/web/src/app/css/base.css
@@ -7,6 +7,8 @@ body {
 	cursor: pointer;
 }
 
+.text-center { text-align: center }
+
 .flex { display: flex }
 .flex > .center { margin: auto }
 
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index 9624bea..a388707 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -324,11 +324,13 @@ app.toast = {
 		} else result = true;
 		return result;
 	},
-	dismiss: function(id) {
+	dismiss: function(id, e) {
+		if (e !== undefined) e.stopPropagation();
 		app.toast.confirms[id] = 0;
 		app.toast.remove(id);
 	},
-	accept: function(id) {
+	accept: function(id, e) {
+		if (e !== undefined) e.stopPropagation();
 		app.toast.confirms[id] = 1;
 		app.toast.remove(id);
 	},
@@ -369,6 +371,7 @@ app.toast = {
 		toasts.innerHTML += tplfilled;
 		setTimeout(function() { app.toast.remove(id) },
 			options.millis || 3000);
+		calcHeightMobile();
 	},
 }
 
diff --git a/web/src/app/js/templates/toast/confirm.html b/web/src/app/js/templates/toast/confirm.html
index e7cd88b..00702ca 100644
--- a/web/src/app/js/templates/toast/confirm.html
+++ b/web/src/app/js/templates/toast/confirm.html
@@ -1,8 +1,6 @@
-<div style="flex">
-	<div>
-		<a onclick="app.toast.dismiss('{.id}')">NO</a>
-	</div>
-	<div>
-		<a onclick="app.toast.accept('{.id}')">YES</a>
-	</div>
+<div class="confirm flex">
+	<a class="width-max text-center button rounder nope"
+		onclick="app.toast.dismiss('{.id}', event)">NO</a>
+	<a class="width-max text-center button rounder yes"
+		onclick="app.toast.accept('{.id}', event)">YES</a>
 </div>
diff --git a/web/src/app/js/templates/toast/error.html b/web/src/app/js/templates/toast/error.html
index 781097e..720910a 100644
--- a/web/src/app/js/templates/toast/error.html
+++ b/web/src/app/js/templates/toast/error.html
@@ -1,3 +1,6 @@
-<div id="{.id}">
-	<div>{.text}</div>
+<div id="{.id}" class="toast error"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-times fa-fw">
+		</i>{.text}</div>
+	{confirmTemplate}
 </div>
diff --git a/web/src/app/js/templates/toast/info.html b/web/src/app/js/templates/toast/info.html
index 619505e..3ec1a55 100644
--- a/web/src/app/js/templates/toast/info.html
+++ b/web/src/app/js/templates/toast/info.html
@@ -1,4 +1,6 @@
-<div id="{.id}" style="background: blue">
-	<div>{.text}</div>
+<div id="{.id}" class="toast info"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-info fa-fw">
+		</i>{.text}</div>
 	{confirmTemplate}
 </div>
diff --git a/web/src/app/js/templates/toast/warn.html b/web/src/app/js/templates/toast/warn.html
index 781097e..d852ab2 100644
--- a/web/src/app/js/templates/toast/warn.html
+++ b/web/src/app/js/templates/toast/warn.html
@@ -1,3 +1,6 @@
-<div id="{.id}">
-	<div>{.text}</div>
+<div id="{.id}" class="toast warn"
+	onclick="app.toast.dismiss('{.id}')">
+	<div class="text"><i class="fa fa-warning fa-fw">
+		</i>{.text}</div>
+	{confirmTemplate}
 </div>