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

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>