tubearchivist/browser-extension
1
0
Fork 0
mirror of https://github.com/tubearchivist/browser-extension.git synced 2024-11-25 05:00:14 +00:00
Code Issues Projects Releases Wiki Activity

add connection status icon

Browse Source
This commit is contained in:
simon 2022-04-01 15:30:49 +07:00
parent 04e8d7d2cb
commit 6240ef4fd1
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
extension/index.html
View File

@ -25,6 +25,9 @@
#download { #download {
text-align: center text-align: center
} }
#status-icon {
font-size: 1.5em;
}
.login-form { .login-form {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -33,9 +36,14 @@
.login-form input { .login-form input {
margin: 3px 0; margin: 3px 0;
} }
.submit button { .submit {
margin: 10px auto 15px auto; display: flex;
display: block; align-items: center;
justify-content: center;
}
.submit button,
.youtube-page button {
margin: 10px;
border-radius: 0; border-radius: 0;
padding: 5px 13px; padding: 5px 13px;
border: none; border: none;
@ -43,7 +51,8 @@
background-color: #259485; background-color: #259485;
color: #ffffff; color: #ffffff;
} }
.submit button:hover { .submit button:hover,
.youtube-page button:hover {
background-color: #97d4c8; background-color: #97d4c8;
transform: scale(1.05); transform: scale(1.05);
color: #00202f; color: #00202f;
@ -62,7 +71,7 @@
<div class="container"> <div class="container">
<img src="/images/logo.svg" alt="ta-logo"> <img src="/images/logo.svg" alt="ta-logo">
<hr> <hr>
<div id="download"></div> <div class="youtube-page" id="download"></div>
<form class="login-form"> <form class="login-form">
<label for="url">Tube Archivist Url:</label> <label for="url">Tube Archivist Url:</label>
<input type="text" id="url" name="url"> <input type="text" id="url" name="url">
@ -72,7 +81,7 @@
<input type="password" id="api-key" name="api-key"> <input type="password" id="api-key" name="api-key">
</form> </form>
<div class="submit"> <div class="submit">
<button onclick="storeLogin()" id="save-login">Save</button> <button onclick="storeLogin()" id="save-login">Save</button><span id="status-icon"></span>
</div> </div>
<div class="icons"> <div class="icons">
<div> <div>

16
extension/popup.js
View File

@ -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 = "&#9746;";
statusIcon.style.color = "red";
}
}
// fill in form // fill in form
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
@ -44,6 +59,7 @@ document.addEventListener("DOMContentLoaded", async () => {
function onGot(item) { function onGot(item) {
if (!item.access) { if (!item.access) {
console.log("no access details found"); console.log("no access details found");
setStatusIcon(false);
return return
} }
console.log(item.access); console.log(item.access);