aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/app/css/grid.css1
-rw-r--r--src/app/css/launcher.css34
-rw-r--r--src/app/icons/down.pngbin0 -> 343 bytes
-rw-r--r--src/app/icons/downloads.pngbin0 -> 313 bytes
-rw-r--r--src/app/icons/open.pngbin0 -> 353 bytes
-rw-r--r--src/app/icons/redo.pngbin0 -> 754 bytes
-rw-r--r--src/app/icons/search.pngbin0 -> 569 bytes
-rw-r--r--src/app/icons/toggles.pngbin0 -> 754 bytes
-rw-r--r--src/app/icons/trash.pngbin0 -> 265 bytes
-rw-r--r--src/app/index.html20
-rw-r--r--src/app/js/browser.js31
-rw-r--r--src/app/js/mods.js6
12 files changed, 78 insertions, 14 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index d44784b..188f32a 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -78,6 +78,7 @@
}
.popup .misc button img {
+ margin: 0px;
opacity: 0.6;
width: var(--height);
transform: scale(0.5);
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 913e732..c43bce1 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -285,6 +285,40 @@
background: rgb(var(--red)) !important;
}
+button:has(img):not(img:only-child) {
+ top: 2px;
+ position: relative;
+ align-items: center;
+ display: inline-flex;
+ justify-content: center;
+}
+
+button:has(img):not(img:only-child) img {
+ width: 1em;
+ height: 1em;
+ height: fit-content;
+ margin-right: calc(var(--padding) / 3)
+}
+
+button:has(img):has(span) img {
+ opacity: 0.0;
+ transition: opacity 0.2s ease-in-out;
+}
+
+button:has(img):has(span):hover img {
+ opacity: 1.0;
+}
+
+button:has(img):has(span) span {
+ right: 0.8em;
+ position: relative;
+ transition: right 0.2s ease-in-out;
+}
+
+button:has(img):has(span):hover span {
+ right: 0.1em;
+}
+
button:disabled {
opacity: 0.5;
pointer-events: none;
diff --git a/src/app/icons/down.png b/src/app/icons/down.png
new file mode 100644
index 0000000..b1f9abd
--- /dev/null
+++ b/src/app/icons/down.png
Binary files differ
diff --git a/src/app/icons/downloads.png b/src/app/icons/downloads.png
new file mode 100644
index 0000000..8b10638
--- /dev/null
+++ b/src/app/icons/downloads.png
Binary files differ
diff --git a/src/app/icons/open.png b/src/app/icons/open.png
new file mode 100644
index 0000000..8569c81
--- /dev/null
+++ b/src/app/icons/open.png
Binary files differ
diff --git a/src/app/icons/redo.png b/src/app/icons/redo.png
new file mode 100644
index 0000000..6777696
--- /dev/null
+++ b/src/app/icons/redo.png
Binary files differ
diff --git a/src/app/icons/search.png b/src/app/icons/search.png
new file mode 100644
index 0000000..698545f
--- /dev/null
+++ b/src/app/icons/search.png
Binary files differ
diff --git a/src/app/icons/toggles.png b/src/app/icons/toggles.png
new file mode 100644
index 0000000..3f118d1
--- /dev/null
+++ b/src/app/icons/toggles.png
Binary files differ
diff --git a/src/app/icons/trash.png b/src/app/icons/trash.png
new file mode 100644
index 0000000..d915eb3
--- /dev/null
+++ b/src/app/icons/trash.png
Binary files differ
diff --git a/src/app/index.html b/src/app/index.html
index 9f0297d..016b708 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -290,10 +290,22 @@
<div class="line">
<div class="text" id="modcount">%%gui.mods.title%%</div>
<div class="buttons modbtns">
- <button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.remove_all%%</button>
- <button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggle_all%%</button>
- <button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button>
- <button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+ <button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">
+ <img src="icons/trash.png">
+ %%gui.mods.remove_all%%
+ </button>
+ <button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">
+ <img src="icons/toggles.png">
+ %%gui.mods.toggle_all%%
+ </button>
+ <button id="installmod" class="bg-blue" onclick="installmod()">
+ <img src="icons/downloads.png">
+ %%gui.mods.install%%
+ </button>
+ <button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">
+ <img src="icons/search.png">
+ %%gui.mods.find%%
+ </button>
</div>
</div>
</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index caeb8c2..06dc244 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -232,7 +232,11 @@ var Browser = {
return
}
- Browser.msg(`<button id="loadmore">${lang("gui.browser.load_more")}</button>`);
+ Browser.msg(`<button id="loadmore">` +
+ `<img src="icons/down.png">` +
+ `<span>${lang("gui.browser.load_more")}</span>` +
+ `</button>`);
+
loadmore.addEventListener("click", () => {
Browser.loadpkgs(pkgs);
Browser.endoflist(! pkgs.length);
@@ -261,18 +265,23 @@ var Browser = {
Browser.loading(lang("gui.browser.no_results"));
}
},
- setbutton: (mod, string) => {
+ setbutton: (mod, string, icon) => {
mod = normalize(mod);
if (browserEntries.querySelector(`#mod-${mod}`)) {
let elems = browserEntries.querySelectorAll(`.el#mod-${mod}`);
for (let i = 0; i < elems.length; i++) {
+ if (icon) {
+ string = `<img src="icons/${icon}.png">` +
+ `<span>${string}</span>`;
+ }
+
elems[i].querySelector(".text button").innerHTML = string;
}
} else {
let make = (str) => {
if (browserEntries.querySelector(`#mod-${str}`)) {
- return Browser.setbutton(str, string);
+ return Browser.setbutton(str, string, icon);
} else {
return false;
}
@@ -392,6 +401,7 @@ function BrowserEl(properties) {
browserEntries.innerHTML = "";
}
+ let installicon = "downloads";
let installstr = lang("gui.browser.install");
let normalized_mods = [];
@@ -400,9 +410,11 @@ function BrowserEl(properties) {
}
if (properties.pkg.local_version) {
+ installicon = "redo";
installstr = lang("gui.browser.reinstall");
if (properties.pkg.has_update) {
+ installicon = "downloads";
installstr = lang("gui.browser.update");
}
}
@@ -420,10 +432,12 @@ function BrowserEl(properties) {
<div class="title">${properties.title}</div>
<div class="description">${properties.description}</div>
<button class="install bg-blue" onclick=''>
- ${installstr}
+ <img src="icons/${installicon}.png">
+ <span>${installstr}</span>
</button>
<button class="info" onclick="Preview.set('${properties.url}')">
- ${lang('gui.browser.view')}
+ <img src="icons/open.png">
+ <span>${lang('gui.browser.view')}</span>
</button>
<button class="visual">${properties.version}</button>
@@ -454,9 +468,10 @@ function add_recent_toast(name, timeout = 3000) {
ipcRenderer.on("removed-mod", (event, mod) => {
setButtons(true);
- Browser.setbutton(mod.name, lang("gui.browser.install"));
+ Browser.setbutton(mod.name, lang("gui.browser.install"), "downloads");
+
if (mod.manifest_name) {
- Browser.setbutton(mod.manifest_name, lang("gui.browser.install"));
+ Browser.setbutton(mod.manifest_name, lang("gui.browser.install"), "downloads");
}
})
@@ -503,7 +518,7 @@ ipcRenderer.on("installed-mod", (event, mod) => {
let name = mod.fancy_name || mod.name;
setButtons(true);
- Browser.setbutton(name, lang("gui.browser.reinstall"));
+ Browser.setbutton(name, lang("gui.browser.reinstall"), "redo");
if (mod.malformed) {
new Toast({
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 445fc84..182bddf 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -55,10 +55,12 @@ mods.load = (mods_obj) => {
<div class="description">${mod_details.description}</div>
<button class="switch on orange"></button>
<button class="update bg-blue">
- ${lang("gui.browser.update")}
+ <img src="icons/downloads.png">
+ <span>${lang("gui.browser.update")}</span>
</button>
<button class="bg-red remove">
- ${lang("gui.mods.remove")}
+ <img src="icons/trash.png">
+ <span>${lang("gui.mods.remove")}</span>
</button>
<button class="visual">${version.format(mod_details.version)}</button>
generated by cgit v1.2.3 (git 2.39.1) at 2024-10-16 15:29:16 +0000