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;