From 136e3234c0c58781589e8f4c54fff16cdbf89ef1 Mon Sep 17 00:00:00 2001 From: achmizs Date: Thu, 31 Jan 2019 01:27:53 -0500 Subject: [PATCH] Added reload button when excluding site from popup --- popup.css | 61 ++++++++++++++++++++++++++++++++++++++++++------------ popup.html | 9 +++++--- popup.js | 18 ++++++++++++---- 3 files changed, 68 insertions(+), 20 deletions(-) diff --git a/popup.css b/popup.css index 0042f00..2de7d04 100644 --- a/popup.css +++ b/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; +} \ No newline at end of file diff --git a/popup.html b/popup.html index 3c6f658..311d6d0 100644 --- a/popup.html +++ b/popup.html @@ -5,10 +5,13 @@ -
- +
+
-
+
+ +
+
diff --git a/popup.js b/popup.js index 3e54e81..51ca934 100644 --- a/popup.js +++ b/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(); \ No newline at end of file