From ee7dab5b056e254bff828a9b9f6d77be2287b935 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Thu, 17 Feb 2022 23:07:18 +0100 Subject: fixed buttons not re-enabling when closing install If you closed the file selection window after clicking the "Install Mod" button it would improperly try to install "nothing", and therefore never re-enable the buttons, this is now fixed. --- src/app/main.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/app/main.js') diff --git a/src/app/main.js b/src/app/main.js index 169f86f..7c71c9d 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -78,6 +78,8 @@ function setButtons(state) { disablearray(document.querySelectorAll("#browser #browserEntries .text button")) } +ipcRenderer.on("setbuttons", (event, state) => {setButtons(state)}) + // Frontend part of updating Northstar ipcRenderer.on("ns-update-event", (event, key) => { document.getElementById("update").innerText = `(${lang(key)})`; -- cgit v1.2.3 From 78a83334f42294fdc0e36c2c44e1fbff7369fd7c Mon Sep 17 00:00:00 2001 From: 0neGal Date: Fri, 18 Feb 2022 22:13:08 +0100 Subject: basic drag and drop support Since apparently dragleave and dragenter don't quite work as intended we have to resort to this obscure method which should work just fine on the user's end. --- src/app/icons/download.png | Bin 0 -> 2200 bytes src/app/index.html | 6 +++++ src/app/main.css | 58 ++++++++++++++++++++++++++++++++++++++++++++- src/app/main.js | 33 +++++++++++++++++++++++++- src/index.js | 2 ++ src/lang/en.json | 1 + 6 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 src/app/icons/download.png (limited to 'src/app/main.js') diff --git a/src/app/icons/download.png b/src/app/icons/download.png new file mode 100644 index 0000000..189c50d Binary files /dev/null and b/src/app/icons/download.png differ diff --git a/src/app/index.html b/src/app/index.html index 8222416..b5fc8cb 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -14,6 +14,12 @@
+
+
+
+
%%gui.mods.dragdrop%%
+
+
diff --git a/src/app/main.css b/src/app/main.css index a532490..dcc4e8a 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -38,11 +38,15 @@ body { margin: 0; overflow: hidden; - user-select: none; } body, button, input {font-family: "Roboto", sans-serif} +body, button, img, a { + -webkit-user-drag: none; + user-select: none; +} + button {outline: none} b, strong {font-weight: 700} body, input, button {font-weight: 500} @@ -612,6 +616,58 @@ code { font-weight: 600; } +#dragUI { + top: 0; + left: 0; + right: 0; + bottom: 0; + color: white; + opacity: 0.0; + position: fixed; + z-index: 1000000; + pointer-events: none; + background: var(--bg); + backdrop-filter: blur(15px); + transition: 0.1s ease-in-out; +} + +#dragUI.shown { + opacity: 1.0; + pointer-events: all; +} + +#dragUI #dragitems { + --size: 25vw; + top: 50%; + left: 50%; + opacity: 0.6; + position: absolute; + text-align: center; + width: var(--size); + height: var(--size); + margin-top: calc(var(--size) / 2 * -1); + margin-left: calc(var(--size) / 2 * -1); +} + +#dragUI #dragitems #icon { + width: 100%; + height: 100%; + filter: invert(1); + transform: scale(0.45); + background-size: cover; + background-image: url("icons/download.png"); + transition: 0.1s ease-in-out; +} + +#dragUI.shown #dragitems #icon { + transform: scale(0.5); +} + +#dragUI #dragitems #text { + top: -5vw; + position: relative; +} + /* drag control */ #bgHolder, diff --git a/src/app/main.js b/src/app/main.js index 7c71c9d..97937a9 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -158,12 +158,18 @@ function selected(all) { } } -// Tells the main process to install a mod +// Tells the main process to install a mod through the file selector function installmod() { setButtons(false); ipcRenderer.send("installmod") } +// Tells the main process to directly install a mod from this path +function installFromPath(path) { + setButtons(false); + ipcRenderer.send("installfrompath", path) +} + // Tells the main process to install a mod from a URL function installFromURL(url) { setButtons(false); @@ -244,6 +250,31 @@ ipcRenderer.on("wrongpath", () => { setlang(); +let dragtimer; +document.addEventListener("dragover", (e) => { + e.preventDefault(); + e.stopPropagation(); + dragUI.classList.add("shown"); + + clearTimeout(dragtimer); + dragtimer = setTimeout(() => { + dragUI.classList.remove("shown"); + }, 5000) +}); + +document.addEventListener("mouseover", (e) => { + clearTimeout(dragtimer); + dragUI.classList.remove("shown"); +}); + +document.addEventListener("drop", (e) => { + event.preventDefault(); + event.stopPropagation(); + + dragUI.classList.remove("shown"); + installFromPath(event.dataTransfer.files[0].path) +}); + document.body.addEventListener("click", event => { if (event.target.tagName.toLowerCase() === "a" && event.target.protocol != "file:") { event.preventDefault(); diff --git a/src/index.js b/src/index.js index 344ac6c..e44b549 100644 --- a/src/index.js +++ b/src/index.js @@ -43,6 +43,7 @@ function start() { ipcMain.on("exit", () => {process.exit(0)}) ipcMain.on("minimize", () => {win.minimize()}) + ipcMain.on("installfrompath", (event, path) => {utils.mods.install(path)}) ipcMain.on("installfromurl", (event, url) => {utils.mods.installFromURL(url)}) ipcMain.on("winLog", (event, ...args) => {win.webContents.send("log", ...args)}); ipcMain.on("winAlert", (event, ...args) => {win.webContents.send("alert", ...args)}); @@ -173,6 +174,7 @@ if (cli.hasArgs()) { cli.init(); } } else { + app.disableHardwareAcceleration(); app.on("ready", () => { app.setPath("userData", path.join(app.getPath("cache"), app.name)); start(); diff --git a/src/lang/en.json b/src/lang/en.json index 27630ec..45bf7c0 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -62,6 +62,7 @@ "gui.mods.extracting": "Extracting mod...", "gui.mods.installing": "Installing mod...", "gui.mods.installedmod": "Installed mod!", + "gui.mods.dragdrop": "Drag and drop a mod to install", "gui.browser.info": "Info", "gui.browser.madeby": "by", -- cgit v1.2.3 From 3a2f9fac72d141f6a5e2e56133a5ae77d6972680 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 20 Feb 2022 20:31:50 +0100 Subject: initial work on settings page This only has the actual UI for the settings page in place, no actual functionality has been implemented yet. I made several changes not directly related to the settings page, such as changes the CSS color variables to use RGB, as to easily add an alpha channel to colors. I also changed the way the Browser is toggled in some respects and many other changes that makes it easy to re-use the browser code to create the settings UI --- src/app/browser.js | 4 -- src/app/icons/apply.png | Bin 0 -> 2555 bytes src/app/icons/settings.png | Bin 0 -> 2496 bytes src/app/index.html | 50 ++++++++++++++++- src/app/main.css | 134 +++++++++++++++++++++++++++++++++------------ src/app/main.js | 7 +++ src/app/settings.js | 46 ++++++++++++++++ 7 files changed, 198 insertions(+), 43 deletions(-) create mode 100644 src/app/icons/apply.png create mode 100644 src/app/icons/settings.png create mode 100644 src/app/settings.js (limited to 'src/app/main.js') diff --git a/src/app/browser.js b/src/app/browser.js index ded12fa..275e16e 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -104,10 +104,6 @@ var Browser = { } } -document.body.addEventListener("keyup", (e) => { - if (e.key == "Escape") {Browser.toggle(false)} -}) - function BrowserElFromObj(obj) { let pkg = {...obj, ...obj.versions[0]}; diff --git a/src/app/icons/apply.png b/src/app/icons/apply.png new file mode 100644 index 0000000..915f809 Binary files /dev/null and b/src/app/icons/apply.png differ diff --git a/src/app/icons/settings.png b/src/app/icons/settings.png new file mode 100644 index 0000000..3f7715a Binary files /dev/null and b/src/app/icons/settings.png differ diff --git a/src/app/index.html b/src/app/index.html index b5fc8cb..5ca9306 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -10,6 +10,7 @@
+
@@ -21,9 +22,51 @@
-
-
-
+
+ + +