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
}

24
svelte/src/wrap/Bookmarks.svelte
View File

@@ -3,6 +3,8 @@ import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
let editing = $state(false)
const toggle_edit = () => {
@@ -10,18 +12,20 @@ const toggle_edit = () => {
}
</script>
<div class="title">
<div class="hide_small">Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
</div>
{#if $bookmarks_store.length !== 0}
<div class="title">
<div class:hide={menu_collapsed}>Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
</div>
{/if}
{#each $bookmarks_store as bookmark}
<div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
<i class="icon">{bookmark.icon}</i>
<span class="hide_small">{bookmark.label}</span>
<span class:hide={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
@@ -59,9 +63,7 @@ const toggle_edit = () => {
background: none;
box-shadow: none;
}
@media(max-width: 1000px) {
.hide_small {
display: none;
}
.hide {
display: none;
}
</style>

51
svelte/src/wrap/MainMenu.svelte
View File

@@ -10,9 +10,17 @@ import { fs_get_node } from "lib/FilesystemAPI.svelte";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
import { get_user, logout_user } from "lib/PixeldrainAPI";
import { get_user } from "lib/PixeldrainAPI";
let menu_collapsed = false
const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed
}
onMount(async () => {
menu_collapsed = document.documentElement.clientWidth < 1000
await loading_run(async () => {
const user = await get_user()
if (user.username === undefined || user.username === "") {
@@ -27,21 +35,26 @@ onMount(async () => {
<div class="nav_container">
<div class="scroll_container">
<nav class="nav">
<button class="button" onclick={toggle_menu}>
<i class="icon">menu</i>
<span class:hide={menu_collapsed}>Collapse menu</span>
</button>
<a class="button" href="/" use:highlight_current_page>
<i class="icon">home</i>
<span class="hide_small">Home</span>
<span class:hide={menu_collapsed}>Home</span>
</a>
{#if $user.username !== undefined && $user.username !== ""}
<div class="separator hide_small"></div>
<div class="separator" class:hide={menu_collapsed}></div>
<div class="username hide_small">
<div class="username" class:hide={menu_collapsed}>
{$user.username}
</div>
<div class="separator"></div>
<div class="stats_table hide_small">
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
@@ -56,34 +69,30 @@ onMount(async () => {
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
<div class="separator hide_small"></div>
<div class="separator" class:hide={menu_collapsed}></div>
<a class="button" href="/d/me" use:highlight_current_page>
<i class="icon">folder</i>
<span class="hide_small">Filesystem</span>
<span class:hide={menu_collapsed}>Filesystem</span>
</a>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon">dashboard</i>
<span class="hide_small">Dashboard</span>
<span class:hide={menu_collapsed}>Dashboard</span>
</a>
{#if $user.is_admin}
<a class="button" href="/admin" use:highlight_current_page>
<i class="icon">admin_panel_settings</i>
<span class="hide_small">Admin Panel</span>
<span class:hide={menu_collapsed}>Admin Panel</span>
</a>
{/if}
<button class="button" onclick={()=> logout_user("/")}>
<i class="icon">logout</i>
<span class="hide_small">Log out</span>
</button>
{:else}
<a class="button" href="/login" use:highlight_current_page>
<i class="icon">login</i>
<span class="hide_small">Login</span>
<span class:hide={menu_collapsed}>Login</span>
</a>
<a class="button" href="/register" use:highlight_current_page>
<i class="icon">how_to_reg</i>
<span class="hide_small">Register</span>
<span class:hide={menu_collapsed}>Register</span>
</a>
{/if}
@@ -91,16 +100,16 @@ onMount(async () => {
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon">speed</i>
<span class="hide_small">Speedtest</span>
<span class:hide={menu_collapsed}>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon">palette</i>
<span class="hide_small">Themes</span>
<span class:hide={menu_collapsed}>Themes</span>
</a>
<div class="separator"></div>
<Bookmarks/>
<Bookmarks menu_collapsed={menu_collapsed}/>
</nav>
</div>
</div>
@@ -174,10 +183,8 @@ onMount(async () => {
margin: 5px;
}
@media(max-width: 1000px) {
.hide_small {
display: none;
}
.hide {
display: none;
}
.spinner {