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

Split filesystem up in components

Browse Source 
Also thumbnails work now
This commit is contained in:
Fornax
2023-05-17 15:34:56 +02:00
parent c4cd2e1ee5
commit 277637511c
18 changed files with 711 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
svelte/src/filesystem/filemanager/EditWindow.svelte
View File

@@ -1,85 +0,0 @@
<script>
import { fs_rename, fs_update } from "../FilesystemAPI";
import Modal from "../../util/Modal.svelte";
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
export let bucket = ""
let file = {
path: "",
name: "",
id: "",
mode_octal: "",
};
let window;
export const edit = (f) => {
console.log("Editing file", f)
file = f
file_name = file.name
shared = !(file.id === undefined || file.id === "")
read_password = file.read_password ? file.read_password : ""
write_password = file.write_password ? file.write_password : ""
mode = file.mode_octal
window.show()
}
let file_name = ""
let shared = false
let read_password = ""
let write_password = ""
let mode = ""
const save = async () => {
try {
await fs_update(
bucket,
file.path,
{
mode: mode,
shared: shared,
read_password: read_password,
write_password: write_password,
},
)
if (file_name !== file.name) {
let parent = file.path.slice(0, -file.name.length)
console.log("Moving", file.path, "to", parent+file_name)
await fs_rename(bucket, file.path, parent+file_name)
}
} catch (err) {
console.error(err)
alert(err)
return
}
dispatch("reload")
window.hide()
}
</script>
<Modal bind:this={window} title="Edit" width="700px">
<form on:submit|preventDefault={save} style="display: flex; padding: 8px;">
<div class="form">
<label for="file_name">Name:</label>
<input bind:value={file_name} id="file_name" type="text" class="form_input"/>
<label for="file_name">Shared:</label>
<input bind:checked={shared} id="file_name" type="checkbox" class="form_input"/>
<label for="read_password">Read password:</label>
<input bind:value={read_password} id="read_password" type="text" class="form_input"/>
<label for="write_password">Write password:</label>
<input bind:value={write_password} id="write_password" type="text" class="form_input"/>
<label for="mode">Mode:</label>
<input bind:value={mode} id="mode" type="text" class="form_input"/>
<button type="submit" style="flex: 0 0 auto" class="button_highlight">
<i class="icon">save</i> Save
</button>
</div>
</form>
</Modal>

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

@@ -1,15 +1,16 @@
<script>
import { fs_delete } from './../FilesystemAPI.js'
import { createEventDispatcher } from 'svelte'
import { createEventDispatcher, onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import FileUploader from './FileUploader.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
import EditWindow from './EditWindow.svelte';
let dispatch = createEventDispatcher()
export let navigator
export let state
export let directory_view = "list"
export let edit_window
export let directory_view = ""
let uploader
let mode = "viewing"
let creating_dir = false
@@ -27,13 +28,12 @@ const node_click = e => {
// We prefix our custom state properties with fm_ to not interfere with
// other modules
if (mode === "viewing") {
dispatch("navigate", state.children[index].path)
navigator.navigate(state.children[index].path, true)
} else if (mode === "selecting") {
state.children[index].fm_selected = !state.children[index].fm_selected
}
}
let edit_window;
const node_settings = e => {
edit_window.edit(state.children[e.detail])
}
@@ -42,10 +42,10 @@ const navigate_up = () => {
// Go to the path of the last parent
if (state.path.length > 1) {
dispatch("navigate", state.path[state.path.length-2].path)
navigator.navigate(state.path[state.path.length-2].path, true)
}
}
const reload = () => { dispatch("navigate", state.base.path) }
const reload = () => { navigator.navigate(state.base.path) }
const delete_selected = () => {
if (mode !== "selecting") {
@@ -98,6 +98,24 @@ const toggle_select = () => {
})
mode = "viewing"
}
const toggle_view = () => {
if (directory_view === "list") {
directory_view = "gallery"
} else {
directory_view = "list"
}
localStorage.setItem("directory_view", directory_view)
}
onMount(() => {
if(typeof Storage !== "undefined") {
directory_view = localStorage.getItem("directory_view")
}
if (directory_view === "" || directory_view === null) {
directory_view = "list"
}
})
</script>
<div class="container">
@@ -109,15 +127,13 @@ const toggle_select = () => {
<button on:click={reload} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if directory_view === "list"}
<button on:click={() => {directory_view = "gallery"}} title="Switch to gallery view">
<i class="icon">collections</i>
<button on:click={() => toggle_view()} title="Switch between gallery view and list view">
{#if directory_view === "list"}
<i class="icon">collections</i>
{:else if directory_view === "gallery"}
<i class="icon">list</i>
{/if}
</button>
{:else if directory_view === "gallery"}
<button on:click={() => {directory_view = "list"}} title="Switch to list view">
<i class="icon">list</i>
</button>
{/if}
<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
@@ -187,8 +203,6 @@ const toggle_select = () => {
{/if}
</div>
<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
<style>
.container {
height: 100%;

46
svelte/src/filesystem/filemanager/GalleryView.svelte
View File

@@ -1,48 +1,10 @@
<script>
import { createEventDispatcher } from "svelte"
import { fs_node_icon, fs_node_type } from "../FilesystemUtil";
let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
const node_icon = node => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="gallery">
@@ -56,7 +18,8 @@ const node_icon = node => {
>
<div
class="icon_container"
style="background-image: url('{node_icon(child)}?width=256&height=256');">
class:cover={fs_node_type(child) === "image" || fs_node_type(child) === "video"}
style='background-image: url("{fs_node_icon(state.root.id, child)}");'>
</div>
{child.name}
</a>
@@ -106,6 +69,9 @@ const node_icon = node => {
font-size: 22px;
text-align: left;
}
.icon_container.cover {
background-size: cover;
}
.hidden {
display: none;
}

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

@@ -1,49 +1,12 @@
<script>
import { createEventDispatcher } from "svelte";
import { formatDataVolume } from "../../util/Formatting.svelte";
import { fs_node_icon } from "../FilesystemUtil";
let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
const node_icon = node => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="directory">
@@ -62,7 +25,7 @@ const node_icon = node => {
class:hidden={child.name.startsWith(".") && !show_hidden}
>
<td>
<img src={node_icon(child)} class="node_icon" alt="icon"/>
<img src={fs_node_icon(state.root.id, child)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
{child.name}