From 269739347f40e50148617e48b786ab3c8144bf4b Mon Sep 17 00:00:00 2001 From: SimonBrazell Date: Sat, 25 Apr 2020 18:31:27 +1000 Subject: [PATCH] Add tabs UI to options page --- manifest.json | 2 +- pages/options/options.html | 220 ++++++++++++++++++++----------------- pages/options/options.js | 50 +++++++-- pages/styles.css | 47 +++++++- 4 files changed, 202 insertions(+), 117 deletions(-) diff --git a/manifest.json b/manifest.json index 4e424c5..e69a8ba 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Privacy Redirect", "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.", - "version": "1.1.21", + "version": "1.1.22", "manifest_version": 2, "background": { "scripts": [ diff --git a/pages/options/options.html b/pages/options/options.html index 6054587..f638fcf 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -11,114 +11,134 @@ -
-
-

Nitter Redirects

-   - -
-
+
+ + + +
-
-
-

Invidious Redirects

-   - -
-
+
+
+
+

Nitter Redirects

+   + +
+
-
-
-

Bibliogram Redirects

-   - -
-
+
+
+

Invidious Redirects

+   + +
+
-
-
-

OpenStreetMap Redirects

-   - -
-
+
+
+

Bibliogram Redirects

+   + +
+
-
-

Nitter Instance

- - - -

Invidious Instance

- - - -

Bibliogram Instance

- - - -

OpenStreetMap Instance

- - - -
+
+
+

OpenStreetMap Redirects

+   + +
+
-
-
-

Always proxy videos through Invidious?

-   - -
-
+
+

Nitter Instance

+ + + +

Invidious Instance

+ + + +

Bibliogram Instance

+ + + +

OpenStreetMap Instance

+ + + +
+
-
-
-

Only redirect embedded video to Invidious?

-   - -
-
+
+
+
+

Always proxy videos through Invidious

+   + +
+
-
-

Invidious Video Quality

- -
+
+
+

Only redirect embedded video to Invidious

+   + +
+
-
-
-

Proactively remove Twitter service worker

-   - -
-
+
+

Invidious Video Quality

+ +
+ +
+
+

Proactively remove Twitter service worker

+   + +
+
+
+ +
+ +
diff --git a/pages/options/options.js b/pages/options/options.js index 3b85038..d702eb8 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -1,17 +1,17 @@ 'use strict'; -let nitterInstance = document.querySelector('#nitter-instance'); -let invidiousInstance = document.querySelector('#invidious-instance'); -let bibliogramInstance = document.querySelector('#bibliogram-instance'); -let osmInstance = document.querySelector('#osm-instance'); -let disableNitter = document.querySelector('#disable-nitter'); -let disableInvidious = document.querySelector('#disable-invidious'); -let disableBibliogram = document.querySelector('#disable-bibliogram'); -let disableOsm = document.querySelector('#disable-osm'); -let alwaysProxy = document.querySelector('#always-proxy'); -let onlyEmbeddedVideo = document.querySelector('#only-embed'); -let videoQuality = document.querySelector('#video-quality'); -let removeTwitterSW = document.querySelector('#remove-twitter-sw'); +let nitterInstance = document.getElementById('nitter-instance'); +let invidiousInstance = document.getElementById('invidious-instance'); +let bibliogramInstance = document.getElementById('bibliogram-instance'); +let osmInstance = document.getElementById('osm-instance'); +let disableNitter = document.getElementById('disable-nitter'); +let disableInvidious = document.getElementById('disable-invidious'); +let disableBibliogram = document.getElementById('disable-bibliogram'); +let disableOsm = document.getElementById('disable-osm'); +let alwaysProxy = document.getElementById('always-proxy'); +let onlyEmbeddedVideo = document.getElementById('only-embed'); +let videoQuality = document.getElementById('video-quality'); +let removeTwitterSW = document.getElementById('remove-twitter-sw'); window.browser = window.browser || window.chrome; @@ -46,6 +46,32 @@ browser.storage.sync.get( } ); +function openTab(tab, event) { + let i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName('tabcontent'); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = 'none'; + } + tablinks = document.getElementsByClassName('tablinks'); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(' active', ''); + } + document.getElementById(tab).style.display = 'block'; + event.currentTarget.className += ' active'; +} + +document.getElementById('generalTab').addEventListener( + 'click', openTab.bind(null, 'general') +); +document.getElementById('advancedTab').addEventListener( + 'click', openTab.bind(null, 'advanced') +); +document.getElementById('whitelistTab').addEventListener( + 'click', openTab.bind(null, 'whitelist') +); + +document.getElementById('generalTab').click(); + function debounce(func, wait, immediate) { let timeout; return () => { diff --git a/pages/styles.css b/pages/styles.css index 822182d..ca1c781 100644 --- a/pages/styles.css +++ b/pages/styles.css @@ -2,6 +2,7 @@ --text-main: #FFF; --text-secondary: #000; --dark-grey: #3C4043; + --darker-grey: #292A2D; --white: #FFF; --active: #FF5B56; --space: 5px; @@ -12,16 +13,17 @@ body { color: var(--text-secondary); margin: 0; - background-color: var(--dark-grey); + background-color: var(--darker-grey); max-width: 400px; margin: auto; + min-height: 460px; } - - .popup { - min-width: 300px; + width: 300px; + height: auto; overflow: hidden; + background-color: var(--dark-grey); } input { @@ -190,3 +192,40 @@ input[type="url"]:invalid { .margin-bottom { margin-bottom: 20px; } + +.tab { + overflow: hidden; + background-color: var(--darker-grey); +} + +.tab button { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + color: var(--text-main); + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + border: solid 1px var(--dark-grey); + width: 33.333%; + font-size: 14px; +} + +.tab button:hover { + background-color: var(--active); +} + +.tab button.active { + background-color: var(--dark-grey); +} + +.tabcontent { + padding-top: 10px; + display: none; + border: solid 1px var(--dark-grey); + background-color: var(--dark-grey); + min-height: 403px; +}