Browse Source

Added (currently inoperative) help button to popup

master
Said Achmiz 6 years ago
parent
commit
52d68df2d7
3 changed files with 44 additions and 15 deletions
  1. 38
    15
      popup.css
  2. 1
    0
      popup.html
  3. 5
    0
      popup.js

+ 38
- 15
popup.css View File



.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;
} }


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

button.options-button {
font-size: 1.125rem;
padding: 10px;
color: #777;
width: 100%;
.aux-button-container button {
font-size: 1.25rem;
padding: 0;
flex: 1 1 auto; flex: 1 1 auto;
font-family: Font Awesome, Inconsolata, sans-serif; font-family: Font Awesome, Inconsolata, sans-serif;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
min-width: 0;
} }
button.options-button:hover {
.aux-button-container button::before {
padding: 4px 0 0 0;
}
.aux-button-container button:hover::before {
color: #000; color: #000;
} }
.aux-button-container button::after {
text-transform: uppercase;
color: #777;
font-size: 0.75rem;
padding: 4px 0 0 0;
}

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

button.options-button::before { button.options-button::before {
content: "\F1DE"; content: "\F1DE";
font-family: Font Awesome;
font-size: 0.875em;
margin: 0 6px 0 0;
color: #777;
} }
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";
} }


/********/ /********/

+ 1
- 0
popup.html View File

<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>

+ 5
- 0
popup.js View File

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(() => {

Loading…
Cancel
Save