diff --git a/public/popup.html b/public/popup.html index 862dec7..e3cc457 100644 --- a/public/popup.html +++ b/public/popup.html @@ -9,9 +9,23 @@

- - Reload page - +
+ +
+ + + +
+
diff --git a/src/popup.css b/src/popup.css index 57028a2..0f00aac 100644 --- a/src/popup.css +++ b/src/popup.css @@ -27,6 +27,7 @@ body { a { cursor: pointer; + height: 25px; } .app { @@ -35,7 +36,6 @@ a { align-items: center; justify-content: space-between; flex-direction: column; - text-align: left; padding: 20px; } @@ -46,3 +46,91 @@ a { align-items: center; justify-content: space-between; } + +.app-header-right { + display: flex; + flex-direction: row; + align-items: center; +} + +.switch-container { + display: flex; + flex-direction: row; + align-items: center; +} + +.switch-label { + padding: 8px; + transition: color 0.4s ease; + font-size: 8px; + font-weight: bolder; +} + +.switch-label-on { + color: var(--green); +} + +.switch-label-off { + color: var(--cold-gray); +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; + border-radius: 20px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--black-wash); + border: 1px solid white; + opacity: 50%; + -webkit-transition: 0.4s; + transition: 0.4s; + border-radius: 20px; +} + +.slider:before { + position: absolute; + content: ''; + height: 16px; + width: 16px; + right: 20px; + top: 1px; + background-color: var(--green); + -webkit-transition: 0.4s; + transition: 0.4s; + border-radius: 50%; +} + +input:checked + .slider { + background-color: var(--black-wash); + opacity: 100%; +} + +input:checked + .slider:before { + -webkit-transform: translateX(18px); + -ms-transform: translateX(18px); + transform: translateX(18px); +} + +input:checked + .switch-label-on { + color: var(--green); +} + +input:checked + .switch-label-off { + color: var(--cold-gray); +} diff --git a/src/popup.ts b/src/popup.ts index f59e274..672c3ed 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -9,10 +9,30 @@ document.addEventListener('DOMContentLoaded', () => { const activeTab = tabs[0] if (activeTab.id) { browser.tabs.reload(activeTab.id) + reloadIcon.hidden = true } }) }) } + + const statusCheckbox = document.getElementById( + 'statusCheckbox' + ) as HTMLInputElement + + if (statusCheckbox) { + browser.storage.sync.get(['status']).then((result) => { + statusCheckbox.checked = result.status || true + }) + + statusCheckbox.addEventListener('click', () => { + browser.storage.sync.set({ status: !statusCheckbox.checked }) + + document.getElementById('switch-label-on')!.style.color = + statusCheckbox.checked ? 'var(--green)' : 'var(--cold-gray)' + + if (reloadIcon?.hidden) reloadIcon.hidden = false + }) + } }) const extractDomain = (url: string): string | null => { @@ -20,21 +40,13 @@ const extractDomain = (url: string): string | null => { return match ? match[1] : null } -const updateTabInfo = (): void => { - browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => { - const activeTab = tabs[0] - if (activeTab.url) { - const domain = extractDomain(activeTab.url) - const urlElement = document.getElementById('currentDomain') - if (urlElement) { - urlElement.textContent = domain || '' - } +browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => { + const activeTab = tabs[0] + if (activeTab.url) { + const domain = extractDomain(activeTab.url) + const urlElement = document.getElementById('currentDomain') + if (urlElement) { + urlElement.textContent = domain || '' } - }) -} - -updateTabInfo() - -browser.tabs.onActivated.addListener(() => { - updateTabInfo() + } })