diff options
| author | 0neGal <mail@0negal.com> | 2022-01-03 00:54:03 +0100 |
|---|---|---|
| committer | 0neGal <mail@0negal.com> | 2022-01-03 00:54:03 +0100 |
| commit | a210128d806bb1479c25198fa2399df99ee92bd0 (patch) | |
| tree | 08eea8ce17f3afcbeee85fa832ad46cc1cd44b20 | |
| parent | bf7bd0993714f20fd0ab360de956378113e1d9c2 (diff) | |
| download | Viper-a210128d806bb1479c25198fa2399df99ee92bd0.tar.gz Viper-a210128d806bb1479c25198fa2399df99ee92bd0.zip | |
improved visuals of disabled tag
| -rw-r--r-- | src/app/main.css | 16 | ||||
| -rw-r--r-- | src/app/main.js | 15 | ||||
| -rw-r--r-- | src/lang/en.json | 1 |
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", |