mirror of
https://github.com/immich-app/immich.git
synced 2025-01-27 22:22:45 +01:00
feat(web): shared breadcrumbs component for folders and tags (#12215)
* feat(web): shared breadcrumbs component for folders and tags * chore: revert changes to tree view
This commit is contained in:
parent
59507e557e
commit
d8b602f757
4 changed files with 78 additions and 77 deletions
web/src
lib
routes/(user)
folders/[[photos=photos]]/[[assetId=id]]
tags/[[photos=photos]]/[[assetId=id]]
|
@ -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>
|
|
@ -1191,7 +1191,7 @@
|
||||||
"to_change_password": "Change password",
|
"to_change_password": "Change password",
|
||||||
"to_favorite": "Favorite",
|
"to_favorite": "Favorite",
|
||||||
"to_login": "Login",
|
"to_login": "Login",
|
||||||
"to_root": "To root",
|
"to_parent": "Go to parent",
|
||||||
"to_trash": "Trash",
|
"to_trash": "Trash",
|
||||||
"toggle_settings": "Toggle settings",
|
"toggle_settings": "Toggle settings",
|
||||||
"toggle_theme": "Toggle dark theme",
|
"toggle_theme": "Toggle dark theme",
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { page } from '$app/stores';
|
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 UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.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';
|
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 { foldersStore } from '$lib/stores/folders.store';
|
||||||
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
||||||
import { type AssetResponseDto } from '@immich/sdk';
|
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 { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
|
||||||
|
@ -35,20 +34,11 @@
|
||||||
await navigateToView(normalizeTreePath(`${data.path || ''}/${folderName}`));
|
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 getLink = (path: string) => {
|
||||||
const url = new URL(AppRoute.FOLDERS, window.location.href);
|
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;
|
return url.href;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -70,33 +60,7 @@
|
||||||
</section>
|
</section>
|
||||||
</SideBarSection>
|
</SideBarSection>
|
||||||
|
|
||||||
<section id="path-summary" class="text-immich-primary dark:text-immich-dark-primary rounded-xl flex">
|
<Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} {getLink} />
|
||||||
{#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>
|
|
||||||
|
|
||||||
<section class="mt-2">
|
<section class="mt-2">
|
||||||
<TreeItemThumbnails items={data.currentFolders} icon={mdiFolder} onClick={handleNavigation} />
|
<TreeItemThumbnails items={data.currentFolders} icon={mdiFolder} onClick={handleNavigation} />
|
||||||
|
|
|
@ -22,10 +22,11 @@
|
||||||
import { AssetStore } from '$lib/stores/assets.store';
|
import { AssetStore } from '$lib/stores/assets.store';
|
||||||
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
||||||
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
|
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 { t } from 'svelte-i18n';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
|
||||||
|
import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
|
||||||
|
|
||||||
export let data: PageData;
|
export let data: PageData;
|
||||||
|
|
||||||
|
@ -47,13 +48,11 @@
|
||||||
await navigateToView(normalizeTreePath(`${data.path || ''}/${tag}`));
|
await navigateToView(normalizeTreePath(`${data.path || ''}/${tag}`));
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleBreadcrumbNavigation = async (targetPath: string) => {
|
|
||||||
await navigateToView(targetPath);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getLink = (path: string) => {
|
const getLink = (path: string) => {
|
||||||
const url = new URL(AppRoute.TAGS, window.location.href);
|
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;
|
return url.href;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -149,14 +148,13 @@
|
||||||
</div>
|
</div>
|
||||||
</LinkButton>
|
</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}
|
{#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}>
|
<LinkButton on:click={handleDelete}>
|
||||||
<div class="flex place-items-center gap-2 text-sm">
|
<div class="flex place-items-center gap-2 text-sm">
|
||||||
<Icon path={mdiTrashCanOutline} size="18" />
|
<Icon path={mdiTrashCanOutline} size="18" />
|
||||||
|
@ -166,27 +164,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section
|
<Breadcrumbs {pathSegments} icon={mdiTagMultiple} title={$t('tags')} {getLink} />
|
||||||
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>
|
|
||||||
|
|
||||||
<section class="mt-2 h-full">
|
<section class="mt-2 h-full">
|
||||||
{#key $page.url.href}
|
{#key $page.url.href}
|
||||||
|
|
Loading…
Reference in a new issue