initial draft for redesign of the mod list

The current design for the installed mods is not exactly the best. And
it has been due for a redesign for quite a while, I'm finally starting
work on this.

13 files changed, 268 insertions, 262 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
new file mode 100644
index 0000000..5c4019c
--- /dev/null
+++ b/src/app/css/grid.css
@@ -0,0 +1,148 @@
+.grid .el, .popup .misc, .popup .loading {
+	--spacing: calc(var(--padding) / 2);
+	--height: calc(var(--padding) * 3.5);
+	--mischeight: calc(var(--padding) * 1.5);
+
+	animation-duration: 0.15s;
+	animation-iteration-count: 1;
+	animation-name: fadein;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease-in-out;
+
+	opacity: 0.0;
+	transition: 0.15s ease-in-out;
+}
+
+.grid .el, .popup #search,
+.popup #close, .popup .misc button,
+.option .actions select, .option .actions input {
+	color: white;
+	display: flex;
+	align-items: center;
+	height: var(--height);
+	margin: var(--spacing);
+	padding: var(--spacing);
+	background: var(--selbg);
+	border-radius: var(--spacing);
+	width: calc(50% - var(--spacing) * 4);
+}
+
+.popup .misc, .popup #search, .option .actions input {
+	--height: var(--mischeight);
+}
+
+.popup .misc {
+	display: flex;
+}
+
+.popup .misc.vertical {
+	display: block;
+}
+
+.popup .misc.fixed {
+	width: 100%;
+	position: fixed;
+}
+
+.popup #search,
+.option .actions input,
+.option .actions select {
+	border: none;
+	outline: none;
+	transition: filter 0.15s ease-in-out;
+	width: calc(100% - var(--spacing) * 2);
+}
+
+.popup #search:focus, 
+.option .actions input:focus,
+.option .actions button:active {
+	filter: brightness(1.5);
+}
+
+.popup .misc button {
+	--height: calc(var(--padding) * 1.5);
+
+	padding: 0px;
+	margin-left: 0px;
+	padding: 0px !important;
+	width: var(--height) !important;
+}
+
+.popup .misc button img {
+	opacity: 0.6;
+	width: var(--height);
+	transform: scale(0.5);
+	height: var(--height) !important;
+}
+
+.popup .misc button:last-child {
+	margin-left: 0px !important;
+}
+
+.popup#preview #close,
+.popup .misc.vertical button {
+	margin: var(--spacing) var(--spacing) 0 auto !important;
+}
+
+.popup .loading {
+	width: 100%;
+	color: white;
+	display: flex;
+	position: absolute;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	height: calc(100% - var(--mischeight) - var(--height));
+}
+
+.popup .message {
+	color: white;
+	text-align: center;
+	margin: var(--padding);
+	width: calc(100% - var(--padding));
+}
+
+.grid .el .image, .grid .el .image img {
+	width: var(--height);
+	height: var(--height);
+	margin-right: var(--spacing);
+	border-radius: var(--spacing);
+}
+
+.grid .el .image img.blur {
+	z-index: -1;
+    position: relative;
+    filter: blur(10px);
+    top: calc(var(--height) * -1 + 5px);
+}
+
+.grid .el .text {
+	overflow: hidden;
+}
+
+.grid .el .title, .grid .el .description {
+	height: 1.2em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.grid .el .title {
+	font-size: 1.2em;
+	font-weight: 700;
+}
+
+.popup .message #loadmore {
+	background: rgb(var(--blue2));
+}
+
+.grid .el .description {font-size: 0.8em}
+.grid .el button {
+	background: rgb(var(--blue));
+	margin-top: var(--spacing);
+}
+
+.grid .el button.info {
+	background: rgb(var(--blue2));
+}
+
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 6e7b578..5698179 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -242,14 +242,6 @@
 	background: rgb(var(--red)) !important;
 }
 
-#installmod {background: rgb(var(--blue))}
-#findmod {background: rgb(var(--blue2))}
-
-#togglemod {background: rgb(var(--orange))}
-#toggleall {background: rgb(var(--orange2))}
-
-#removemod {background: rgb(var(--red))}
-#removeall {background: rgb(var(--red2))}
 button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
@@ -270,13 +262,15 @@ code {
 }
 
 #nsMods .line {
+	width: 100%;
 	display: flex;
 	align-items: center;
+	margin: calc(var(--padding) / 2);
 	margin-top: calc(var(--padding) / 2);
 }
 
 #modsdiv {
-	height: 50vh;
+	height: 80vh;
 	overflow-y: scroll;
 	border-radius: 5px;
 	background: var(--bg);
diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 826955b..70a39a6 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -64,11 +64,6 @@
 	100% {opacity: 1.0}
 }
 
-#browserEntries {
-	display: flex;
-	flex-wrap: wrap;
-}
-
 .popup webview {
 	width: 78%;
 	margin: 0 auto;
@@ -82,154 +77,6 @@
 	filter: opacity(0.0);
 	pointer-events: none;
 }
-
-.popup .el, .popup .misc, .popup .loading {
-	--spacing: calc(var(--padding) / 2);
-	--height: calc(var(--padding) * 3.5);
-	--mischeight: calc(var(--padding) * 1.5);
-
-	animation-duration: 0.15s;
-	animation-iteration-count: 1;
-	animation-name: fadein;
-	animation-fill-mode: forwards;
-	animation-timing-function: ease-in-out;
-
-	opacity: 0.0;
-	transition: 0.15s ease-in-out;
-}
-
-.popup .el, .popup #search,
-.popup #close, .popup .misc button,
-.option .actions select, .option .actions input {
-	color: white;
-	display: flex;
-	align-items: center;
-	height: var(--height);
-	margin: var(--spacing);
-	padding: var(--spacing);
-	background: var(--selbg);
-	border-radius: var(--spacing);
-	width: calc(50% - var(--spacing) * 4);
-}
-
-.popup .misc, .popup #search, .option .actions input {
-	--height: var(--mischeight);
-}
-
-.popup .misc {
-	display: flex;
-}
-
-.popup .misc.vertical {
-	display: block;
-}
-
-.popup .misc.fixed {
-	width: 100%;
-	position: fixed;
-}
-
-.popup #search,
-.option .actions input,
-.option .actions select {
-	border: none;
-	outline: none;
-	transition: filter 0.15s ease-in-out;
-	width: calc(100% - var(--spacing) * 2);
-}
-
-.popup #search:focus, 
-.option .actions input:focus,
-.option .actions button:active {
-	filter: brightness(1.5);
-}
-
-.popup .misc button {
-	--height: calc(var(--padding) * 1.5);
-
-	padding: 0px;
-	margin-left: 0px;
-	padding: 0px !important;
-	width: var(--height) !important;
-}
-
-.popup .misc button img {
-	opacity: 0.6;
-	width: var(--height);
-	transform: scale(0.5);
-	height: var(--height) !important;
-}
-
-.popup .misc button:last-child {
-	margin-left: 0px !important;
-}
-
-.popup#preview #close,
-.popup .misc.vertical button {
-	margin: var(--spacing) var(--spacing) 0 auto !important;
-}
-
-.popup .loading {
-	width: 100%;
-	color: white;
-	display: flex;
-	position: absolute;
-	text-align: center;
-	align-items: center;
-	justify-content: center;
-	height: calc(100% - var(--mischeight) - var(--height));
-}
-
-.popup .message {
-	color: white;
-	text-align: center;
-	margin: var(--padding);
-	width: calc(100% - var(--padding));
-}
-
-.popup .el .image, .popup .el .image img {
-	width: var(--height);
-	height: var(--height);
-	margin-right: var(--spacing);
-	border-radius: var(--spacing);
-}
-
-.popup .el .image img.blur {
-	z-index: -1;
-    position: relative;
-    filter: blur(10px);
-    top: calc(var(--height) * -1 + 5px);
-}
-
-.popup .el .text {
-	overflow: hidden;
-}
-
-.popup .el .title, .popup .el .description {
-	height: 1.2em;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.popup .el .title {
-	font-size: 1.2em;
-	font-weight: 700;
-}
-
-.popup .message #loadmore {
-	background: rgb(var(--blue2));
-}
-
-.popup .el .description {font-size: 0.8em}
-.popup .el button {
-	background: rgb(var(--blue));
-	margin-top: var(--spacing);
-}
-
-.popup .el button.info {
-	background: rgb(var(--blue2));
-}
 /* } */
 
 /* settings popup { */
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 2d45b1d..6d7e223 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -60,3 +60,12 @@ a:hover {
 	color: black !important;
 	background: rgb(var(--red)) !important;
 }
+
+.blue {background: rgb(var(--blue)) !important}
+.blue2 {background: rgb(var(--blue2)) !important}
+
+.orange {background: rgb(var(--orange)) !important}
+.orange2 {background: rgb(var(--orange2)) !important}
+
+.red {background: rgb(var(--red)) !important}
+.red2 {background: rgb(var(--red2)) !important}
diff --git a/src/app/index.html b/src/app/index.html
index d2d70e1..9a571f0 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -226,19 +226,18 @@
 						</div>
 					</div>
 					<div id="nsMods" class="hidden section">
-						<div id="modsdiv">
-						</div>
+						<div id="modsdiv" class="grid">
 						<div class="line">
 							<div class="text" id="modcount">%%gui.mods%%</div>
 							<div class="buttons modbtns">
-								<button id="removemod" onclick="selected().remove()">%%gui.mods.remove%%</button>
-								<button id="removeall" onclick="selected(true).remove()">%%gui.mods.removeall%%</button>
-								<button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button>
-								<button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
-								<button id="installmod" onclick="installmod()">%%gui.mods.install%%</button>
-								<button id="findmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+								<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="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
+								<button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
 						</div>
+
+						</div>
 					</div>
 					<div id="nsRelease" class="hidden section"></div>
 				</div>
@@ -260,6 +259,7 @@
 
 		<script src="lang.js"></script>
 		<script src="main.js"></script>
+		<script src="js/mods.js"></script>
 		<script src="js/toast.js"></script>
 		<script src="js/browser.js"></script>
 		<script src="js/settings.js"></script>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index dee263b..cfd0c03 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -319,8 +319,13 @@ function BrowserEl(properties) {
 	}
 
 	let installstr = lang("gui.browser.install");
+	let normalized_mods = [];
 
-	if (normalize(modsdiv.innerText.split("\n")).includes(normalize(properties.title))) {
+	for (let i = 0; i < modsobj.all; i++) {
+		normalized_mods.push(normalize(mods_list[i].Name));
+	}
+
+	if (normalized_mods.includes(normalize(properties.title))) {
 		installstr = lang("gui.browser.reinstall");
 
 		for (let i = 0; i < modsobj.all.length; i++) {
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
new file mode 100644
index 0000000..39e904e
--- /dev/null
+++ b/src/app/js/mods.js
@@ -0,0 +1,81 @@
+var mods = {};
+
+mods.load = (mods_obj) => {
+	modcount.innerHTML = `${lang("gui.mods.count")} ${mods_obj.all.length}`;
+
+	let normalized_names = [];
+	
+	let set_mod = (mod) => {
+		let image_url = "";
+		let normalized_name = "mod-list-" + normalize(mod.Name);
+
+		normalized_names.push(normalized_name);
+
+		if (document.getElementById(normalized_name)) {
+			return;
+		}
+
+		let div = document.createElement("div");
+		div.classList.add("el");
+		div.id = normalized_name;
+
+		div.innerHTML += `
+			<div class="image">
+				<img src="${image_url}">
+				<img class="blur" src="${image_url}">
+			</div>
+			<div class="text">
+				<div class="title">${mod.Name}</div>
+				<div class="description">${mod.Description}</div>
+				<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 (! image_url) {
+			div.querySelector(".image").remove();
+		}
+
+		modsdiv.append(div);
+	}
+
+	for (let i = 0; i < mods_obj.all.length; i++) {
+		set_mod(mods_obj.all[i]);
+	}
+
+	let mod_els = document.querySelectorAll("#modsdiv .el");
+	for (let i = 0; i < mod_els.length; i++) {
+		if (! normalized_names.includes(mod_els[i].id)) {
+			mod_els[i].remove();
+		}
+	}
+}
+
+mods.remove = (mod) => {
+	if (mod.match(/^northstar\./)) {
+		if (! confirm(lang("gui.mods.required.confirm"))) {
+			return;
+		}
+	} else if (mod == "allmods") {
+		if (! confirm(lang("gui.mods.removeall.confirm"))) {
+			return;
+		}
+	}
+
+	ipcRenderer.send("remove-mod", mod);
+}
+
+mods.toggle = (mod) => {
+			if (mod.match(/^Northstar\./)) {
+				if (! confirm(lang("gui.mods.required.confirm"))) {
+					return;
+				}
+			} else if (mod == "allmods") {
+				if (! confirm(lang("gui.mods.toggleall.confirm"))) {
+					return;
+				}
+			}
+
+			ipcRenderer.send("toggle-mod", mod);
+}
diff --git a/src/app/main.css b/src/app/main.css
index 2750094..17ed3ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,3 +1,4 @@
+@import "css/grid.css";
 @import "css/dragui.css";
 @import "css/toasts.css";
 @import "css/popups.css";
@@ -105,3 +106,11 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
 .mod, #overlay, #modsdiv, #winbtns, .contentMenu {
 	-webkit-app-region: no-drag;
 }
+
+/* grids */
+
+.grid {
+	display: flex;
+	flex-wrap: wrap;
+}
+
diff --git a/src/app/main.js b/src/app/main.js
index 50160d0..5ac07de 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -157,69 +157,6 @@ ipcRenderer.on("unknown-error", (event, err) => {
 	console.error(err.stack)
 })
 
-let lastselected = "";
-function select(entry) {
-	let entries = document.querySelectorAll("#modsdiv .mod .modtext");
-
-	for (let i = 0; i < entries.length; i++) {
-		if (entries[i].innerHTML == entry) {
-			lastselected = entry;
-			entries[i].parentElement.classList.add("selected");
-		} else {
-			entries[i].parentElement.classList.remove("selected");
-		}
-	}
-}
-
-// Mod selection
-function selected(all) {
-	let selected = "";
-	if (all) {
-		selected = "allmods"
-	} else {
-		selected = document.querySelector(".mod.selected .modtext");
-		if (selected != null) {
-			selected = selected.innerHTML;
-		} else {
-			alert(lang("gui.mods.nothingselected"));
-			return {
-				remove: () => {},
-				toggle: () => {},
-			}
-		}
-	}
-
-	return {
-		remove: () => {
-
-			if (selected.match(/^Northstar\./)) {
-				if (! confirm(lang("gui.mods.required.confirm"))) {
-					return;
-				}
-			} else if (selected == "allmods") {
-				if (! confirm(lang("gui.mods.removeall.confirm"))) {
-					return;
-				}
-			}
-
-			ipcRenderer.send("remove-mod", selected);
-		},
-		toggle: () => {
-			if (selected.match(/^Northstar\./)) {
-				if (! confirm(lang("gui.mods.required.confirm"))) {
-					return;
-				}
-			} else if (selected == "allmods") {
-				if (! confirm(lang("gui.mods.toggleall.confirm"))) {
-					return;
-				}
-			}
-
-			ipcRenderer.send("toggle-mod", selected);
-		}
-	}
-}
-
 let installqueue = [];
 
 // Tells the main process to install a mod through the file selector
@@ -302,27 +239,11 @@ ipcRenderer.on("log", (event, msg) => {log(msg)})
 ipcRenderer.on("alert", (event, msg) => {alert(msg)})
 
 // Updates the installed mods
-ipcRenderer.on("mods", (event, mods) => {
-	modsobj = mods;
-	if (! mods) {return}
-
-	modcount.innerHTML = `${lang("gui.mods.count")} ${mods.all.length}`;
-	modsdiv.innerHTML = "";
-	
-	let newmod = (name, disabled) => {
-		if (disabled) {
-			disabled  = `<span class="disabled">${lang("gui.mods.disabledtag")}</span>`
-		} else {
-			disabled  = ""
-		}
-
-		modsdiv.innerHTML += `<div onclick="select('${name}')" class="mod"><span class="modtext">${name}</span>${disabled}</div>`;
-	}
-
-	for (let i = 0; i < mods.enabled.length; i++) {newmod(mods.enabled[i].Name)}
-	for (let i = 0; i < mods.disabled.length; i++) {newmod(mods.disabled[i].Name, " - Disabled")}
+ipcRenderer.on("mods", (event, mods_obj) => {
+	modsobj = mods_obj;
+	if (! mods_obj) {return}
 
-	select(lastselected);
+	mods.load(mods_obj);
 })
 
 // Updates version numbers
diff --git a/src/lang/de.json b/src/lang/de.json
index 305176b..e281ff5 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -56,9 +56,7 @@
 	"gui.mods.disabledtag": "Deaktiviert",
 	"gui.mods.install": "Installiere den Mod",
 	"gui.mods.find": "Suche nach Mods",
-	"gui.mods.toggle": "Aktiviere/Deaktiviere den Mod",
 	"gui.mods.toggleall": "Aktiviere/Deaktiviere alle Mods",
-	"gui.mods.remove": "Entferne den Mod",
 	"gui.mods.removeall": "Entferne alle Mods",
 	"gui.mods.nothingselected": "Es wurde kein Mod ausgewählt.",
 	"gui.mods.toggleall.confirm": "Das Deaktivieren aller Mods kann zum Deaktiveren von Mods führen die von Northstar benötigt werden. Bist du dir sicher das du diese Aktion durchführen willst?",
diff --git a/src/lang/en.json b/src/lang/en.json
index e383249..cfb294a 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -56,9 +56,7 @@
 	"gui.mods.disabledtag": "Disabled",
 	"gui.mods.install": "Install Mod",
 	"gui.mods.find": "Find Mods",
-	"gui.mods.toggle": "Toggle Mod",
 	"gui.mods.toggleall": "Toggle All",
-	"gui.mods.remove": "Remove Mod",
 	"gui.mods.removeall": "Remove All",
 	"gui.mods.nothingselected": "You've not selected a mod.",
 	"gui.mods.toggleall.confirm": "Toggling all mods could disable mods required for Northstar to function. Are you sure?",
diff --git a/src/lang/es.json b/src/lang/es.json
index b8b406b..64c3f01 100644
--- a/src/lang/es.json
+++ b/src/lang/es.json
@@ -56,9 +56,7 @@
 	"gui.mods.disabledtag": "Deshabilitado",
 	"gui.mods.install": "Instalar modificación",
 	"gui.mods.find": "Encontrar modificaciones",
-	"gui.mods.toggle": "Alternar modificación",
 	"gui.mods.toggleall": "Alternar todo",
-	"gui.mods.remove": "Remover modificación",
 	"gui.mods.removeall": "Remover todo",
 	"gui.mods.nothingselected": "No has seleccionado una modificación.",
 	"gui.mods.toggleall.confirm": "Alternar todo podría deshabilitar las modificaciones requeridas para que Northstar funcione. ¿Está seguro?",
diff --git a/src/lang/fr.json b/src/lang/fr.json
index a1f27a4..94c31c8 100644
--- a/src/lang/fr.json
+++ b/src/lang/fr.json
@@ -56,9 +56,7 @@
 	"gui.mods.disabledtag": "Désactivé",
 	"gui.mods.install": "Installer le mod",
 	"gui.mods.find": "Chercher des mods",
-	"gui.mods.toggle": "Activer/désactiver le mod",
 	"gui.mods.toggleall": "Activer/désactiver tous les mods",
-	"gui.mods.remove": "Supprimer le mod",
 	"gui.mods.removeall": "Tout supprimer",
 	"gui.mods.nothingselected": "Aucun mod n'est sélectionné.",
 	"gui.mods.toggleall.confirm": "Cette action pourrait désactiver des mods nécessaires au bon fonctionnement de Northstar. Souhaitez-vous faire cela ?",