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

Added reload button when excluding site from popup

Browse Source
This commit is contained in:
Said Achmiz 2019-01-31 01:27:53 -05:00
parent e2bdb47ada
commit 136e3234c0
3 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
popup.css
View File

@ -25,11 +25,12 @@ button:focus {
button::selection { button::selection {
background-color: transparent; background-color: transparent;
} }
#main-button-container { .main-button-container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-bottom: 1px solid #ddd;
} }
#main-button-container button { button.main-button {
padding: 10px; padding: 10px;
font-size: 6rem; font-size: 6rem;
display: flex; display: flex;
@ -40,25 +41,25 @@ button::selection {
color: #ccc; color: #ccc;
font-family: Font Awesome; font-family: Font Awesome;
} }
#main-button-container button.active { button.main-button.active {
color: #000; color: #000;
} }
#main-button-container button:hover { button.main-button:hover {
text-shadow: text-shadow:
0 0 1px #fff, 0 0 1px #fff,
0 0 3px #fff, 0 0 3px #fff,
0 0 5px #fff; 0 0 5px #fff;
} }
#main-button-container button:hover { button.main-button:hover {
color: #999; color: #999;
} }
#main-button-container button::before { button.main-button::before {
content: "\F08D"; content: "\F08D";
font-weight: 900; font-weight: 900;
position: relative; position: relative;
top: 3px; top: 3px;
} }
#main-button-container button::after { button.main-button::after {
content: "\F05E"; content: "\F05E";
position: absolute; position: absolute;
font-weight: 300; font-weight: 300;
@ -66,30 +67,64 @@ button::selection {
opacity: 0.0; opacity: 0.0;
transform: scaleX(-1) scale(1.5); transform: scaleX(-1) scale(1.5);
} }
#main-button-container button.active::after { button.main-button.active::after {
opacity: 1.0; opacity: 1.0;
} }
#aux-button-container { .aux-button-container {
display: flex; display: flex;
flex-flow: column;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.options-button { button.options-button {
font-size: 1.125rem; font-size: 1.125rem;
padding: 10px; padding: 10px;
color: #777; color: #777;
width: 100%; width: 100%;
height: 3rem;
font-family: Font Awesome, Inconsolata, sans-serif; font-family: Font Awesome, Inconsolata, sans-serif;
} }
.options-button:hover { button.options-button:hover {
color: #000; color: #000;
} }
.options-button::before { button.options-button::before {
content: "\F1DE"; content: "\F1DE";
font-family: Font Awesome; font-family: Font Awesome;
font-size: 0.875em; font-size: 0.875em;
margin: 0 6px 0 0; margin: 0 6px 0 0;
} }
.options-button::after { button.options-button::after {
content: "Options"; content: "Options";
margin: 0 3px 0 0; 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;
}

9
popup.html
View File

@ -5,10 +5,13 @@
<link rel='stylesheet' type='text/css' href='fonts.css' /> <link rel='stylesheet' type='text/css' href='fonts.css' />
</head> </head>
<body> <body>
<div id='main-button-container'> <div class='main-button-container'>
<button type='button'></button> <button type='button' class='main-button'></button>
</div> </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> <button type='button' class='options-button'></button>
</div> </div>
</body> </body>

18
popup.js
View File

@ -90,7 +90,7 @@ function updateState(result) {
} }
function updateUIState() { 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) { if (ASK.mode == "blacklist" && ASK.pageMatched && !ASK.pageExcluded) {
button.classList.toggle("active", true); button.classList.toggle("active", true);
// button.innerHTML = "X"; // 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(); toggleState();
let matchingPatterns = ASK.matchingPatterns.join("\n"); let matchingPatterns = ASK.matchingPatterns.join("\n");
@ -133,15 +133,25 @@ function initialize() {
"mode": mode "mode": mode
}, () => { }, () => {
updateUIState(); updateUIState();
if (ASK.pageMatched && !ASK.pageExcluded) let reloadButton = document.querySelector("button.reload-button");
if (ASK.pageMatched && !ASK.pageExcluded) {
chrome.tabs.executeScript(null, { code: 'killSticky()' }); 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); chrome.runtime.openOptionsPage(null);
}); });
document.querySelector("button.reload-button").addActivateEvent(() => {
chrome.tabs.update(null, { url: ASK.activeTabLocation });
window.close();
});
} }
initialize(); initialize();