Added reload button when excluding site from popup
This commit is contained in:
parent
e2bdb47ada
commit
136e3234c0
61
popup.css
61
popup.css
@ -25,11 +25,12 @@ button:focus {
|
||||
button::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
#main-button-container {
|
||||
.main-button-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#main-button-container button {
|
||||
button.main-button {
|
||||
padding: 10px;
|
||||
font-size: 6rem;
|
||||
display: flex;
|
||||
@ -40,25 +41,25 @@ button::selection {
|
||||
color: #ccc;
|
||||
font-family: Font Awesome;
|
||||
}
|
||||
#main-button-container button.active {
|
||||
button.main-button.active {
|
||||
color: #000;
|
||||
}
|
||||
#main-button-container button:hover {
|
||||
button.main-button:hover {
|
||||
text-shadow:
|
||||
0 0 1px #fff,
|
||||
0 0 3px #fff,
|
||||
0 0 5px #fff;
|
||||
}
|
||||
#main-button-container button:hover {
|
||||
button.main-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
#main-button-container button::before {
|
||||
button.main-button::before {
|
||||
content: "\F08D";
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
#main-button-container button::after {
|
||||
button.main-button::after {
|
||||
content: "\F05E";
|
||||
position: absolute;
|
||||
font-weight: 300;
|
||||
@ -66,30 +67,64 @@ button::selection {
|
||||
opacity: 0.0;
|
||||
transform: scaleX(-1) scale(1.5);
|
||||
}
|
||||
#main-button-container button.active::after {
|
||||
button.main-button.active::after {
|
||||
opacity: 1.0;
|
||||
}
|
||||
#aux-button-container {
|
||||
.aux-button-container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.options-button {
|
||||
button.options-button {
|
||||
font-size: 1.125rem;
|
||||
padding: 10px;
|
||||
color: #777;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-family: Font Awesome, Inconsolata, sans-serif;
|
||||
}
|
||||
.options-button:hover {
|
||||
button.options-button:hover {
|
||||
color: #000;
|
||||
}
|
||||
.options-button::before {
|
||||
button.options-button::before {
|
||||
content: "\F1DE";
|
||||
font-family: Font Awesome;
|
||||
font-size: 0.875em;
|
||||
margin: 0 6px 0 0;
|
||||
}
|
||||
.options-button::after {
|
||||
button.options-button::after {
|
||||
content: "Options";
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
button.reload-button {
|
||||
background-color: #ffd;
|
||||
margin: 4px;
|
||||
border-radius: 6px;
|
||||
color: #777;
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: calc(100% - 8px);
|
||||
top: -4rem;
|
||||
}
|
||||
button.reload-button.active {
|
||||
max-height: 1000px;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
top: 1px;
|
||||
}
|
||||
button.reload-button:hover {
|
||||
color: #000;
|
||||
}
|
||||
button.reload-button::before {
|
||||
content: "\F2F1";
|
||||
font-family: Font Awesome;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.misc {
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
}
|
||||
@ -5,10 +5,13 @@
|
||||
<link rel='stylesheet' type='text/css' href='fonts.css' />
|
||||
</head>
|
||||
<body>
|
||||
<div id='main-button-container'>
|
||||
<button type='button'></button>
|
||||
<div class='main-button-container'>
|
||||
<button type='button' class='main-button'></button>
|
||||
</div>
|
||||
<div id='aux-button-container'>
|
||||
<div class='misc'>
|
||||
<button type='button' class='reload-button'></button>
|
||||
</div>
|
||||
<div class='aux-button-container'>
|
||||
<button type='button' class='options-button'></button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
18
popup.js
18
popup.js
@ -90,7 +90,7 @@ function updateState(result) {
|
||||
}
|
||||
|
||||
function updateUIState() {
|
||||
let button = document.querySelector("#main-button-container button");
|
||||
let button = document.querySelector("button.main-button");
|
||||
if (ASK.mode == "blacklist" && ASK.pageMatched && !ASK.pageExcluded) {
|
||||
button.classList.toggle("active", true);
|
||||
// button.innerHTML = "X";
|
||||
@ -121,7 +121,7 @@ function initialize() {
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector("#main-button-container button").addActivateEvent((event) => {
|
||||
document.querySelector("button.main-button").addActivateEvent((event) => {
|
||||
toggleState();
|
||||
|
||||
let matchingPatterns = ASK.matchingPatterns.join("\n");
|
||||
@ -133,15 +133,25 @@ function initialize() {
|
||||
"mode": mode
|
||||
}, () => {
|
||||
updateUIState();
|
||||
if (ASK.pageMatched && !ASK.pageExcluded)
|
||||
let reloadButton = document.querySelector("button.reload-button");
|
||||
if (ASK.pageMatched && !ASK.pageExcluded) {
|
||||
chrome.tabs.executeScript(null, { code: 'killSticky()' });
|
||||
reloadButton.classList.toggle("active", false);
|
||||
} else {
|
||||
reloadButton.classList.toggle("active", true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.querySelector("#aux-button-container button").addActivateEvent((event) => {
|
||||
document.querySelector("button.options-button").addActivateEvent(() => {
|
||||
chrome.runtime.openOptionsPage(null);
|
||||
});
|
||||
|
||||
document.querySelector("button.reload-button").addActivateEvent(() => {
|
||||
chrome.tabs.update(null, { url: ASK.activeTabLocation });
|
||||
window.close();
|
||||
});
|
||||
}
|
||||
|
||||
initialize();
|
||||
Loading…
Reference in New Issue
Block a user