From 6240ef4fd1ef81245edd78894e0d81bcde998787 Mon Sep 17 00:00:00 2001 From: simon Date: Fri, 1 Apr 2022 15:30:49 +0700 Subject: [PATCH] add connection status icon --- extension/index.html | 21 +++++++++++++++------ extension/popup.js | 16 ++++++++++++++++ 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/extension/index.html b/extension/index.html index 1d35d91..680346b 100644 --- a/extension/index.html +++ b/extension/index.html @@ -25,6 +25,9 @@ #download { text-align: center } + #status-icon { + font-size: 1.5em; + } .login-form { display: grid; grid-template-columns: 1fr 1fr; @@ -33,9 +36,14 @@ .login-form input { margin: 3px 0; } - .submit button { - margin: 10px auto 15px auto; - display: block; + .submit { + display: flex; + align-items: center; + justify-content: center; + } + .submit button, + .youtube-page button { + margin: 10px; border-radius: 0; padding: 5px 13px; border: none; @@ -43,7 +51,8 @@ background-color: #259485; color: #ffffff; } - .submit button:hover { + .submit button:hover, + .youtube-page button:hover { background-color: #97d4c8; transform: scale(1.05); color: #00202f; @@ -62,7 +71,7 @@
ta-logo
-
+
- +
diff --git a/extension/popup.js b/extension/popup.js index ba19561..5458afc 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -36,6 +36,21 @@ document.getElementById("save-login").addEventListener("click", function () { }); }) + +function setStatusIcon(connected) { + + let statusIcon = document.getElementById("status-icon") + if (connected == true) { + console.log("connected"); + } else { + console.log("not connected"); + statusIcon.innerHTML = "☒"; + statusIcon.style.color = "red"; + } + +} + + // fill in form document.addEventListener("DOMContentLoaded", async () => { @@ -44,6 +59,7 @@ document.addEventListener("DOMContentLoaded", async () => { function onGot(item) { if (!item.access) { console.log("no access details found"); + setStatusIcon(false); return } console.log(item.access);