started styling
This commit is contained in:
parent
dc0be911b2
commit
250d462da2
4 changed files with 157 additions and 42 deletions
63
src/popup.js
Normal file
63
src/popup.js
Normal file
|
@ -0,0 +1,63 @@
|
|||
const submitButton = document.getElementById("submit-token")
|
||||
const inputField = document.getElementById("token")
|
||||
const statusField = document.getElementById("token-status")
|
||||
const errorField = document.getElementById("error-text")
|
||||
|
||||
// Set popup content
|
||||
chrome.storage.local.get(["level", "token"], (data) => {
|
||||
if(data.token === undefined)
|
||||
{
|
||||
statusField.innerHTML = String.fromCodePoint(0x2757)
|
||||
submitButton.innerHTML = String.fromCodePoint(0x2705)
|
||||
submitButton.classList.add("no-token")
|
||||
}
|
||||
else
|
||||
{
|
||||
statusField.innerHTML = String.fromCodePoint(0x2705)
|
||||
submitButton.innerHTML = String.fromCodePoint(0x1F501)
|
||||
}
|
||||
|
||||
const levelSpan = document.getElementById("level")
|
||||
levelSpan.innerHTML = data.level
|
||||
|
||||
inputField.addEventListener("input", () => {
|
||||
if(inputField.value !== "" && inputField.value !== data.token)
|
||||
{
|
||||
submitButton.innerHTML = String.fromCodePoint(0x2705)
|
||||
submitButton.classList.add("new-token")
|
||||
}
|
||||
else
|
||||
{
|
||||
submitButton.innerHTML = String.fromCodePoint(0x1F501)
|
||||
submitButton.classList.remove("new-token")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Set the wanikani token
|
||||
submitButton.addEventListener( "click", () => {
|
||||
if(submitButton.classList.contains("new-token"))
|
||||
{
|
||||
chrome.storage.local.set({"token": inputField.value})
|
||||
submitButton.classList.remove("new-token", "no-token")
|
||||
inputField.value = ""
|
||||
}
|
||||
|
||||
if(submitButton.classList.contains("no-token"))
|
||||
return
|
||||
|
||||
statusField.innerHTML = String.fromCodePoint(0x23F1)
|
||||
|
||||
chrome.runtime.sendMessage("", {type: "sync"}, response => {
|
||||
if(response.success)
|
||||
{
|
||||
statusField.innerHTML = String.fromCodePoint(0x2705)
|
||||
errorField.innerHTML = ""
|
||||
}
|
||||
else
|
||||
{
|
||||
statusField.innerHTML = String.fromCodePoint(0x2757)
|
||||
errorField.innerHTML = response.error
|
||||
}
|
||||
})
|
||||
})
|
53
src/styles.css
Normal file
53
src/styles.css
Normal file
|
@ -0,0 +1,53 @@
|
|||
*
|
||||
{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: 1.5fr 1fr 3fr 2fr;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
header
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: 8fr 1fr;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2
|
||||
{
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
#token-area
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
#input-area
|
||||
{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 8fr 1fr;
|
||||
}
|
||||
|
||||
#token-status
|
||||
{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#settings-area
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue