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

Refactored and improved popup info box

Browse Source
This commit is contained in:
Said Achmiz 2019-01-31 21:59:45 -05:00
parent afa2923bb2
commit d222b70f7d
3 changed files with 73 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
popup.css
View File

@ -86,6 +86,9 @@ button.main-button::after {
button.main-button.active::after {
opacity: 1.0;
}
button.main-button.active:hover::after {
opacity: 0.15;
}
button.main-button.whitelist::after {
opacity: 0.15;
@ -132,48 +135,75 @@ button.options-button::after {
}
/********/
/* MISC */
/* INFO */
/********/
.misc {
height: 4rem;
.info {
height: 6rem;
position: relative;
display: flex;
flex-flow: column;
font-family: Inconsolata, sans-serif;
font-size: 1rem;
padding: 10px 8px 6px 8px;
line-height: 1;
}
.misc > * {
.info > * {
flex: 1 1 auto;
}
.info.whitelist {
background-color: #000;
color: #fff;
}
.mode-display,
.status-display {
display: flex;
justify-content: center;
align-items: center;
cursor: default;
}
.mode-display::after,
.status-display::after {
font-weight: bold;
}
/*================*/
/*= 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";
margin: 0 0 0 8px;
}
.mode-display.whitelist::after {
.info.whitelist .mode-display::after {
content: "Whitelist";
}
/*==================*/
/*= STATUS DISPLAY =*/
/*==================*/
.status-display {
flex-flow: column;
line-height: 1.25;
font-size: 0.875rem;
}
.status-display::after {
font-size: 1.5rem;
line-height: 1;
margin: 2px 0 0 0;
}
.status-display::after,
.info.whitelist .status-display.active::after {
content: "No";
}
.status-display.active::after,
.info.whitelist .status-display::after {
content: "Yes";
}
/*=================*/
/*= RELOAD BUTTON =*/
/*=================*/
@ -187,6 +217,7 @@ button.reload-button {
overflow: hidden;
position: absolute;
width: calc(100% - 10px);
height: calc(6rem - 10px);
top: -4rem;
left: 5px;
}
@ -194,7 +225,7 @@ button.reload-button.active {
max-height: 1000px;
padding: 8px;
border: 1px solid #ddd;
top: 6px;
top: 5px;
}
button.reload-button:hover {
color: #000;

5
popup.html
View File

@ -11,8 +11,9 @@
<div class='main-button-container'>
<button type='button' class='main-button'></button>
</div>
<div class='misc'>
<span class='mode-display'></span>
<div class='info'>
<span class='mode-display'>Mode: </span>
<span class='status-display'>Killing stickies? </span>
<button type='button' class='reload-button'></button>
</div>
<div class='aux-button-container'>

24
popup.js
View File

@ -128,25 +128,29 @@ function updateState(result) {
}
function updateUIState() {
let button = document.querySelector("button.main-button");
let modeDisplay = document.querySelector(".mode-display");
let mainButton = document.querySelector("button.main-button");
let info = document.querySelector(".info");
let statusLabel = document.querySelector(".info .status-display");
var active, whitelist;
if (ASK.mode == "blacklist") {
if (ASK.pageMatched && !ASK.pageExcluded) {
button.classList.toggle("active", true);
active = true;
} else {
button.classList.toggle("active", false);
active = false;
}
button.classList.toggle("whitelist", false);
modeDisplay.classList.toggle("whitelist", false);
} else {
if (!ASK.pageExcluded) {
button.classList.toggle("active", false);
active = false;
} else {
button.classList.toggle("active", true);
active = true;
}
button.classList.toggle("whitelist", true);
modeDisplay.classList.toggle("whitelist", true);
}
mainButton.classList.toggle("active", active);
statusLabel.classList.toggle("active", active);
mainButton.classList.toggle("whitelist", (ASK.mode == "whitelist"));
info.classList.toggle("whitelist", (ASK.mode == "whitelist"));
}
/******************/