added: toggles for toggling mods in modlist

The new modlist now uses the same toggles found in the settings popup,
only here they're used to disable/enable mods. On top of this I also
fixed the "Toggle All" button not working. Forgot to change some stuff,
breaking it... oops...

6 files changed, 65 insertions, 40 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index 5c4019c..6622762 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -1,3 +1,5 @@
+@import "theming.css";
+
 .grid .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);
@@ -138,7 +140,6 @@
 
 .grid .el .description {font-size: 0.8em}
 .grid .el button {
-	background: rgb(var(--blue));
 	margin-top: var(--spacing);
 }
 
@@ -146,3 +147,12 @@
 	background: rgb(var(--blue2));
 }
 
+.grid .el .switch {
+	top: 3px;
+	position: relative;
+	background: var(--bg);
+}
+
+.grid .el .switch:not(.grid .el .switch.on)::after {
+	background: var(--selbg);
+}
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 8f47d0a..5147aaf 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -167,40 +167,6 @@
 	background: var(--selbg);
 }
 
-.switch {
-	width: 50px;
-	height: 25px;
-	border-radius: 50px;
-}
-
-.switch.on {
-	background: rgba(var(--red), 0.2) !important;
-}
-
-.switch::after {
-	left: -5px;
-	width: 15px;
-	height: 15px;
-	content: " ";
-	display: block;
-	background: red;
-	position: relative;
-	border-radius: 50px;
-	background: var(--bg);
-	transition: 0.2s ease-in-out;
-}
-
-.switch.on::after {
-	left: 15px;
-	width: 20px;
-	opacity: 0.5;
-	background: rgb(var(--red));
-}
-
-.switch.on:hover::after {
-	transform: scale(1.2);
-}
-
 .title {
 	display: flex;
 	margin-top: calc(var(--padding) * 2);
diff --git a/src/app/index.html b/src/app/index.html
index d9e8e14..0e96486 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -231,7 +231,7 @@
 							<div class="text" id="modcount">%%gui.mods%%</div>
 							<div class="buttons modbtns">
 								<button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
-								<button id="toggleall" class="orange2" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
+								<button id="toggleall" class="orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
 								<button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
 								<button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index fcb79a2..05bf01d 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -362,7 +362,7 @@ function BrowserEl(properties) {
 		<div class="text">
 			<div class="title">${properties.title}</div>
 			<div class="description">${properties.description}</div>
-			<button class="install" onclick=''>${installstr}</button>
+			<button class="install blue" onclick=''>${installstr}</button>
 			<button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button>
 			<button class="visual">${properties.version}</button>
 			<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 39e904e..6c2fc22 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -11,7 +11,14 @@ mods.load = (mods_obj) => {
 
 		normalized_names.push(normalized_name);
 
-		if (document.getElementById(normalized_name)) {
+		let el = document.getElementById(normalized_name);
+		if (el) {
+			if (mod.Disabled) {
+				el.querySelector(".switch").classList.remove("on");
+			} else {
+				el.querySelector(".switch").classList.add("on");
+			}
+
 			return;
 		}
 
@@ -27,12 +34,21 @@ mods.load = (mods_obj) => {
 			<div class="text">
 				<div class="title">${mod.Name}</div>
 				<div class="description">${mod.Description}</div>
+				<button class="switch on"></button>
 				<button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
 				<button class="visual">${mod.Version}</button>
 				<button class="visual">by ${mod.Author || "Unknown"}</button>
 			</div>
 		`;
 
+		if (mod.Disabled) {
+			div.querySelector(".switch").classList.remove("on");
+		}
+
+		div.querySelector(".switch").addEventListener("click", () => {
+			mods.toggle(mod.Name);
+		})
+
 		if (! image_url) {
 			div.querySelector(".image").remove();
 		}
diff --git a/src/app/main.css b/src/app/main.css
index 17ed3ee..671be13 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -107,10 +107,43 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
 	-webkit-app-region: no-drag;
 }
 
-/* grids */
-
 .grid {
 	display: flex;
 	flex-wrap: wrap;
 }
 
+.switch {
+	width: 50px;
+	height: 25px;
+	border-radius: 50px;
+	background: var(--selbg);
+}
+
+.switch.on {
+	background: rgba(var(--red), 0.2) !important;
+}
+
+.switch::after {
+	left: -5px;
+	width: 15px;
+	height: 15px;
+	content: " ";
+	display: block;
+	background: red;
+	position: relative;
+	border-radius: 50px;
+	background: var(--bg);
+	transition: 0.2s ease-in-out;
+}
+
+.switch.on::after {
+	left: 15px;
+	width: 20px;
+	opacity: 0.5;
+	background: rgb(var(--red));
+}
+
+.switch.on:hover::after {
+	transform: scale(1.2);
+}
+