Merge pull request #81 from 0neGal/drag-drop

feat: drag and drop to install mods

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
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();