Merge pull request #129 from RickyDane/task/drag_over_folder_feedback

Drag over folder with border for more feedback + drag into the file explorer now show the move or copy context menu + minor fixes
RickyDane · Aug 16, 2024 · e59e1b0 · e59e1b0
2 parents 63195d2 + ec7c1c8
commit e59e1b0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -514,7 +514,7 @@ async fn open_dir(path: String) -> bool {
 }
 
 #[tauri::command]
-async fn go_back(is_dual_pane: bool) -> Vec<FDir> {
+async fn go_back(is_dual_pane: bool) {
     unsafe {
         if PATH_HISTORY.len() > 1 && !is_dual_pane {
             let last_path = &PATH_HISTORY[PATH_HISTORY.len() - 2];
@@ -525,7 +525,6 @@ async fn go_back(is_dual_pane: bool) -> Vec<FDir> {
             let _ = set_dir("./../".into()).await;
         }
     }
-    return list_dirs().await;
 }
 
 #[tauri::command]

diff --git a/ui/main_logic.js b/ui/main_logic.js
@@ -227,6 +227,9 @@ function closeAllPopups() {
 		IsCopyToCut = false;
 	}
 	$(".path-item")?.css("opacity", "1");
+	$(".site-nav-bar-button").css("border", "1px solid transparent");
+	$(".item-link").css("border", "1px solid transparent");
+	$(".path-item").css("border", "1px solid transparent");
 }
 // Close context menu or new folder input dialog when click elsewhere
 document.addEventListener("mousedown", (e) => {
@@ -288,6 +291,9 @@ document.addEventListener("mousedown", (e) => {
 	if (IsPopUpOpen === true && !e.target.classList.contains("input-dialog") && !e.target.classList.contains("input-dialog-headline") && !e.target.classList.contains("text-input")) {
 		closeInputDialogs();
 	}
+	$(".site-nav-bar-button").css("border", "1px solid transparent");
+	$(".item-link").css("border", "1px solid transparent");
+	$(".path-item").css("border", "1px solid transparent");
 });
 
 // Open context menu for pasting for example
@@ -1069,14 +1075,16 @@ async function showItems(items, dualPaneSide = "", millerCol = 1) {
 		item.addEventListener("dragover", (e) => {
 			MousePos = [e.clientX, e.clientY];
 			if (item.getAttribute("itemisdir") == "1") {
-				item.style.opacity = "0.5";
 				if (!ArrSelectedItems.includes(item)) {
+					item.style.opacity = "0.5";
+					item.style.border = "1px solid var(--textColor)";
 					DraggedOverElement = item;
 				}
 			}
 		});
 		item.addEventListener("dragleave", () => {
 			item.style.opacity = "1";
+			item.style.border = "1px solid transparent";
 		});
 		// :item_right_click :context_menu
 		// Open context menu when right-clicking on file/folder
@@ -1632,14 +1640,16 @@ async function addSingleItem(item, dualPaneSide = "", millerCol = 1, itemIndex =
 	itemLink.addEventListener("dragover", (e) => {
 		MousePos = [e.clientX, e.clientY];
 		if (itemLink.getAttribute("itemisdir") == "1") {
-			itemLink.style.opacity = "0.5";
 			if (!ArrSelectedItems.includes(itemLink)) {
+				itemLink.style.opacity = "0.5";
+				itemLink.style.border = "1px solid var(--textColor)";
 				DraggedOverElement = itemLink;
 			}
 		}
 	});
 	itemLink.addEventListener("dragleave", () => {
 		itemLink.style.opacity = "1";
+		itemLink.style.border = "1px solid transparent";
 	});
 	// :item_right_click :context_menu
 	// Open context menu when right-clicking on file/folder
@@ -1906,11 +1916,13 @@ async function setCurrentDir(currentDir = "", dualPaneSide = "") {
 				MousePos = [e.clientX, e.clientY-60];
 				e.preventDefault();
 				pathItem.style.opacity = 0.5;
+				pathItem.style.border = "1px solid var(--textColor)";
 				DraggedOverElement = pathItem;
 			}
 			pathItem.ondragleave = (e) => {
 				e.preventDefault();
 				pathItem.style.opacity = 1;
+				pathItem.style.border = "1px solid transparent";
 			}
 			let divider = document.createElement("i");
 			divider.className = "fa fa-chevron-right";
@@ -2951,18 +2963,8 @@ async function goBack() {
 		}
 	}
 	if (IsMetaDown == false) {
-		await invoke("go_back", { isDualPane: IsDualPaneEnabled }).then(async (items) => {
-			if (IsDualPaneEnabled == true) {
-				await showItems(items, SelectedItemPaneSide);
-				if (SelectedItemPaneSide == "left") {
-					selectItem(LeftPaneItemCollection.children[LeftPaneItemIndex]);
-				} else if (SelectedItemPaneSide == "right") {
-					selectItem(RightPaneItemCollection.children[RightPaneItemIndex]);
-				}
-			} else {
-				await showItems(items);
-			}
-		});
+		await invoke("go_back", { isDualPane: IsDualPaneEnabled });
+		await listDirectories();
 	}
 	await setCurrentDir(await getCurrentDir());
 }
@@ -4400,11 +4402,13 @@ async function insertSiteNavButtons() {
 		button.onclick = siteNavButtons[i][3]; // Support for dragging files to the directory
 		button.ondragover = (e) => {
 			button.style.opacity = "0.5";
+			button.style.border = "1px solid var(--textColor)";
 			DraggedOverElement = button;
 			MousePos = [e.clientX, e.clientY];
 		};
 		button.ondragleave = () => {
 			button.style.opacity = "1";
+			button.style.border = "1px solid transparent";
 		};
 		document.querySelector(".site-nav-bar").append(button);
 	}

diff --git a/ui/style.css b/ui/style.css
@@ -216,7 +216,7 @@ body {
 
 .site-nav-bar-button {
     background-color: transparent;
-    border: none;
+    border: 1px solid transparent;
     width: 100%;
     text-align: left;
     border-radius: 10px;
@@ -546,7 +546,7 @@ body {
     right: 0;
     background-color: var(--navBarColor);
     width: 100%;
-    padding: 5px 10px 5px 10px;
+    padding: 5px 10px 5px 20px;
     font-size: large;
     font-weight: bolder !important;
     display: flex;
@@ -902,7 +902,7 @@ button > svg {
 
 .item-link {
     background-color: transparent;
-    border: none;
+    border: 1px solid transparent;
     border-radius: 7.5px;
     transition: 0.1s ease-out;
     width: 100%;

diff --git a/ui/utils.js b/ui/utils.js
@@ -1,9 +1,9 @@
 const { listen } = window.__TAURI__.event;
 
 /* Drag and drop files into file explorer */
+// TODO: Make it simpler and not so shitty
 listen("tauri://file-drop", async (event) => {
   try {
-    console.log(event);
     ArrSelectedItems = [];
     ArrCopyItems = [];
     event.payload.forEach((item) => {
@@ -16,7 +16,21 @@ listen("tauri://file-drop", async (event) => {
     });
     if (IsFileOpIntern == false) {
       console.log("Extern file drop");
-      await pasteItem();
+      if (DraggedOverElement != null) {
+        let operation = await fileOperationContextMenu();
+        if (operation == "copy") {
+          await pasteItem(DraggedOverElement.getAttribute("itempath") ?? "");
+          await listDirectories();
+        } else if (operation == "move") {
+          IsCopyToCut = true;
+          await pasteItem(DraggedOverElement.getAttribute("itempath") ?? "");
+          IsCopyToCut = false;
+          await listDirectories();
+        }
+      }
+      else {
+        await pasteItem();
+      }
       CopyFileName = "";
       CopyFilePath = "";
       ArrCopyItems = [];
@@ -45,6 +59,7 @@ listen("tauri://file-drop", async (event) => {
     IsFileOpIntern = false;
     alert(error);
   }
+  FileOperation = "";
   resetProgressBar();
   IsFileOpIntern = false;
   document.querySelectorAll(".site-nav-bar-button").forEach((item) => {