feat: drop file/files/folder ux

Author: abose

src/drop-files.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Project Name</title>
     <script>
-        let windowLabelOfListener;
+        let windowLabelOfListener, dropMessage, dropProjectMessage, dropMessageOneFile;
         window.__TAURI__.event.listen('tauri://file-drop', (event) => {
             __TAURI__.window.appWindow.hide();
             if(!event || !event.payload || !event.payload.length || !windowLabelOfListener){
@@ -16,9 +16,32 @@
                 pathList: event.payload
             });
         });
+        window.__TAURI__.event.listen('tauri://file-drop-cancelled', (event) => {
+            __TAURI__.window.appWindow.hide();
+        });
+        window.__TAURI__.event.listen('tauri://file-drop-hover', (event) => {
+            if(!event || !event.payload || !dropProjectMessage || !dropMessage){
+                return;
+            }
+            if(event.payload.length === 1) {
+                window.__TAURI__.fs.readDir(event.payload[0])
+                    .then(async ()=>{
+                        // if a single folder is present, we treat it as drop project
+                        document.getElementById("dropMessage").innerText = dropProjectMessage
+                            .replace("{0}", await window.__TAURI__.path.basename(event.payload[0]));
+                    }).catch(()=>{
+                    document.getElementById("dropMessage").innerText = dropMessageOneFile;
+                })
+            } else {
+                document.getElementById("dropMessage").innerText = dropMessage;
+            }
+        });
         window.__TAURI__.event.listen("drop-attach-on-window", ({payload})=> {
             document.getElementById("projectName").innerText = payload.projectName;
-            document.getElementById("dropMessage").innerText = payload.dropMessage;
+            // dropMessage will be set on drag hover events depending on file/files/project
+            dropMessage = payload.dropMessage;
+            dropProjectMessage = payload.dropProjectMessage;
+            dropMessageOneFile = payload.dropMessageOneFile;
             windowLabelOfListener = payload.windowLabelOfListener;
         });
         window.addEventListener('mouseout', function(event) {

src/nls/root/strings.js

@@ -97,6 +97,9 @@ define({
     "ERROR_CREATING_FILE_TITLE": "Error Creating {0}",
     "ERROR_CREATING_FILE": "An error occurred when trying to create the {0} <span class='dialog-filename'>{1}</span>. {2}",
     "ERROR_MIXED_DRAGDROP": "Cannot open a folder at the same time as opening other files.",
+    "DROP_TO_OPEN_FILES": "Drop to open files",
+    "DROP_TO_OPEN_FILE": "Drop to open file",
+    "DROP_TO_OPEN_PROJECT": "Drop to open folder `{0}` as project",
 
     // User key map error strings
     "ERROR_KEYMAP_TITLE": "Error Reading User Key Map",

src/utils/DragAndDrop.js

@@ -168,6 +168,17 @@ define(function (require, exports, module) {
             });
     }
 
+    async function _focusAndOpenDroppedFiles(droppedPaths) {
+        try{
+            const currentWindow = window.__TAURI__.window.getCurrent();
+            await currentWindow.setAlwaysOnTop(true);
+            await currentWindow.setAlwaysOnTop(false);
+        } catch (e) {
+            console.error("Error focusing window");
+        }
+        openDroppedFiles(droppedPaths);
+    }
+
     if(Phoenix.isNativeApp){
         window.__TAURI__.event.listen('file-drop-event-phoenix', ({payload})=> {
             if(!payload || !payload.pathList || !payload.pathList.length || !payload.windowLabelOfListener
@@ -182,7 +193,7 @@ define(function (require, exports, module) {
                     console.error("Error resolving dropped path: ", droppedPath);
                 }
             }
-            openDroppedFiles(droppedVirtualPaths);
+            _focusAndOpenDroppedFiles(droppedVirtualPaths);
         });
     }
 
@@ -223,7 +234,9 @@ define(function (require, exports, module) {
         const isSamePosition = currentPosition.x === newPosition.x && currentPosition.y === newPosition.y;
         window.__TAURI__.event.emit("drop-attach-on-window", {
             projectName: window.path.basename(ProjectManager.getProjectRoot().fullPath),
-            dropMessage: "Drop files to open or drop a folder to open it as a project",
+            dropMessage: Strings.DROP_TO_OPEN_FILES,
+            dropMessageOneFile: Strings.DROP_TO_OPEN_FILE,
+            dropProjectMessage: Strings.DROP_TO_OPEN_PROJECT,
             windowLabelOfListener: window.__TAURI__.window.appWindow.label
         });
         if (isSameSize && isSamePosition && (await fileDropWindow.isVisible())) {