helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): folder view (#11967)

Browse source 
refactor(web): tree view
This commit is contained in:
Jason Rasmussen 2024-08-22 11:38:19 -04:00 • committed by GitHub
parent 296bbeb2fc
commit f69ce6ad8a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 135 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/src/lib/components/shared-components/tree/tree.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
import { normalizeTreePath, type RecursiveObject } from '$lib/utils/tree-utils';
import { mdiChevronDown, mdiChevronRight, mdiFolder, mdiFolderOutline } from '@mdi/js';
export let tree: RecursiveObject;
export let parent: string;
export let value: string;
export let active = '';
export let getLink: (path: string) => string;
$: path = normalizeTreePath(`${parent}/${value}`);
$: isActive = active.startsWith(path);
$: isOpen = isActive;
$: isTarget = active === path;
</script>
<a
href={getLink(path)}
title={value}
class={`flex flex-grow place-items-center pl-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
>
<button type="button" on:click|preventDefault={() => (isOpen = !isOpen)}>
<Icon path={isOpen ? mdiChevronDown : mdiChevronRight} class="text-gray-400" size={20} />
</button>
<div>
<Icon
path={isActive ? mdiFolder : mdiFolderOutline}
class={isActive ? 'text-immich-primary dark:text-immich-dark-primary' : 'text-gray-400'}
size={20}
/>
</div>
<span class="text-nowrap overflow-clip font-mono pl-1 pt-1">{value}</span>
</a>
{#if isOpen}
<TreeItems parent={path} items={tree} {active} {getLink} />
{/if}