aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-01-03 00:54:03 +0100
committer0neGal <mail@0negal.com>2022-01-03 00:54:03 +0100
commita210128d806bb1479c25198fa2399df99ee92bd0 (patch)
tree08eea8ce17f3afcbeee85fa832ad46cc1cd44b20
parentbf7bd0993714f20fd0ab360de956378113e1d9c2 (diff)
downloadViper-a210128d806bb1479c25198fa2399df99ee92bd0.tar.gz
Viper-a210128d806bb1479c25198fa2399df99ee92bd0.zip
improved visuals of disabled tag
-rw-r--r--src/app/main.css16
-rw-r--r--src/app/main.js15
-rw-r--r--src/lang/en.json1
3 files changed, 24 insertions, 8 deletions
diff --git a/src/app/main.css b/src/app/main.css
index 8776ec9..60a05c6 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -6,6 +6,10 @@
--boxbackground: #666E7F;
--subforeground: #AFAFAF;
--btnforeground: var(--foreground);
+
+ --red: #C7777F;
+ --blue: #81A1C1;
+ --yellow: #ECD19A;
}
@media (prefers-color-scheme: light) {
@@ -60,6 +64,12 @@ nobr {white-space: nowrap}
.mod.selected {background: var(--background)}
+.mod .disabled {
+ color: var(--red);
+ position: absolute;
+ right: calc(var(--padding) * 2.5);
+}
+
.buttons {
text-align: right;
margin-left: auto;
@@ -96,7 +106,7 @@ button:active {
#setpath {background: #5E81AC}
#vanilla, #exit {background: #656E7F}
-#update, #installmod {background: #81A1C1}
-#togglemod, #toggleall {background: #ECD19A}
-#northstar, #removeall, #removemod {background: #C7777F}
+#update, #installmod {background: var(--blue)}
+#togglemod, #toggleall {background: var(--yellow)}
+#northstar, #removeall, #removemod {background: var(--red)}
button:disabled {background: var(--disabled) !important; opacity: 0.5}
diff --git a/src/app/main.js b/src/app/main.js
index f903c29..897c82c 100644
--- a/src/app/main.js
+++ b/src/app/main.js
@@ -47,7 +47,7 @@ function setButtons(state) {
let lastselected = "";
function select(entry) {
- let entries = document.querySelectorAll("#modsdiv .mod span");
+ let entries = document.querySelectorAll("#modsdiv .mod .modtext");
for (let i = 0; i < entries.length; i++) {
if (entries[i].innerHTML == entry) {
@@ -64,7 +64,7 @@ function selected(all) {
if (all) {
selected = "allmods"
} else {
- selected = document.querySelector(".mod.selected span");
+ selected = document.querySelector(".mod.selected .modtext");
if (selected != null) {
selected = selected.innerHTML;
} else {
@@ -110,9 +110,14 @@ ipcRenderer.on("mods", (event, mods) => {
modcount.innerHTML = `${lang("gui.mods.count")} ${mods.all.length}`;
modsdiv.innerHTML = "";
- let newmod = (name, extra) => {
- if (! extra) {extra = ""}
- modsdiv.innerHTML += `<div onclick="select('${name}')" class="mod"><span>${name}</span>${extra}</div>`;
+ 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)}
diff --git a/src/lang/en.json b/src/lang/en.json
index 20f97f2..7c68542 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -30,6 +30,7 @@
"gui.mods": "Mods",
"gui.mods.count": "Mods Installed:",
+ "gui.mods.disabledtag": "Disabled",
"gui.mods.install": "Install Mod",
"gui.mods.toggle": "Toggle Mod",
"gui.mods.toggleall": "Toggle All",