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

Create comonent for collapsing menu entries

Browse Source
This commit is contained in:
Wim Brand
2026-02-12 19:42:23 +01:00
parent 6a19b5bc18
commit ec1c8b0f5b
7 changed files with 192 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
res/static/style/layout.css
View File

@@ -459,8 +459,8 @@ input[type="color"] {
border-radius: 6px;
margin: 2px;
background: var(--input_background);
gap: 3px;
padding: 3px;
gap: 2px;
padding: 2px;
overflow: hidden;
color: var(--input_text);
cursor: pointer;
@@ -510,8 +510,8 @@ input[type="submit"]:active,
input[type="button"]:active,
input[type="color"]:active {
box-shadow: inset 4px 4px 6px var(--shadow_color);
/* Exactly 3px offset compared to the inactive padding to give a depth effect */
padding: 6px 0px 0px 6px;
/* Exactly 2px offset compared to the inactive padding to give a depth effect */
padding: 4px 0px 0px 4px;
}
.button_highlight {

3
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -40,7 +40,8 @@ export const update = async () => {
siblings = await nav.get_siblings()
for(const sib of siblings) {
if (sib.name === "cover.jpg") {
const lower = sib.name.toLowerCase()
if (lower === "cover.jpg" || lower === "cover.png" || lower === "cover.webp") {
console.debug("Found album cover image", sib)
background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
break

4
svelte/src/layout/ToggleButton.svelte
View File

@@ -6,6 +6,7 @@ let {
group_first = false,
group_middle = false,
group_last = false,
highlight = true,
action,
children,
}: {
@@ -15,6 +16,7 @@ let {
group_first?: boolean;
group_middle?: boolean;
group_last?: boolean;
highlight?: boolean;
action?: (e: MouseEvent) => void;
children?: import('svelte').Snippet;
} = $props();
@@ -31,7 +33,7 @@ const click = (e: MouseEvent) => {
onclick={click}
type="button"
class="button"
class:button_highlight={on}
class:button_highlight={on && highlight}
class:group_first
class:group_middle
class:group_last

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

@@ -2,6 +2,7 @@
import { bookmark_del, bookmarks_store } from "lib/Bookmarks";
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import MenuEntry from "./MenuEntry.svelte";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
@@ -13,44 +14,37 @@ const toggle_edit = () => {
</script>
{#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 small">edit</i>
</button>
</div>
<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Bookmarks</div>
<button onclick={() => toggle_edit()} class:button_highlight={editing}>
<i class="icon">edit</i>
</button>
{/snippet}
{#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 small">{bookmark.icon}</i>
<span class:hide={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
<i class="icon small">delete</i>
</button>
{/if}
</div>
{/each}
<div class="title"></div>
{#snippet body()}
{#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={menu_collapsed}>{bookmark.label}</span>
</a>
{#if editing}
<button onclick={() => bookmark_del(bookmark.id)}>
<i class="icon">delete</i>
</button>
{/if}
</div>
{/each}
{/snippet}
</MenuEntry>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto;
text-align: center;
}
.title > button {
flex: 0 0 auto;
}
.row {
display: flex;
flex-direction: row;

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

@@ -12,8 +12,9 @@ import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
import { get_user } from "lib/PixeldrainAPI";
import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte";
let menu_collapsed = false
let menu_collapsed: boolean = $state(false)
const toggle_menu = (e: MouseEvent) => {
menu_collapsed = !menu_collapsed
@@ -37,62 +38,62 @@ onMount(async () => {
<div class="scroll_container">
<nav class="nav" class:collapse={menu_collapsed}>
<button class="button" onclick={toggle_menu}>
<i class="icon small">menu</i>
<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 small">home</i>
<i class="icon">home</i>
<span class:hide={menu_collapsed}>Home</span>
</a>
{#if $user.username !== undefined && $user.username !== ""}
<div class="separator" class:hide={menu_collapsed}></div>
<div class="username" class:hide={menu_collapsed}>
{$user.username}
</div>
<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
{#snippet title()}
<div class="username">{$user.username}</div>
{/snippet}
<div class="separator"></div>
{#snippet body()}
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
<div class="stats_table" class:hide={menu_collapsed}>
<div>Subscription</div>
<div>{$user.subscription.name}</div>
{#if $user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
{/if}
{#if $user.subscription.type === "prepaid"}
<div>Credit</div>
<div><Euro amount={$user.balance_micro_eur}/></div>
{/if}
<div>Storage used</div>
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
<div class="separator" class:hide={menu_collapsed}></div>
<div>Storage used</div>
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
<div>Transfer used</div>
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
</div>
{/snippet}
</MenuEntry>
<a class="button" href="/d/me" use:highlight_current_page>
<i class="icon small">folder</i>
<i class="icon">folder</i>
<span class:hide={menu_collapsed}>Filesystem</span>
</a>
<a class="button" href="/user" use:highlight_current_page>
<i class="icon small">dashboard</i>
<i class="icon">dashboard</i>
<span class:hide={menu_collapsed}>Dashboard</span>
</a>
{#if $user.is_admin}
<a class="button" href="/admin" use:highlight_current_page>
<i class="icon small">admin_panel_settings</i>
<i class="icon">admin_panel_settings</i>
<span class:hide={menu_collapsed}>Admin Panel</span>
</a>
{/if}
{:else}
<a class="button" href="/login" use:highlight_current_page>
<i class="icon small">login</i>
<i class="icon">login</i>
<span class:hide={menu_collapsed}>Login</span>
</a>
<a class="button" href="/register" use:highlight_current_page>
<i class="icon small">how_to_reg</i>
<i class="icon">how_to_reg</i>
<span class:hide={menu_collapsed}>Register</span>
</a>
{/if}
@@ -100,21 +101,18 @@ onMount(async () => {
<div class="separator"></div>
<a class="button" href="/speedtest" use:highlight_current_page>
<i class="icon small">speed</i>
<i class="icon">speed</i>
<span class:hide={menu_collapsed}>Speedtest</span>
</a>
<a class="button" href="/appearance" use:highlight_current_page>
<i class="icon small">palette</i>
<i class="icon">palette</i>
<span class:hide={menu_collapsed}>Themes</span>
</a>
<div class="separator"></div>
<Bookmarks menu_collapsed={menu_collapsed}/>
{#if !menu_collapsed}
<Tree/>
{/if}
<Tree menu_collapsed={menu_collapsed}/>
</nav>
</div>
</div>
@@ -176,16 +174,17 @@ onMount(async () => {
overflow-x: hidden;
max-width: 100%;
}
.username {
flex: 1 1 auto;
text-align: center;
margin: 3px;
}
.separator {
height: 1px;
margin: 2px 0;
width: 100%;
background-color: var(--separator);
}
.username {
text-align: center;
}
.stats_table {
display: grid;
grid-template-columns: auto auto;

73
svelte/src/wrap/MenuEntry.svelte Normal file
View File

@@ -0,0 +1,73 @@
<script lang="ts">
import ToggleButton from "layout/ToggleButton.svelte";
import { onMount } from "svelte";
type Expandable = {[key: string]: boolean}
let {
id,
collapsed = false,
title,
body,
}: {
id: string
collapsed: boolean
title: import('svelte').Snippet
body: import('svelte').Snippet
} = $props();
let expanded: boolean = $state(true)
const get_status = (): Expandable => {
let exp = localStorage.getItem("menu_expanded")
if (exp === null) {
exp = "{}"
}
return JSON.parse(exp) as Expandable
}
onMount(() => {
let exp = get_status()
if (exp[id] !== undefined) {
expanded = exp[id]
}
})
const toggle = (e: MouseEvent) => {
let exp = get_status()
exp[id] = expanded
localStorage.setItem("menu_expanded", JSON.stringify(exp))
}
</script>
<div class="title">
<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false}/>
{#if !collapsed}
{@render title()}
{/if}
</div>
{#if expanded}
{@render body()}
<div class="separator"></div>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.separator {
height: 1px;
width: 100%;
background-color: var(--separator);
}
</style>

102
svelte/src/wrap/Tree.svelte
View File

@@ -1,9 +1,11 @@
<script lang="ts">
import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { onMount } from "svelte";
import MenuEntry from "./MenuEntry.svelte";
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
let siblings: FSNode[] = $state([])
onMount(() => {
@@ -14,70 +16,58 @@ onMount(() => {
</script>
{#if $global_navigator.path.length > 1}
<div class="title">
<div>Parent directories</div>
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
<i class="icon small">north</i>
</button>
</div>
<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Parent directories</div>
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
<i class="icon">north</i>
</button>
{/snippet}
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
{#if node.type === "dir"}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}">
{#if node.is_shared()}
<i class="icon small">folder_shared</i>
{:else}
<i class="icon small">folder</i>
{/if}
<span>{node.name}</span>
</a>
</div>
{/if}
{/each}
<div class="title"></div>
{#snippet body()}
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
{#if node.type === "dir"}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<span class:hide={menu_collapsed}>{node.name}</span>
</a>
</div>
{/if}
{/each}
{/snippet}
</MenuEntry>
{/if}
{#if siblings.length !== 0}
<div class="title">
<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
{#snippet title()}
<div class="title">Siblings</div>
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
<i class="icon small">west</i>
<i class="icon">west</i>
</button>
<div>Siblings</div>
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
<i class="icon small">east</i>
<i class="icon">east</i>
</button>
</div>
{/snippet}
{#each siblings as node (node.id)}
{#if !node.is_hidden()}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" use:highlight_current_page>
{#if node.is_shared()}
<i class="icon small">folder_shared</i>
{:else if node.type === "dir"}
<i class="icon small">folder</i>
{:else}
<i class="icon small">image</i>
{/if}
<span>{node.name}</span>
</a>
</div>
{/if}
{/each}
<div class="title"></div>
{#snippet body()}
{#each siblings as node (node.id)}
{#if !node.is_hidden()}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
<span class:hide={menu_collapsed}>{node.name}</span>
</a>
</div>
{/if}
{/each}
{/snippet}
</MenuEntry>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto;
text-align: center;
margin: 3px;
@@ -98,4 +88,12 @@ onMount(() => {
background: none;
box-shadow: none;
}
.thumbnail {
height: 1.5em;
width: 1.5em;
border-radius: 2px;
}
.hide {
display: none;
}
</style>