Selaa lähdekoodia

Added mode display to popup

master
Said Achmiz 6 vuotta sitten
vanhempi
commit
e160c680d2
3 muutettua tiedostoa jossa 48 lisäystä ja 0 poistoa
  1. 44
    0
      popup.css
  2. 1
    0
      popup.html
  3. 3
    0
      popup.js

+ 44
- 0
popup.css Näytä tiedosto

@@ -101,6 +101,11 @@ button.main-button.whitelist.active::after {
flex-flow: column;
border-top: 1px solid #ddd;
}

/*==================*/
/*= OPTIONS BUTTON =*/
/*==================*/

button.options-button {
font-size: 1.125rem;
padding: 10px;
@@ -130,7 +135,46 @@ button.options-button::after {
.misc {
height: 4rem;
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 {
background-color: #ffd;
margin: 4px;

+ 1
- 0
popup.html Näytä tiedosto

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

+ 3
- 0
popup.js Näytä tiedosto

@@ -97,6 +97,7 @@ function updateState(result) {

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


Loading…
Peruuta
Tallenna