pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create UI for moving files in filesystem

Browse Source
This commit is contained in:
Fornax
2023-11-16 16:33:35 +01:00
parent adbf92d0f3
commit 49356471ca
5 changed files with 184 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
svelte/src/filesystem/filemanager/CreateDirectory.svelte
View File

@@ -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="submit" type="submit" value="create"/>
<input class="dirname" type="text" bind:this={name_input} bind:value={new_dir_name} />
<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>

162
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -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 = () => {
if (mode !== "selecting") {
return
}
const delete_selected = async () => {
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) => {
console.error(err)
alert("Delete failed: ", err)
}).finally(() => {
mode = "viewing"
await Promise.all(promises)
} catch (err) {
console.log(err)
alert("Delete failed: " + err.message + " ("+err.value+")")
} finally {
viewing_mode()
fs_navigator.reload()
})
}
const toggle_select = () => {
if (mode !== "selecting") {
mode = "selecting"
return
}
}
const selecting_mode = () => {
mode = "selecting"
}
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">
<i class="icon">create_new_folder</i>
</button>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<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/>
{#if mode === "selecting"}
<div class="toolbar toolbar_edit highlight_green">
<div style="flex: 1 1 auto; justify-self: center;">
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>
{:else if mode === "selecting"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<div class="toolbar_spacer"></div>
<Button click={move_start} icon="drive_file_move" label="Move"/>
<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;
top: 0;
display: inline-flex;
display: 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; }
@media(max-width: 800px) {
.toolbar_edit {
flex-direction: column;
}
.toolbar_spacer {
flex: 1 1 auto;
text-align: center;
}
.toolbar_edit {
background-color: rgba(0, 255, 0, 0.05);
}
</style>

13
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -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;
}

2
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -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()
}
}

6
svelte/src/layout/Button.svelte
View File

@@ -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>