Made side bar links dim when disabled https://github.com/libredirect/browser_extension/issues/705

3 files changed, 30 insertions, 9 deletions

diff --git a/src/pages/options/index.js b/src/pages/options/index.js
index 0910a897..e589e93d 100644
--- a/src/pages/options/index.js
+++ b/src/pages/options/index.js
@@ -35,7 +35,6 @@ async function changeFrontendsSettings(service) {
 			if (typeof divs[service].frontend !== "undefined") {
 				if (frontend == divs[service].frontend.value) {
 					frontendDiv.style.display = ""
-					console.log(config.services[service].frontends[frontend].localhost)
 					if (config.services[service].frontends[frontend].localhost === true) {
 						document.getElementById(`${service}-instance-div`).style.display = ""
 
@@ -72,14 +71,25 @@ async function changeFrontendsSettings(service) {
 }
 
 async function loadPage(path) {
+	options = await utils.getOptions()
 	for (const section of document.getElementById("pages").getElementsByTagName("section")) section.style.display = "none"
 	document.getElementById(`${path}_page`).style.display = "block"
 
-	for (const a of document.getElementById("links").getElementsByTagName("a")) {
+	for (const element of document.getElementsByClassName("title")) {
+		const a = element.getElementsByTagName('a')[0]
 		if (a.getAttribute("href") == `#${path}`) {
-			a.classList.add("selected")
+			element.classList.add("selected")
+		} else {
+			element.classList.remove("selected")
+		}
+	}
+
+	for (const service in config.services) {
+		console.log(service, options[service].enabled)
+		if (options[service].enabled) {
+			document.getElementById(`${service}-link`).style.opacity = 1
 		} else {
-			a.classList.remove("selected")
+			document.getElementById(`${service}-link`).style.opacity = 0.4
 		}
 	}
 
@@ -89,13 +99,11 @@ async function loadPage(path) {
 		const service = path;
 
 		divs[service] = {}
-		options = await utils.getOptions()
+
 		for (const option in config.services[service].options) {
 			divs[service][option] = document.getElementById(`${service}-${option}`)
 			if (typeof config.services[service].options[option] == "boolean") divs[service][option].checked = options[service][option]
 			else divs[service][option].value = options[service][option]
-
-
 			divs[service][option].addEventListener("change", async () => {
 				let options = await utils.getOptions()
 				if (typeof config.services[service].options[option] == "boolean")
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index a0fc432e..02ef9b40 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -50,6 +50,15 @@ div.some-block input[type="checkbox"] {
 	text-decoration: none;
 	width: min-content;
 	color: var(--text);
+	transition: .1s;
+}
+
+.title:hover {
+	opacity: 1 !important;
+}
+
+.title:hover a {
+	color: var(--active);
 }
 
 img,
@@ -147,7 +156,11 @@ section.links a {
 }
 
 section.links a:hover,
-section.links a.selected {
+section.links .selected {
+	opacity: 1 !important;
+}
+
+section.links .selected a {
 	color: var(--active);
 }
 
diff --git a/src/pages/widgets/links.pug b/src/pages/widgets/links.pug
index 253177f9..318c72f9 100644
--- a/src/pages/widgets/links.pug
+++ b/src/pages/widgets/links.pug
@@ -5,7 +5,7 @@ section(class="links" id="links")
             span(data-localise="__MSG_general__") General
 
     each val, key in services
-        div(class="title")
+        div(class="title" id=`${key}-link`)
             a(href="#"+key)
                 if services[key].imageType == 'svgMono'
                     img(class='dark' src=`/assets/images/${key}-icon.svg`)