achmizs/AlwaysKillSticky
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added mode display to popup

Browse Source
This commit is contained in:
Said Achmiz 2019-01-31 10:43:34 -05:00
parent b9351787ed
commit e160c680d2
3 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
popup.css
View File

@ -101,6 +101,11 @@ button.main-button.whitelist.active::after {
flex-flow: column; flex-flow: column;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
/*==================*/
/*= OPTIONS BUTTON =*/
/*==================*/
button.options-button { button.options-button {
font-size: 1.125rem; font-size: 1.125rem;
padding: 10px; padding: 10px;
@ -130,7 +135,46 @@ button.options-button::after {
.misc { .misc {
height: 4rem; height: 4rem;
position: relative; position: relative;
display: flex;
} }
.misc > * {
flex: 1 1 auto;
}
/*================*/
/*= MODE DISPLAY =*/
/*================*/
.mode-display {
font-family: Inconsolata, sans-serif;
padding: 10px;
display: block;
text-align: center;
font-weight: bold;
font-size: 1rem;
line-height: 1.35;
cursor: default;
}
.mode-display::before {
content: "Mode:";
display: block;
font-weight: normal;
}
.mode-display.whitelist {
background-color: #000;
color: #fff;
}
.mode-display::after {
content: "Blacklist";
}
.mode-display.whitelist::after {
content: "Whitelist";
}
/*=================*/
/*= RELOAD BUTTON =*/
/*=================*/
button.reload-button { button.reload-button {
background-color: #ffd; background-color: #ffd;
margin: 4px; margin: 4px;

1
popup.html
View File

@ -9,6 +9,7 @@
<button type='button' class='main-button'></button> <button type='button' class='main-button'></button>
</div> </div>
<div class='misc'> <div class='misc'>
<span class='mode-display'></span>
<button type='button' class='reload-button'></button> <button type='button' class='reload-button'></button>
</div> </div>
<div class='aux-button-container'> <div class='aux-button-container'>

3
popup.js
View File

@ -97,6 +97,7 @@ function updateState(result) {
function updateUIState() { function updateUIState() {
let button = document.querySelector("button.main-button"); let button = document.querySelector("button.main-button");
let modeDisplay = document.querySelector(".mode-display");
if (ASK.mode == "blacklist") { if (ASK.mode == "blacklist") {
if (ASK.pageMatched && !ASK.pageExcluded) { if (ASK.pageMatched && !ASK.pageExcluded) {
button.classList.toggle("active", true); button.classList.toggle("active", true);
@ -104,6 +105,7 @@ function updateUIState() {
button.classList.toggle("active", false); button.classList.toggle("active", false);
} }
button.classList.toggle("whitelist", false); button.classList.toggle("whitelist", false);
modeDisplay.classList.toggle("whitelist", false);
} else { } else {
if (!ASK.pageExcluded) { if (!ASK.pageExcluded) {
button.classList.toggle("active", false); button.classList.toggle("active", false);
@ -111,6 +113,7 @@ function updateUIState() {
button.classList.toggle("active", true); button.classList.toggle("active", true);
} }
button.classList.toggle("whitelist", true); button.classList.toggle("whitelist", true);
modeDisplay.classList.toggle("whitelist", true);
} }
} }