added offline indicator icon

4 files changed, 14 insertions, 2 deletions

diff --git a/src/app/icons/offline.png b/src/app/icons/offline.png
new file mode 100644
index 0000000..a9d2f1f
--- /dev/null
+++ b/src/app/icons/offline.png
diff --git a/src/app/index.html b/src/app/index.html
index 98c59d4..f9d3d51 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -14,6 +14,9 @@
 		<div id="toasts"></div>
 
 		<div id="winbtns">
+			<div class="hidden" id="offline" tooltip="%%tooltip.offline%%" tooltip-position="horizontal">
+				<img src="icons/offline.png">
+			</div>
 			<div id="settings" tooltip="%%tooltip.settings%%" tooltip-position="horizontal" onclick="settings.popup.toggle()">
 				<img src="icons/settings.png">
 			</div>
diff --git a/src/app/js/request.js b/src/app/js/request.js
index cc73f1b..b9b5081 100644
--- a/src/app/js/request.js
+++ b/src/app/js/request.js
@@ -1,9 +1,12 @@
 const ipcRenderer = require("electron").ipcRenderer;
 
 let update_status = () => {
-	// show a toast message if no Internet connection has been detected.
+	// if offline, show toast and offline icon
 	if (! navigator.onLine) {
 		ipcRenderer.send("no-internet");
+		offline.classList.remove("hidden");
+	} else { // remove offline icon
+		offline.classList.add("hidden");
 	}
 }
 
diff --git a/src/app/main.css b/src/app/main.css
index 9ade423..b6b0ac7 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -59,8 +59,14 @@ button:active {filter: brightness(90%)}
 	margin-right: calc(var(--padding) / 2);
 }
 
+#winbtns div.hidden {
+	width: 0px;
+	opacity: 0.0;
+	margin-right: 0px;
+	pointer-events: none;
+}
+
 #winbtns div img {
-	width: 100%;
 	height: 100%;
 	transition: transform 0.25s ease-in-out;
 }