From 6f338f2c66cf291a8f3a49c4a7a6d867ef7fe88f Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Thu, 19 Jan 2023 20:32:32 +0300 Subject: [PATCH] UX/UI tweaks --- package.json | 4 +- ...ut-icon-white.svg => about-icon-light.svg} | 0 ...-icon-white.svg => general-icon-light.svg} | 0 ...aps-icon-white.svg => maps-icon-light.svg} | 0 ...h-icon-white.svg => search-icon-light.svg} | 0 ...con-white.svg => sendFiles-icon-light.svg} | 0 ...n-white.svg => textStorage-icon-light.svg} | 0 ...con-white.svg => translate-icon-light.svg} | 0 src/config.json | 30 +++++++-------- src/pages/background/background.js | 5 +-- src/pages/options/init.js | 12 ++++++ src/pages/options/new_release.html | 1 - src/pages/options/widgets/services.pug | 2 +- src/pages/stylesheets/styles.css | 37 ++----------------- src/pages/widgets/links.pug | 7 +++- src/pages/widgets/switches.pug | 5 ++- 16 files changed, 43 insertions(+), 60 deletions(-) rename src/assets/images/{about-icon-white.svg => about-icon-light.svg} (100%) rename src/assets/images/{general-icon-white.svg => general-icon-light.svg} (100%) rename src/assets/images/{maps-icon-white.svg => maps-icon-light.svg} (100%) rename src/assets/images/{search-icon-white.svg => search-icon-light.svg} (100%) rename src/assets/images/{sendFiles-icon-white.svg => sendFiles-icon-light.svg} (100%) rename src/assets/images/{textStorage-icon-white.svg => textStorage-icon-light.svg} (100%) rename src/assets/images/{translate-icon-white.svg => translate-icon-light.svg} (100%) delete mode 100644 src/pages/options/new_release.html diff --git a/package.json b/package.json index b27cba78..222b283d 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,12 @@ }, "repository": { "type": "git", - "url": "git+https://codeberg.org/LibRedirect/LibRedirect.git" + "url": "git+https://github.com/libredirect/libredirect.git" }, "author": "LibRedirect", "license": "GPL-3.0-only", "bugs": { - "url": "https://codeberg.org/LibRedirect/LibRedirect/issues" + "url": "https://github.com/libredirect/libredirect/issues" }, "homepage": "https://libredirect.github.io", "devDependencies": { diff --git a/src/assets/images/about-icon-white.svg b/src/assets/images/about-icon-light.svg similarity index 100% rename from src/assets/images/about-icon-white.svg rename to src/assets/images/about-icon-light.svg diff --git a/src/assets/images/general-icon-white.svg b/src/assets/images/general-icon-light.svg similarity index 100% rename from src/assets/images/general-icon-white.svg rename to src/assets/images/general-icon-light.svg diff --git a/src/assets/images/maps-icon-white.svg b/src/assets/images/maps-icon-light.svg similarity index 100% rename from src/assets/images/maps-icon-white.svg rename to src/assets/images/maps-icon-light.svg diff --git a/src/assets/images/search-icon-white.svg b/src/assets/images/search-icon-light.svg similarity index 100% rename from src/assets/images/search-icon-white.svg rename to src/assets/images/search-icon-light.svg diff --git a/src/assets/images/sendFiles-icon-white.svg b/src/assets/images/sendFiles-icon-light.svg similarity index 100% rename from src/assets/images/sendFiles-icon-white.svg rename to src/assets/images/sendFiles-icon-light.svg diff --git a/src/assets/images/textStorage-icon-white.svg b/src/assets/images/textStorage-icon-light.svg similarity index 100% rename from src/assets/images/textStorage-icon-white.svg rename to src/assets/images/textStorage-icon-light.svg diff --git a/src/assets/images/translate-icon-white.svg b/src/assets/images/translate-icon-light.svg similarity index 100% rename from src/assets/images/translate-icon-white.svg rename to src/assets/images/translate-icon-light.svg diff --git a/src/config.json b/src/config.json index 1ccbf9a6..7163113e 100644 --- a/src/config.json +++ b/src/config.json @@ -84,7 +84,7 @@ ], "name": "Youtube", "options": { - "enabled": true, + "enabled": false, "redirectType": "both", "frontend": "invidious" }, @@ -110,7 +110,7 @@ ], "name": "YT Music", "options": { - "enabled": true, + "enabled": false, "frontend": "beatbump" }, "imageType": "png", @@ -134,7 +134,7 @@ ], "name": "Twitter", "options": { - "enabled": true, + "enabled": false, "redirectType": "both" }, "imageType": "png", @@ -154,7 +154,7 @@ ], "name": "TikTok", "options": { - "enabled": true + "enabled": false }, "imageType": "png", "embeddable": false, @@ -179,7 +179,7 @@ ], "name": "Reddit", "options": { - "enabled": true, + "enabled": false, "frontend": "libreddit" }, "imageType": "png", @@ -199,7 +199,7 @@ ], "name": "Imgur", "options": { - "enabled": true, + "enabled": false, "redirectType": "both" }, "imageType": "png", @@ -236,7 +236,7 @@ ], "name": "Medium", "options": { - "enabled": true + "enabled": false }, "imageType": "svg", "embeddable": false, @@ -255,7 +255,7 @@ ], "name": "Quora", "options": { - "enabled": true + "enabled": false }, "imageType": "png", "embeddable": false, @@ -274,7 +274,7 @@ ], "name": "IMDb", "options": { - "enabled": true + "enabled": false }, "imageType": "svg", "embeddable": false, @@ -293,7 +293,7 @@ ], "name": "Fandom", "options": { - "enabled": true + "enabled": false }, "imageType": "svg", "embeddable": false, @@ -320,7 +320,7 @@ ], "name": "LBRY", "options": { - "enabled": true, + "enabled": false, "frontend": "librarian", "redirectType": "both" }, @@ -356,7 +356,7 @@ ], "name": "Search", "options": { - "enabled": true, + "enabled": false, "frontend": "searxng" }, "imageType": "svgMono", @@ -387,7 +387,7 @@ ], "name": "Translate", "options": { - "enabled": true, + "enabled": false, "frontend": "simplyTranslate" }, "imageType": "svgMono", @@ -435,7 +435,7 @@ ], "name": "Send Files", "options": { - "enabled": true + "enabled": false }, "imageType": "svgMono", "embeddable": false, @@ -454,7 +454,7 @@ ], "name": "Paste Text", "options": { - "enabled": true + "enabled": false }, "imageType": "svgMono", "embeddable": false, diff --git a/src/pages/background/background.js b/src/pages/background/background.js index 22499579..021ad4cc 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -9,10 +9,7 @@ window.browser = window.browser || window.chrome browser.runtime.onInstalled.addListener(async details => { if (details.previousVersion != browser.runtime.getManifest().version) { // ^Used to prevent this running when debugging with auto-reload - browser.tabs.create({ - url: browser.runtime.getURL("/pages/options/new_release.html") - }); - + browser.runtime.openOptionsPage() switch (details.reason) { case "install": browser.storage.local.get("options", async r => { diff --git a/src/pages/options/init.js b/src/pages/options/init.js index cac23748..015daac7 100644 --- a/src/pages/options/init.js +++ b/src/pages/options/init.js @@ -9,18 +9,30 @@ function changeTheme() { case "dark": document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") + for (const element of document.body.getElementsByClassName('dark')) { + element.style.display = 'none'; + } break case "light": document.body.classList.add("light-theme") document.body.classList.remove("dark-theme") + for (const element of document.body.getElementsByClassName('light')) { + element.style.display = 'none'; + } break default: if (matchMedia("(prefers-color-scheme: light)").matches) { document.body.classList.add("light-theme") document.body.classList.remove("dark-theme") + for (const element of document.body.getElementsByClassName('light')) { + element.style.display = 'none'; + } } else { document.body.classList.add("dark-theme") document.body.classList.remove("light-theme") + for (const element of document.body.getElementsByClassName('dark')) { + element.style.display = 'none'; + } } } resolve() diff --git a/src/pages/options/new_release.html b/src/pages/options/new_release.html deleted file mode 100644 index 953f61d4..00000000 --- a/src/pages/options/new_release.html +++ /dev/null @@ -1 +0,0 @@ -Many things happenned in the past months. LibRedirect has gone through some hard decisions; removed Unify Settings, Test Latency, \ No newline at end of file diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug index 5bda5d3f..c321012a 100644 --- a/src/pages/options/widgets/services.pug +++ b/src/pages/options/widgets/services.pug @@ -2,7 +2,7 @@ each val, service in services section(class="option-block" id=service+"_page") div(class="some-block option-block") h1 - a(href=services[service].url)=services[service].name + a(target="_blank" href=services[service].url)=services[service].name hr diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 24628f5c..7d1b93ba 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -149,44 +149,11 @@ section.links a.selected { color: var(--active); } -input[type="range"] { - -webkit-appearance: none; - width: 350px; - height: 7px; - border-radius: 50px; - background: var(--text); - cursor: ew-resize; -} - -input[type="range"]:hover { - background: var(--light-grey); -} - -input[type="range"]::-webkit-slider-thumb { - appearance: none; - width: 20px; - height: 20px; - border-radius: 50%; - background: var(--active); - border: none; -} - -input[type="range"]::-moz-range-thumb { - width: 20px; - height: 20px; - border-radius: 50%; - background: var(--active); - border: none; -} - ::placeholder { color: var(--text); opacity: 0.7; } -#volume-value { - color: var(--active); -} /* \25BE */ @@ -392,6 +359,10 @@ div.checklist-popup div div { margin: 0; } +div.custom-checklist { + color: var(--active); +} + button.add { background-color: transparent; border: none; diff --git a/src/pages/widgets/links.pug b/src/pages/widgets/links.pug index 82e82dbe..cc7f86fe 100644 --- a/src/pages/widgets/links.pug +++ b/src/pages/widgets/links.pug @@ -8,12 +8,15 @@ section(class="links" id="links") div(class="title") a(href="#"+key) if services[key].imageType == 'svgMono' - img(src=`/assets/images/${key}-icon.svg`) + img(class='dark' src=`/assets/images/${key}-icon.svg`) + img(class='light' src=`/assets/images/${key}-icon-light.svg`) else img(src=`/assets/images/${key}-icon.${services[key].imageType}`) span(data-localise="__MSG_"+key+"__")=services[key].name div(class="title") a(href="#about") - img(src="/assets/images/about-icon.svg") + img(class='dark' src="/assets/images/about-icon.svg") + img(class='light' src="/assets/images/about-icon-light.svg") + span(data-localise="__MSG_about__") About diff --git a/src/pages/widgets/switches.pug b/src/pages/widgets/switches.pug index 9fbf5201..6b6f0c2b 100644 --- a/src/pages/widgets/switches.pug +++ b/src/pages/widgets/switches.pug @@ -2,8 +2,9 @@ each val, service in services div(class=service + " some-block") a(class="title" href=`/pages/options/index.html#${services[service].name.toLowerCase()}`) if services[service].imageType == 'svgMono' - img(src=`../../assets/images/${service}-icon.svg`) + img(class='dark' src=`/assets/images/${service}-icon.svg`) + img(class='light' src=`/assets/images/${service}-icon-light.svg`) else - img(src=`../../assets/images/${service}-icon.${services[service].imageType}`) + img(src=`/assets/images/${service}-icon.${services[service].imageType}`) h4(data-localise="__MSG_"+service+"__")=services[service].name input(class=service + "-enabled" type="checkbox") \ No newline at end of file