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

Make toolbar and main menu collapsible

Browse Source
This commit is contained in:
Wim Brand
2025-11-03 19:15:57 +01:00
parent 4de6331551
commit d422c147b0
7 changed files with 127 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
svelte/src/filesystem/FileStats.svelte
View File

@@ -4,8 +4,12 @@ import { formatDataVolume, formatThousands } from "util/Formatting"
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "./FSNavigator";
let { nav }: {
nav: FSNavigator;
let {
nav,
expanded = $bindable(false)
}: {
nav: FSNavigator
expanded: boolean
} = $props();
let loading = $state(true)
@@ -92,51 +96,77 @@ const close_socket = () => {
socket = null
}
}
const toggle_expand = (e: MouseEvent) => {
e.stopPropagation()
e.preventDefault()
expanded = !expanded
}
const toggle_expand_keyboard = (e: KeyboardEvent) => {
if (e.key === " " || e.key === "Enter") {
e.stopPropagation()
e.preventDefault()
expanded = !expanded
}
}
</script>
{#if $nav.base.type === "file"}
{#if error_msg !== ""}
{error_msg}
{:else}
<div class="group">
<div class="label">Downloads</div>
<div class="stat">
{loading ? "Loading..." : formatThousands(downloads)}
</div>
<div class="container" onclick={toggle_expand} onkeypress={toggle_expand_keyboard} role="presentation">
<button class="button_expand hidden_vertical" onclick={toggle_expand}>
{#if expanded}
<i class="icon">expand_more</i>
{:else}
<i class="icon">expand_less</i>
{/if}
</button>
</div>
<div class="group">
<div class="label">Egress</div>
<div class="stat">
{loading ? "Loading..." : formatDataVolume(transfer_used, 3)}
{#if $nav.base.type === "file"}
{#if error_msg !== ""}
{error_msg}
{:else}
<div class="group">
<div class="label">Downloads</div>
<div class="stat">
{loading ? "Loading..." : formatThousands(downloads)}
</div>
</div>
<div class="group">
<div class="label">Egress</div>
<div class="stat">
{loading ? "Loading..." : formatDataVolume(transfer_used, 3)}
</div>
</div>
{/if}
<div class="group">
<div class="label">Size</div>
<div class="stat">{formatDataVolume($nav.base.file_size, 3)}</div>
</div>
{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}
<div class="group">
<div class="label">Directories</div>
<div class="stat">{formatThousands(total_directories)}</div>
</div>
<div class="group">
<div class="label">Files</div>
<div class="stat">{formatThousands(total_files)}</div>
</div>
<div class="group">
<div class="label">Total size</div>
<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
</div>
{/if}
<div class="group">
<div class="label">Size</div>
<div class="stat">{formatDataVolume($nav.base.file_size, 3)}</div>
</div>
{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}
<div class="group">
<div class="label">Directories</div>
<div class="stat">{formatThousands(total_directories)}</div>
</div>
<div class="group">
<div class="label">Files</div>
<div class="stat">{formatThousands(total_files)}</div>
</div>
<div class="group">
<div class="label">Total size</div>
<div class="stat">{formatDataVolume(total_file_size, 3)}</div>
</div>
{/if}
</div>
<style>
.container {
display: flex;
flex-direction: row;
}
.group {
flex: 1 1 auto;
text-align: center;

10
svelte/src/filesystem/Toolbar.svelte
View File

@@ -21,6 +21,8 @@ let {
let share_dialog: ShareDialog = $state()
let link_copied = $state(false)
let toolbar_expanded = $state(false)
export const copy_link = () => {
const share_url = fs_share_url($nav.path)
if (share_url === "") {
@@ -35,8 +37,9 @@ export const copy_link = () => {
</script>
<div class="toolbar">
<div class="grid">
<FileStats nav={nav}/>
<FileStats nav={nav} bind:expanded={toolbar_expanded}/>
<div class="grid" class:hide={!toolbar_expanded}>
<div class="button_row">
<button onclick={() => {nav.open_sibling(-1)}}>
@@ -99,6 +102,9 @@ export const copy_link = () => {
<ShareDialog nav={nav} bind:this={share_dialog}/>
<style>
.hide {
display: none !important;
}
.toolbar {
flex: 0 0 auto;
overflow-x: hidden;

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

@@ -134,6 +134,7 @@ const delete_selected = async () => {
} finally {
viewing_mode()
loading_finish()
await nav.reload()
}
}

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

@@ -85,24 +85,16 @@ let {
<style>
.directory {
display: table;
background: var(--body_background);
border-collapse: collapse;
/* backdrop-filter: blur(4px); */
max-width: 1200px;
margin: auto; /* center */
}
.directory > * {
display: table-row;
}
.directory > * > * {
display: table-cell;
}
td {
padding: 0;
}
.node {
display: table-row;
text-decoration: none;
color: var(--body_text-color);
cursor: pointer;

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

@@ -86,6 +86,9 @@ export const upload_file = async (file: File) => {
}
}
const min_uploads = 2
const max_uploads = 20
let active_uploads = 0
let status = $state("idle")
@@ -109,7 +112,10 @@ const start_upload = async () => {
// If the size threshold or the concurrent upload limit is reached
// we break the loop. The system tries to keep an upload queue of
// 100 MB and a minimum of two concurrent uploads.
if ((uploading_size >= 100e6 && active_uploads >= 2) || active_uploads >= 10) {
if (
(uploading_size >= 100e6 && active_uploads >= min_uploads) ||
active_uploads >= max_uploads
) {
console.debug("Current uploads", active_uploads, "uploads size", uploading_size)
break
}