Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Sep 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e5c567
feat(web): shared breadcrumbs component for folders and tags
ben-basten Sep 1, 2024
393a881
chore: revert changes to tree view
ben-basten Sep 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions web/src/lib/components/shared-components/tree/breadcrumbs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion web/src/lib/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
48 changes: 6 additions & 42 deletions web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;

Expand All @@ -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;
};

Expand All @@ -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} />
Expand Down
46 changes: 12 additions & 34 deletions web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
};

Expand Down Expand Up @@ -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" />
Expand All @@ -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}
Expand Down
Loading