cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-16 02:18:50 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): shared breadcrumbs component for folders and tags (#12215)

Browse Source 
* feat(web): shared breadcrumbs component for folders and tags

* chore: revert changes to tree view
This commit is contained in:
Ben 2024-09-02 15:42:27 -04:00 committed by GitHub
parent 59507e557e
commit d8b602f757
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 78 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/lib/components/shared-components/tree/breadcrumbs.svelte Normal file
View File

@ -0,0 +1,59 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiArrowUpLeft, mdiChevronRight } from '@mdi/js';
import { t } from 'svelte-i18n';
export let pathSegments: string[] = [];
export let getLink: (path: string) => string;
export let title: string;
export let icon: string;
$: isRoot = pathSegments.length === 0;
</script>
<nav class="flex items-center py-2">
{#if !isRoot}
<div>
<CircleIconButton
icon={mdiArrowUpLeft}
title={$t('to_parent')}
href={getLink(pathSegments.slice(0, -1).join('/'))}
class="mr-2"
padding="2"
/>
</div>
{/if}
<div
class="bg-gray-50 dark:bg-immich-dark-gray/50 w-full p-2 rounded-2xl border border-gray-100 dark:border-gray-900 overflow-y-auto immich-scrollbar"
>
<ol class="flex gap-2 items-center">
<li>
<CircleIconButton
{icon}
href={getLink('')}
{title}
size="1.25em"
padding="2"
aria-current={isRoot ? 'page' : undefined}
/>
</li>
{#each pathSegments as segment, index}
{@const isLastSegment = index === pathSegments.length - 1}
<li
class="flex gap-2 items-center font-mono text-sm text-nowrap text-immich-primary dark:text-immich-dark-primary"
>
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} ariaHidden />
{#if isLastSegment}
<p class="cursor-default">{segment}</p>
{:else}
<a class="underline hover:font-semibold" href={getLink(pathSegments.slice(0, index + 1).join('/'))}>
{segment}
</a>
{/if}
</li>
{/each}
</ol>
</div>
</nav>

2
web/src/lib/i18n/en.json
View File

@ -1191,7 +1191,7 @@
"to_change_password": "Change password",
"to_favorite": "Favorite",
"to_login": "Login",
"to_root": "To root",
"to_parent": "Go to parent",
"to_trash": "Trash",
"toggle_settings": "Toggle settings",
"toggle_theme": "Toggle dark theme",

48
web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -1,8 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
@ -13,10 +11,11 @@
import { foldersStore } from '$lib/stores/folders.store';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { type AssetResponseDto } from '@immich/sdk';
import { mdiArrowUpLeft, mdiChevronRight, mdiFolder, mdiFolderHome, mdiFolderOutline } from '@mdi/js';
import { mdiFolder, mdiFolderHome, mdiFolderOutline } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
export let data: PageData;
@ -35,20 +34,11 @@
await navigateToView(normalizeTreePath(`${data.path || ''}/${folderName}`));
};
const handleBackNavigation = async () => {
if (data.path) {
const parentPath = data.path.split('/').slice(0, -1).join('/');
await navigateToView(parentPath);
}
};
const handleBreadcrumbNavigation = async (targetPath: string) => {
await navigateToView(targetPath);
};
const getLink = (path: string) => {
const url = new URL(AppRoute.FOLDERS, window.location.href);
url.searchParams.set(QueryParameter.PATH, path);
if (path) {
url.searchParams.set(QueryParameter.PATH, path);
}
return url.href;
};
@ -70,33 +60,7 @@
</section>
</SideBarSection>
<section id="path-summary" class="text-immich-primary dark:text-immich-dark-primary rounded-xl flex">
{#if data.path}
<CircleIconButton icon={mdiArrowUpLeft} title="Back" on:click={handleBackNavigation} class="mr-2" padding="2" />
{/if}
<div
class="flex place-items-center gap-2 bg-gray-50 dark:bg-immich-dark-gray/50 w-full py-2 px-4 rounded-2xl border border-gray-100 dark:border-gray-900"
>
<a href={`${AppRoute.FOLDERS}`} title={$t('to_root')}>
<Icon path={mdiFolderHome} class="text-immich-primary dark:text-immich-dark-primary mr-2" size={28} />
</a>
{#each pathSegments as segment, index}
<button
class="text-sm font-mono underline hover:font-semibold"
on:click={() => handleBreadcrumbNavigation(pathSegments.slice(0, index + 1).join('/'))}
type="button"
>
{segment}
</button>
<p class="text-gray-500">
{#if index < pathSegments.length - 1}
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} />
{/if}
</p>
{/each}
</div>
</section>
<Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} {getLink} />
<section class="mt-2">
<TreeItemThumbnails items={data.currentFolders} icon={mdiFolder} onClick={handleNavigation} />

46
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@ -22,10 +22,11 @@
import { AssetStore } from '$lib/stores/assets.store';
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
import { mdiChevronRight, mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
export let data: PageData;
@ -47,13 +48,11 @@
await navigateToView(normalizeTreePath(`${data.path || ''}/${tag}`));
};
const handleBreadcrumbNavigation = async (targetPath: string) => {
await navigateToView(targetPath);
};
const getLink = (path: string) => {
const url = new URL(AppRoute.TAGS, window.location.href);
url.searchParams.set(QueryParameter.PATH, path);
if (path) {
url.searchParams.set(QueryParameter.PATH, path);
}
return url.href;
};
@ -149,14 +148,13 @@
</div>
</LinkButton>
<LinkButton on:click={handleEdit}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiPencil} size="18" />
<p class="hidden md:block">{$t('edit_tag')}</p>
</div>
</LinkButton>
{#if pathSegments.length > 0 && tag}
<LinkButton on:click={handleEdit}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiPencil} size="18" />
<p class="hidden md:block">{$t('edit_tag')}</p>
</div>
</LinkButton>
<LinkButton on:click={handleDelete}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiTrashCanOutline} size="18" />
@ -166,27 +164,7 @@
{/if}
</section>
<section
class="flex place-items-center gap-2 mt-2 text-immich-primary dark:text-immich-dark-primary rounded-2xl bg-gray-50 dark:bg-immich-dark-gray/50 w-full py-2 px-4 border border-gray-100 dark:border-gray-900"
>
<a href={`${AppRoute.TAGS}`} title={$t('to_root')}>
<Icon path={mdiTagMultiple} class="text-immich-primary dark:text-immich-dark-primary mr-2" size={28} />
</a>
{#each pathSegments as segment, index}
<button
class="text-sm font-mono underline hover:font-semibold"
on:click={() => handleBreadcrumbNavigation(pathSegments.slice(0, index + 1).join('/'))}
type="button"
>
{segment}
</button>
<p class="text-gray-500">
{#if index < pathSegments.length - 1}
<Icon path={mdiChevronRight} class="text-gray-500 dark:text-gray-300" size={16} />
{/if}
</p>
{/each}
</section>
<Breadcrumbs {pathSegments} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
<section class="mt-2 h-full">
{#key $page.url.href}