aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-02-19 14:25:18 +0100
committerGitHub <noreply@github.com>2022-02-19 14:25:18 +0100
commit39da6eeecdb184e05f93ad1a8aaa1a2a95df333a (patch)
tree74b6be3a0edebe8df31c95d337ec63a64433f053 /src/app
parentee7dab5b056e254bff828a9b9f6d77be2287b935 (diff)
parent9e539d3d3df62df39b9a67ecf1c24734d6f8779b (diff)
downloadViper-39da6eeecdb184e05f93ad1a8aaa1a2a95df333a.tar.gz
Viper-39da6eeecdb184e05f93ad1a8aaa1a2a95df333a.zip
Merge pull request #81 from 0neGal/drag-drop
feat: drag and drop to install mods
Diffstat (limited to 'src/app')
-rw-r--r--src/app/icons/download.pngbin0 -> 2200 bytes
-rw-r--r--src/app/index.html6
-rw-r--r--src/app/main.css58
-rw-r--r--src/app/main.js33
4 files changed, 95 insertions, 2 deletions
diff --git a/src/app/icons/download.png b/src/app/icons/download.png
new file mode 100644
index 0000000..189c50d
--- /dev/null
+++ b/src/app/icons/download.png
Binary files 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 @@
<div id="close" onclick="ipcRenderer.send('exit')"></div>
</div>
+ <div id="dragUI">
+ <div id="dragitems">
+ <div id="icon"></div>
+ <div id="text">%%gui.mods.dragdrop%%</div>
+ </div>
+ </div>
<div id="overlay" onclick="Browser.toggle(false)"></div>
<div id="browser">
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();