Added (currently inoperative) help button to popup

This commit is contained in:
Said Achmiz 2019-02-01 00:16:04 -05:00
parent d68675294c
commit 52d68df2d7
3 changed files with 45 additions and 16 deletions

View File

@ -103,35 +103,58 @@ button.main-button.whitelist.active::after {
.aux-button-container { .aux-button-container {
display: flex; display: flex;
flex-flow: column;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0 8px;
}
.aux-button-container button {
font-size: 1.25rem;
padding: 0;
flex: 1 1 auto;
font-family: Font Awesome, Inconsolata, sans-serif;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
min-width: 0;
}
.aux-button-container button::before {
padding: 4px 0 0 0;
}
.aux-button-container button:hover::before {
color: #000;
}
.aux-button-container button::after {
text-transform: uppercase;
color: #777;
font-size: 0.75rem;
padding: 4px 0 0 0;
} }
/*==================*/ /*==================*/
/*= OPTIONS BUTTON =*/ /*= OPTIONS BUTTON =*/
/*==================*/ /*==================*/
button.options-button {
font-size: 1.125rem;
padding: 10px;
color: #777;
width: 100%;
flex: 1 1 auto;
font-family: Font Awesome, Inconsolata, sans-serif;
}
button.options-button:hover {
color: #000;
}
button.options-button::before { button.options-button::before {
content: "\F1DE"; content: "\F1DE";
font-family: Font Awesome; color: #777;
font-size: 0.875em;
margin: 0 6px 0 0;
} }
button.options-button::after { button.options-button::after {
content: "Options"; content: "Options";
margin: 0 3px 0 0; }
/*===============*/
/*= HELP BUTTON =*/
/*===============*/
button.help-button::before {
content: "\F128";
font-weight: 900;
color: #999;
}
button.help-button::after {
content: "Help";
} }
/********/ /********/

View File

@ -17,6 +17,7 @@
<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'>
<button type='button' class='help-button'></button>
<button type='button' class='options-button'></button> <button type='button' class='options-button'></button>
</div> </div>
</body> </body>

View File

@ -198,6 +198,11 @@ function initialize() {
document.querySelector("button.options-button").addActivateEvent(() => { document.querySelector("button.options-button").addActivateEvent(() => {
chrome.runtime.openOptionsPage(null); chrome.runtime.openOptionsPage(null);
}); });
// Listener for the Help button.
document.querySelector("button.help-button").addActivateEvent(() => {
// TODO: code!
});
// Listener for reload button (appears when sticky-killing is toggled OFF). // Listener for reload button (appears when sticky-killing is toggled OFF).
document.querySelector("button.reload-button").addActivateEvent(() => { document.querySelector("button.reload-button").addActivateEvent(() => {