Create UI for moving files in filesystem

svelte/src/filesystem/filemanager/CreateDirectory.svelte

@@ -1,6 +1,7 @@
 <script>
 import { onMount, createEventDispatcher } from "svelte";
 import { fs_mkdir } from "../FilesystemAPI.js";
+import Button from "../../layout/Button.svelte";
 let dispatch = createEventDispatcher()
 
 export let state;
@@ -28,10 +29,10 @@ let create_dir = () => {
 onMount(() => { name_input.focus() })
 </script>
 
-<form class="create_dir highlight_shaded" on:submit|preventDefault={create_dir}>
+<form id="create_dir_form" class="create_dir" on:submit|preventDefault={create_dir}>
 	<img src="/res/img/mime/folder.png" class="icon" alt="icon"/>
-	<input class="dirname" type="text" style="width: 100%;" bind:this={name_input} bind:value={new_dir_name} />
+	<input class="dirname" type="text" bind:this={name_input} bind:value={new_dir_name} />
-	<input class="submit" type="submit" value="create"/>
+	<Button form="create_dir_form" type="submit" icon="create_new_folder" label="Create"/>
 </form>
 
 <style>
@@ -41,7 +42,8 @@ onMount(() => { name_input.focus() })
 	width: 100%;
 	max-width: 1000px;
 }
-.create_dir > img {
+.icon {
+	align-self: center;
 	height: 32px;
 	width: 32px;
 	flex: 0 0 auto;
@@ -49,7 +51,4 @@ onMount(() => { name_input.focus() })
 .dirname {
 	flex: 1 1 auto;
 }
-.submit {
-	flex: 0 0 auto;
-}
 </style>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -1,9 +1,10 @@
 <script>
-import { fs_delete } from './../FilesystemAPI.js'
+import { fs_delete_all, fs_rename } from './../FilesystemAPI.js'
 import { createEventDispatcher, onMount } from 'svelte'
 import CreateDirectory from './CreateDirectory.svelte'
 import ListView from './ListView.svelte'
 import GalleryView from './GalleryView.svelte'
+import Button from '../../layout/Button.svelte';
 let dispatch = createEventDispatcher()
 
 export let fs_navigator
@@ -28,6 +29,12 @@ const node_click = e => {
 	// other modules
 	if (mode === "viewing") {
 		fs_navigator.navigate(state.children[index].path, true)
+	} else if (mode === "moving") {
+		// If we are moving files we can only enter directories, and only if
+		// they're not selected
+		if (state.children[index].type === "dir") {
+			fs_navigator.navigate(state.children[index].path, true)
+		}
 	} else if (mode === "selecting") {
 		state.children[index].fm_selected = !state.children[index].fm_selected
 	}
@@ -38,6 +45,11 @@ const node_share_click = e => {
 	creating_dir = false
 	fs_navigator.navigate(state.children[index].id, true)
 }
+const node_select = e => {
+	let index = e.detail
+	mode = "selecting"
+	state.children[index].fm_selected = !state.children[index].fm_selected
+}
 
 const node_settings = e => {
 	edit_window.edit(state.children[e.detail], false)
@@ -55,11 +67,7 @@ const navigate_back = () => {
 	history.back()
 }
 
-const delete_selected = () => {
+const delete_selected = async () => {
-	if (mode !== "selecting") {
-		return
-	}
-
 	let count = state.children.reduce((acc, cur) => {
 		if (cur.fm_selected) {
 			acc++
@@ -77,27 +85,30 @@ const delete_selected = () => {
 
 	dispatch("loading", true)
 
+	try {
 		// Save all promises with deletion requests in an array
 		let promises = []
 		state.children.forEach(child => {
 			if (!child.fm_selected) { return }
-		promises.push(fs_delete(child.path))
+			promises.push(fs_delete_all(child.path))
 		})
 
 		// Wait for all the promises to finish
-	Promise.all(promises).catch((err) => {
+		await Promise.all(promises)
-		console.error(err)
+	} catch (err) {
-		alert("Delete failed: ", err)
+		console.log(err)
-	}).finally(() => {
+		alert("Delete failed: " + err.message + " ("+err.value+")")
-		mode = "viewing"
+	} finally {
+		viewing_mode()
 		fs_navigator.reload()
-	})
 	}
-const toggle_select = () => {
+}
-	if (mode !== "selecting") {
+const selecting_mode = () => {
 	mode = "selecting"
-		return
 }
+const viewing_mode = () => {
+	// Remove any items which we were moving
+	moving_items = []
 
 	// Unmark all the selected files and return to viewing mode
 	state.children.forEach((child, i) => {
@@ -117,6 +128,58 @@ const toggle_view = () => {
 
 	localStorage.setItem("directory_view", directory_view)
 }
+
+let moving_items = []
+
+// When the directory is reloaded we want to keep our selection, so this
+// function watches the children array for changes and updates the selection
+// when it changes
+$: update(state.children)
+const update = (children) => {
+	console.log("update")
+	// Highlight the files which were previously selected
+	for (let i = 0; i < children.length; i++) {
+		for (let j = 0; j < moving_items.length; j++) {
+			if (moving_items[j].path === children[i].path) {
+				console.log("selecting", children[i].path)
+				children[i].fm_selected = true
+			}
+		}
+	}
+}
+const move_start = () => {
+	moving_items = state.children.reduce((acc, child) => {
+		if (child.fm_selected) {
+			acc.push(child)
+		}
+		return acc
+	}, [])
+	mode = "moving"
+}
+const move_here = async () => {
+	dispatch("loading", true)
+
+	let target_dir = state.base.path + "/"
+
+	try {
+		// Save all promises with deletion requests in an array
+		let promises = []
+		moving_items.forEach(item => {
+			console.log("moving", item.path, "to", target_dir + item.name)
+			promises.push(fs_rename(item.path, target_dir + item.name))
+		})
+
+		// Wait for all the promises to finish
+		await Promise.all(promises)
+	} catch (err) {
+		console.log(err)
+		alert("Move failed: " + err.message + " ("+err.value+")")
+	} finally {
+		viewing_mode()
+		fs_navigator.reload()
+	}
+}
+
 onMount(() => {
 	if(typeof Storage !== "undefined") {
 		directory_view = localStorage.getItem("directory_view")
@@ -129,6 +192,7 @@ onMount(() => {
 
 <div class="container">
 	<div class="width_container">
+		{#if mode === "viewing"}
 			<div class="toolbar">
 				<button on:click={navigate_back} title="Back">
 					<i class="icon">arrow_back</i>
@@ -160,12 +224,10 @@ onMount(() => {
 					<button on:click={() => dispatch("upload_picker")} title="Upload files to this directory">
 						<i class="icon">cloud_upload</i>
 					</button>
-				<button on:click={() => {creating_dir = !creating_dir}} class:button_highlight={creating_dir} title="Make folder">
+					<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
-					<i class="icon">create_new_folder</i>
-				</button>
 
 					<button
-					on:click={toggle_select}
+						on:click={selecting_mode}
 						class:button_highlight={mode === "selecting"}
 						title="Select and delete files"
 					>
@@ -173,27 +235,28 @@ onMount(() => {
 					</button>
 				{/if}
 			</div>
-		<br/>
+		{:else if mode === "selecting"}
-
+			<div class="toolbar toolbar_edit">
-		{#if mode === "selecting"}
+				<Button click={viewing_mode} icon="close"/>
-			<div class="toolbar toolbar_edit highlight_green">
+				<div class="toolbar_spacer"></div>
-				<div style="flex: 1 1 auto; justify-self: center;">
+				<Button click={move_start} icon="drive_file_move" label="Move"/>
-					Select files or directories by clicking on them. Then you
-					can choose which action to perform
-				</div>
-				<div style="display: flex; flex-direction: row; justify-content: center;">
-					<button on:click={toggle_select}>
-						<i class="icon">undo</i>
-						Cancel
-					</button>
 				<button on:click={delete_selected} class="button_red">
 					<i class="icon">delete</i>
-						Delete selected
+					Delete
 				</button>
 			</div>
+		{:else if mode === "moving"}
+			<div class="toolbar toolbar_edit">
+				<Button click={viewing_mode} icon="close"/>
+				<Button click={navigate_up} disabled={state.path.length <= 1} icon="north"/>
+				<div class="toolbar_spacer">
+					Moving {moving_items.length} items
+				</div>
+				<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
+				<Button click={move_here} highlight icon="done" label="Move here"/>
 			</div>
-			<br/>
 		{/if}
+
 		{#if creating_dir}
 			<CreateDirectory
 				state={state}
@@ -210,6 +273,7 @@ onMount(() => {
 			on:node_click={node_click}
 			on:node_share_click={node_share_click}
 			on:node_settings={node_settings}
+			on:node_select={node_select}
 		/>
 	{:else if directory_view === "gallery"}
 		<GalleryView
@@ -217,6 +281,7 @@ onMount(() => {
 			show_hidden={show_hidden}
 			on:node_click={node_click}
 			on:node_settings={node_settings}
+			on:node_select={node_select}
 		/>
 	{/if}
 </div>
@@ -227,11 +292,11 @@ onMount(() => {
 	width: 100%;
 	padding: 0;
 	overflow: auto;
-	text-align: center;
 	display: block;
 }
 .width_container {
-	position: relative;
+	position: sticky;
+	top: 0;
 	display: block;
 	width: 100%;
 	margin: auto;
@@ -239,22 +304,21 @@ onMount(() => {
 	background: var(--shaded_background);
 }
 .toolbar {
-	position: sticky;
+	display: flex;
-	top: 0;
-	display: inline-flex;
 	flex-direction: row;
 	width: 100%;
 	max-width: 1000px;
-	margin: 0;
+	margin: auto;
 	padding: 0;
 	justify-content: center;
+	align-items: center;
 }
 .toolbar > * { flex: 0 0 auto; }
-.toolbar_spacer { flex: 1 1 auto; }
+.toolbar_spacer {
-
+	flex: 1 1 auto;
-@media(max-width: 800px) {
+	text-align: center;
-	.toolbar_edit {
-		flex-direction: column;
 }
+.toolbar_edit {
+	background-color: rgba(0, 255, 0, 0.05);
 }
 </style>

svelte/src/filesystem/filemanager/ListView.svelte

@@ -7,6 +7,14 @@ let dispatch = createEventDispatcher()
 
 export let state
 export let show_hidden = false
+
+let handle_longpress = (e, index) => {
+	// If this is a touch event we will select the item
+	if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
+		e.preventDefault()
+		dispatch("node_select", index)
+	}
+}
 </script>
 
 <div class="directory">
@@ -20,6 +28,7 @@ export let show_hidden = false
 		<a
 			href={"/d"+fs_encode_path(child.path)}
 			on:click|preventDefault={() => {dispatch("node_click", index)}}
+			on:contextmenu={e => handle_longpress(e, index)}
 			class="node"
 			class:node_selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -59,10 +68,7 @@ export let show_hidden = false
 
 .directory {
 	display: table;
-	position: relative;
-	overflow: hidden;
 	margin: 8px auto 16px auto;
-	text-align: left;
 	background: var(--body_color);
 	border-collapse: collapse;
 	border-radius: 8px;
@@ -106,7 +112,6 @@ td {
 }
 .node_name {
 	width: 100%;
-	overflow: hidden;
 	line-height: 1.2em;
 	word-break: break-all;
 }

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -34,7 +34,7 @@ const state_update = async (base) => {
 
 	// Render the viewer component and set the file type
 	await tick()
-	if (viewer) {
+	if (viewer && viewer.update) {
 		viewer.update()
 	}
 }

svelte/src/layout/Button.svelte

@@ -3,9 +3,11 @@ export let highlight = false;
 export let red = false;
 export let round = false;
 export let flat = false;
+export let disabled = false;
 export let icon = ""
 export let icon_small = false;
 export let label = ""
+export let title = ""
 export let link_href = ""
 export let link_target = ""
 export let click = e => {}
@@ -22,9 +24,11 @@ export let form = ""
 		class:button_red={red}
 		class:round
 		class:flat
+		title={title}
 		style={style}
 		type={type}
 		form={form}
+		disabled={disabled ? "disabled":""}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>
@@ -42,7 +46,9 @@ export let form = ""
 		class:button_red={red}
 		class:round
 		class:flat
+		title={title}
 		style={style}
+		disabled={disabled ? "disabled":""}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>