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

Add compact view to filesystem

Browse Source
This commit is contained in:
Wim Brand
2025-01-28 12:00:04 +01:00
parent 3973e06651
commit 6eef8970fa
3 changed files with 175 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
svelte/src/filesystem/filemanager/CompactView.svelte Normal file
View File

@@ -0,0 +1,83 @@
<script>
import { createEventDispatcher } from "svelte";
import { formatDataVolume } from "./../../util/Formatting.svelte";
import { fs_encode_path, fs_node_icon } from "../FilesystemAPI.mjs"
let dispatch = createEventDispatcher()
export let nav
export let show_hidden = false
export let large_icons = false
</script>
<div class="directory">
{#each $nav.children as child, index (child.path)}
<a
href={"/d"+fs_encode_path(child.path)}
on:click|preventDefault={() => dispatch("node_click", index)}
on:contextmenu={e => dispatch("node_context", {event: e, index: index})}
class="node"
class:node_selected={child.fm_selected}
class:hidden={child.name.startsWith(".") && !show_hidden}
>
<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
<div class="node_name">
{child.name}
</div>
</a>
{/each}
</div>
<style>
.directory {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
gap: 8px;
margin: 8px;
max-width: 100%;
overflow: hidden;
}
.node {
display: flex;
flex-direction: row;
text-decoration: none;
color: var(--body_text-color);
padding: 2px;
align-items: center;
background: var(--input_background);
border-radius: 4px;
gap: 6px;
}
.node:hover:not(.node_selected) {
background: var(--input_hover_background);
color: var(--input_text);
text-decoration: none;
}
.node.node_selected {
background-color: var(--highlight_color) !important;
color: var(--highlight_text_color);
}
.node_icon {
flex: 0 0 content;
height: 2em;
width: 2em;
vertical-align: middle;
border-radius: 4px;
}
.node_name {
flex: 1 1 content;
word-break: break-all;
line-height: 1em;
}
.hidden {
display: none;
}
/* Large icon mode only supported on wide screens */
@media (min-width: 500px) {
.node_icon.large_icons {
height: 4em;
width: 4em;
}
}
</style>

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

@@ -4,6 +4,7 @@ import { onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
import CompactView from './CompactView.svelte'
import Button from '../../layout/Button.svelte';
import FileImporter from './FileImporter.svelte';
import { formatDate } from '../../util/Formatting.svelte';
@@ -136,6 +137,8 @@ const viewing_mode = () => {
const toggle_view = () => {
if (directory_view === "list") {
directory_view = "gallery"
} else if (directory_view === "gallery") {
directory_view = "compact"
} else {
directory_view = "list"
}
@@ -154,9 +157,21 @@ let moving_items = []
// We need to detect if shift is pressed so we can select multiple items
let shift_pressed = false
let last_selected_node = -1
const detect_shift = (e) => {
const keypress = e => {
if (e.key === "Shift") {
shift_pressed = e.type === "keydown"
} else if (e.type === "keydown" && e.key === "a" && e.ctrlKey) {
// CTRL + A selects all files
selecting_mode()
for (let i = 0; i < nav.children.length; i++) {
nav.children[i].fm_selected = true
}
e.preventDefault()
} else if (e.type === "keydown" && e.key === "Escape" && mode !== "viewing") {
// When escape is pressed we return to viewing mode
viewing_mode()
e.preventDefault()
e.stopPropagation()
}
}
@@ -249,7 +264,7 @@ onMount(() => {
})
</script>
<svelte:window on:keydown={detect_shift} on:keyup={detect_shift} />
<svelte:window on:keydown={keypress} on:keyup={keypress} />
<div
class="container"
@@ -263,65 +278,68 @@ onMount(() => {
<SearchBar nav={nav}/>
<div class="toolbar">
<button on:click={navigate_back} title="Back">
<i class="icon">arrow_back</i>
</button>
<button on:click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
<i class="icon">north</i>
</button>
<button on:click={() => nav.reload()} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
<div class="toolbar_left">
<button on:click={navigate_back} title="Back">
<i class="icon">arrow_back</i>
</button>
<button on:click={() => nav.navigate_up()} disabled={$nav.path.length <= 1} title="Up">
<i class="icon">north</i>
</button>
<button on:click={() => nav.reload()} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
</div>
<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
<i class="icon">visibility_off</i>
{:else}
<i class="icon">visibility</i>
{/if}
</button>
<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>
<button class="button_large_icons" on:click={() => toggle_large_icons()} title="Switch between large and small icons">
{#if large_icons}
<i class="icon">zoom_out</i>
{:else}
<i class="icon">zoom_in</i>
{/if}
</button>
<div class="toolbar_spacer"></div>
{#if $nav.permissions.write}
<button on:click={() => upload_widget.pick_files()} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
<div class="toolbar_middle">
<button on:click={() => toggle_view()} title="Switch between gallery, list and compact view">
<i class="icon" class:button_highlight={directory_view === "list"}>list</i>
<i class="icon" class:button_highlight={directory_view === "gallery"}>collections</i>
<i class="icon" class:button_highlight={directory_view === "compact"}>view_compact</i>
</button>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<button on:click={() => file_importer.open()} title="Import files from list">
<i class="icon">move_to_inbox</i>
<button class="button_large_icons" on:click={() => toggle_large_icons()} title="Switch between large and small icons">
{#if large_icons}
<i class="icon">zoom_out</i>
{:else}
<i class="icon">zoom_in</i>
{/if}
</button>
<button
on:click={selecting_mode}
class:button_highlight={mode === "selecting"}
title="Select and delete files"
>
<i class="icon">edit</i>
<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
<i class="icon">visibility_off</i>
{:else}
<i class="icon">visibility</i>
{/if}
</button>
{/if}
</div>
<div class="toolbar_right">
{#if $nav.permissions.write}
<button on:click={() => upload_widget.pick_files()} title="Upload files to this directory">
<i class="icon">cloud_upload</i>
</button>
<Button click={() => {creating_dir = !creating_dir}} highlight={creating_dir} icon="create_new_folder" title="Make folder"/>
<button on:click={() => file_importer.open()} title="Import files from list">
<i class="icon">move_to_inbox</i>
</button>
<button
on:click={selecting_mode}
class:button_highlight={mode === "selecting"}
title="Select and delete files"
>
<i class="icon">select_all</i>
</button>
{/if}
</div>
</div>
{:else if mode === "selecting"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>
<div class="toolbar_spacer"></div>
<div class="toolbar_spacer">Selecting files</div>
<Button click={move_start} icon="drive_file_move" label="Move"/>
<button on:click={delete_selected} class="button_red">
<i class="icon">delete</i>
@@ -386,6 +404,16 @@ onMount(() => {
on:node_settings={node_settings}
on:node_select={node_select}
/>
{:else if directory_view === "compact"}
<CompactView
nav={nav}
show_hidden={show_hidden}
large_icons={large_icons}
on:node_click={node_click}
on:node_context={node_context}
on:node_settings={node_settings}
on:node_select={node_select}
/>
{/if}
</div>
@@ -412,15 +440,20 @@ onMount(() => {
.toolbar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
max-width: 1000px;
margin: auto;
padding-top: 2px;
padding-bottom: 2px;
justify-content: center;
justify-content: space-between;
align-items: center;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar > * {
flex: 0 0 content;
display: flex;
flex-direction: row;
}
.toolbar_spacer {
flex: 1 1 auto;
text-align: center;
@@ -428,6 +461,9 @@ onMount(() => {
.toolbar_edit {
background-color: rgba(0, 255, 0, 0.05);
}
.icon.button_highlight {
border-radius: 4px;
}
/* Large icon mode only supported on wide screens. Hide the button on small screen */
@media (max-width: 500px) {

4
svelte/src/filesystem/upload_widget/FSUploadWidget.svelte
View File

@@ -5,6 +5,8 @@ import UploadProgress from "./UploadProgress.svelte";
export let nav
const max_concurrent_uploads = 5
let file_input_field
let file_input_change = (e) => {
// Start uploading the files async
@@ -86,7 +88,7 @@ const start_upload = async () => {
return acc
}, 0)
for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
for (let i = 0; i < upload_queue.length && active_uploads < max_concurrent_uploads; i++) {
if (upload_queue[i]) {
if (upload_queue[i].status === "queued") {
active_uploads++