aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-01-30 23:22:41 +0100
committer0neGal <mail@0negal.com>2023-01-30 23:22:41 +0100
commit84cc46018664cee9d89d71ea75ba687a9171ab28 (patch)
tree43e71f3b8a1535aa1e6440dd0f7df001efb09749
parent67778e1ecab4747cf886e8ffcb6a11f96ccc279c (diff)
downloadViper-84cc46018664cee9d89d71ea75ba687a9171ab28.tar.gz
Viper-84cc46018664cee9d89d71ea75ba687a9171ab28.zip
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...
-rw-r--r--src/app/css/grid.css12
-rw-r--r--src/app/css/popups.css34
-rw-r--r--src/app/index.html2
-rw-r--r--src/app/js/browser.js2
-rw-r--r--src/app/js/mods.js18
-rw-r--r--src/app/main.css37
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);
+}
+