steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 16:52:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve vertical file list styling

Browse Source
This commit is contained in:
vcoppe
2024-05-16 19:10:26 +02:00
parent c0c0b14728
commit 9a4d06e11d
6 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/lib/components/file-list/FileList2.svelte
View File

@@ -6,7 +6,7 @@
</script>
<ScrollArea class="w-fit p-1 pr-4">
<div class="w-60">
<div class="w-60 flex flex-col gap-1">
{#each Array.from($fileObservers.values()) as file}
<FileListItem {file} />
{/each}

2
website/src/lib/components/file-list/FileListItem.svelte
View File

@@ -9,7 +9,7 @@
</script>
{#if $file}
<CollapsibleTree side="left">
<CollapsibleTree side="left" margin={4}>
<FileListNode node={$file.file} id={$file.file._data.id} />
</CollapsibleTree>
{/if}

29
website/src/lib/components/file-list/FileListNode.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { GPXFile, Track, TrackSegment, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
import { Button } from '$lib/components/ui/button';
export let node: GPXTreeElement<AnyGPXTreeElement>;
export let id: string;
@@ -9,19 +10,23 @@
{#if node instanceof GPXFile}
<CollapsibleTreeNode {id}>
<span slot="trigger">{node.metadata.name}</span>
<span slot="trigger" class="truncate">{node.metadata.name}</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.children as child, i}
<svelte:self node={child} id={`${id}-track-${i}`} index={i} />
{/each}
<CollapsibleTreeNode id={`${id}-wpt`}>
<span slot="trigger">Waypoints</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.wpt as wpt, i}
<span class="ml-1 truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span>
{/each}
</div>
</CollapsibleTreeNode>
{#if node.wpt.length > 0}
<CollapsibleTreeNode id={`${id}-wpt`}>
<span slot="trigger">Waypoints</span>
<div slot="content" class="flex flex-col gap-0.5">
{#each node.wpt as wpt, i}
<Button variant="ghost" class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
>
{/each}
</div>
</CollapsibleTreeNode>
{/if}
</div>
</CollapsibleTreeNode>
{:else if node instanceof Track}
@@ -34,7 +39,7 @@
</div>
</CollapsibleTreeNode>
{:else if node instanceof TrackSegment}
<span class="ml-1">
{`Segment ${index + 1}`}
</span>
<Button variant="ghost" class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
>{`Segment ${index + 1}`}</Button
>
{/if}