self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-22 01:47:08 +02:00
Code Issues Releases Activity

feat(web): rework context menus: add icons and reorder items (#8090)

Browse Source
This commit is contained in:
Ethan Margaillan 2024-03-21 19:39:33 +01:00 committed by GitHub
parent 1abb0bdae8
commit 8ed6ed4d2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 204 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -5,20 +5,31 @@
import { getAssetJobName } from '$lib/utils';
import { clickOutside } from '$lib/utils/click-outside';
import { getContextMenuPosition } from '$lib/utils/context-menu';
import { AssetJobName, AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
import { AssetJobName, AssetTypeEnum, type AssetResponseDto, type AlbumResponseDto } from '@immich/sdk';
import {
mdiAccountCircleOutline,
mdiAlertOutline,
mdiArchiveArrowDownOutline,
mdiArchiveArrowUpOutline,
mdiArrowLeft,
mdiCogRefreshOutline,
mdiContentCopy,
mdiDatabaseRefreshOutline,
mdiDeleteOutline,
mdiDotsVertical,
mdiFolderDownloadOutline,
mdiHeart,
mdiHeartOutline,
mdiImageAlbum,
mdiImageMinusOutline,
mdiImageOutline,
mdiImageRefreshOutline,
mdiInformationOutline,
mdiMagnifyMinusOutline,
mdiMagnifyPlusOutline,
mdiMotionPauseOutline,
mdiPlaySpeed,
mdiPresentationPlay,
mdiShareVariantOutline,
} from '@mdi/js';
import { createEventDispatcher } from 'svelte';
@ -26,6 +37,7 @@
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
export let asset: AssetResponseDto;
export let album: AlbumResponseDto | null = null;
export let showCopyButton: boolean;
export let showZoomButton: boolean;
export let showMotionPlayButton: boolean;
@ -42,6 +54,7 @@
| 'addToAlbum'
| 'addToSharedAlbum'
| 'asProfileImage'
| 'setAsAlbumCover'
| 'download'
| 'playSlideShow'
| 'runJob'
@ -59,6 +72,7 @@
addToAlbum: void;
addToSharedAlbum: void;
asProfileImage: void;
setAsAlbumCover: void;
runJob: AssetJobName;
playSlideShow: void;
unstack: void;
@ -173,37 +187,55 @@
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} direction="left">
{#if showSlideshow}
<MenuOption on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
<MenuOption icon={mdiPresentationPlay} on:click={() => onMenuClick('playSlideShow')} text="Slideshow" />
{/if}
{#if showDownloadButton}
<MenuOption on:click={() => onMenuClick('download')} text="Download" />
<MenuOption icon={mdiFolderDownloadOutline} on:click={() => onMenuClick('download')} text="Download" />
{/if}
<MenuOption on:click={() => onMenuClick('addToAlbum')} text="Add to Album" />
<MenuOption on:click={() => onMenuClick('addToSharedAlbum')} text="Add to Shared Album" />
<MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text="Add to album" />
<MenuOption
icon={mdiShareVariantOutline}
on:click={() => onMenuClick('addToSharedAlbum')}
text="Add to shared album"
/>
{#if isOwner}
{#if hasStackChildren}
<MenuOption icon={mdiImageMinusOutline} on:click={() => onMenuClick('unstack')} text="Un-stack" />
{/if}
{#if album}
<MenuOption
text="Set as album cover"
icon={mdiImageOutline}
on:click={() => onMenuClick('setAsAlbumCover')}
/>
{/if}
{#if asset.type === AssetTypeEnum.Image}
<MenuOption
icon={mdiAccountCircleOutline}
on:click={() => onMenuClick('asProfileImage')}
text="Set as profile picture"
/>
{/if}
<MenuOption
on:click={() => dispatch('toggleArchive')}
icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
text={asset.isArchived ? 'Unarchive' : 'Archive'}
/>
{#if asset.type === AssetTypeEnum.Image}
<MenuOption on:click={() => onMenuClick('asProfileImage')} text="As profile picture" />
{/if}
{#if hasStackChildren}
<MenuOption on:click={() => onMenuClick('unstack')} text="Un-Stack" />
{/if}
<hr />
<MenuOption
icon={mdiDatabaseRefreshOutline}
on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
text={getAssetJobName(AssetJobName.RefreshMetadata)}
/>
<MenuOption
icon={mdiImageRefreshOutline}
on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
/>
{#if asset.type === AssetTypeEnum.Video}
<MenuOption
icon={mdiCogRefreshOutline}
on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
text={getAssetJobName(AssetJobName.TranscodeVideo)}
/>

24
web/src/lib/components/faces-page/people-card.svelte
View File

@ -4,7 +4,13 @@
import { getPeopleThumbnailUrl } from '$lib/utils';
import { getContextMenuPosition } from '$lib/utils/context-menu';
import { type PersonResponseDto } from '@immich/sdk';
import { mdiDotsVertical } from '@mdi/js';
import {
mdiAccountEditOutline,
mdiAccountMultipleCheckOutline,
mdiCalendarEditOutline,
mdiDotsVertical,
mdiEyeOffOutline,
} from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import IconButton from '../elements/buttons/icon-button.svelte';
@ -83,10 +89,18 @@
{#if showContextMenu}
<Portal target="body">
<ContextMenu {...contextMenuPosition} on:outclick={() => onMenuExit()}>
<MenuOption on:click={() => onMenuClick('hide-person')} text="Hide Person" />
<MenuOption on:click={() => onMenuClick('change-name')} text="Change name" />
<MenuOption on:click={() => onMenuClick('set-birth-date')} text="Set date of birth" />
<MenuOption on:click={() => onMenuClick('merge-people')} text="Merge People" />
<MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text="Hide person" />
<MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text="Change name" />
<MenuOption
on:click={() => onMenuClick('set-birth-date')}
icon={mdiCalendarEditOutline}
text="Set date of birth"
/>
<MenuOption
on:click={() => onMenuClick('merge-people')}
icon={mdiAccountMultipleCheckOutline}
text="Merge people"
/>
</ContextMenu>
</Portal>
{/if}

7
web/src/lib/components/photos-page/actions/add-to-album.svelte
View File

@ -11,6 +11,7 @@
import { createAlbum, type AlbumResponseDto } from '@immich/sdk';
import { getMenuContext } from '../asset-select-context-menu.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
export let shared = false;
let showAlbumPicker = false;
@ -53,7 +54,11 @@
};
</script>
<MenuOption on:click={() => (showAlbumPicker = true)} text={shared ? 'Add to Shared Album' : 'Add to Album'} />
<MenuOption
on:click={() => (showAlbumPicker = true)}
text={shared ? 'Add to shared album' : 'Add to album'}
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
/>
{#if showAlbumPicker}
<AlbumSelectionModal

2
web/src/lib/components/photos-page/actions/archive-action.svelte
View File

@ -56,7 +56,7 @@
</script>
{#if menuItem}
<MenuOption {text} on:click={handleArchive} />
<MenuOption {text} {icon} on:click={handleArchive} />
{/if}
{#if !menuItem}

4
web/src/lib/components/photos-page/actions/asset-job-actions.svelte
View File

@ -4,7 +4,7 @@
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAssetJobMessage, getAssetJobName } from '$lib/utils';
import { getAssetJobIcon, getAssetJobMessage, getAssetJobName } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { AssetJobName, AssetTypeEnum, runAssetJobs } from '@immich/sdk';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
@ -33,6 +33,6 @@
{#each jobs as job}
{#if isAllVideos || job !== AssetJobName.TranscodeVideo}
<MenuOption text={getAssetJobName(job)} on:click={() => handleRunJob(job)} />
<MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} on:click={() => handleRunJob(job)} />
{/if}
{/each}

3
web/src/lib/components/photos-page/actions/change-date-action.svelte
View File

@ -7,6 +7,7 @@
import { DateTime } from 'luxon';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiCalendarEditOutline } from '@mdi/js';
export let menuItem = false;
const { clearSelect, getOwnedAssets } = getAssetControlContext();
@ -26,7 +27,7 @@
</script>
{#if menuItem}
<MenuOption text="Change date" on:click={() => (isShowChangeDate = true)} />
<MenuOption text="Change date" icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
{/if}
{#if isShowChangeDate}
<ChangeDate

7
web/src/lib/components/photos-page/actions/change-location-action.svelte
View File

@ -6,6 +6,7 @@
import { updateAssets } from '@immich/sdk';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiMapMarkerMultipleOutline } from '@mdi/js';
export let menuItem = false;
const { clearSelect, getOwnedAssets } = getAssetControlContext();
@ -26,7 +27,11 @@
</script>
{#if menuItem}
<MenuOption text="Change location" on:click={() => (isShowChangeLocation = true)} />
<MenuOption
text="Change location"
icon={mdiMapMarkerMultipleOutline}
on:click={() => (isShowChangeLocation = true)}
/>
{/if}
{#if isShowChangeLocation}
<ChangeLocation

6
web/src/lib/components/photos-page/actions/delete-assets.svelte
View File

@ -21,6 +21,8 @@
let isShowConfirmation = false;
let loading = false;
$: label = force ? 'Permanently delete' : 'Delete';
const handleTrash = async () => {
if (force) {
isShowConfirmation = true;
@ -46,11 +48,11 @@
</script>
{#if menuItem}
<MenuOption text={force ? 'Permanently Delete' : 'Delete'} on:click={handleTrash} />
<MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
{:else if loading}
<CircleIconButton title="Loading" icon={mdiTimerSand} />
{:else}
<CircleIconButton title="Delete" icon={mdiDeleteOutline} on:click={handleTrash} />
<CircleIconButton title={label} icon={mdiDeleteOutline} on:click={handleTrash} />
{/if}
{#if isShowConfirmation}

6
web/src/lib/components/photos-page/actions/download-action.svelte
View File

@ -3,7 +3,7 @@
import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiCloudDownloadOutline } from '@mdi/js';
import { mdiCloudDownloadOutline, mdiFileDownloadOutline, mdiFolderDownloadOutline } from '@mdi/js';
export let filename = 'immich.zip';
export let menuItem = false;
@ -21,10 +21,12 @@
clearSelect();
await downloadArchive(filename, { assetIds: assets.map((asset) => asset.id) });
};
$: menuItemIcon = getAssets().size === 1 ? mdiFileDownloadOutline : mdiFolderDownloadOutline;
</script>
{#if menuItem}
<MenuOption text="Download" on:click={handleDownloadFiles} />
<MenuOption text="Download" icon={menuItemIcon} on:click={handleDownloadFiles} />
{:else}
<CircleIconButton title="Download" icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
{/if}

4
web/src/lib/components/photos-page/actions/favorite-action.svelte
View File

@ -16,7 +16,7 @@
export let menuItem = false;
export let removeFavorite: boolean;
$: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
$: text = removeFavorite ? 'Remove from favorites' : 'Favorite';
$: icon = removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline;
let loading = false;
@ -57,7 +57,7 @@
</script>
{#if menuItem}
<MenuOption {text} on:click={handleFavorite} />
<MenuOption {text} {icon} on:click={handleFavorite} />
{/if}
{#if !menuItem}

4
web/src/lib/components/photos-page/actions/remove-from-album.svelte
View File

@ -6,7 +6,7 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
import { mdiDeleteOutline } from '@mdi/js';
import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
@ -50,7 +50,7 @@
</script>
{#if menuItem}
<MenuOption text="Remove from album" on:click={() => (isShowConfirmation = true)} />
<MenuOption text="Remove from album" icon={mdiImageRemoveOutline} on:click={() => (isShowConfirmation = true)} />
{:else}
<CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={() => (isShowConfirmation = true)} />
{/if}

3
web/src/lib/components/photos-page/actions/stack-action.svelte
View File

@ -8,6 +8,7 @@
import { handleError } from '$lib/utils/handle-error';
import { updateAssets } from '@immich/sdk';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiImageMultipleOutline } from '@mdi/js';
export let onStack: OnStack | undefined;
@ -55,4 +56,4 @@
};
</script>
<MenuOption text="Stack" on:click={handleStack} />
<MenuOption text="Stack" icon={mdiImageMultipleOutline} on:click={handleStack} />

4
web/src/lib/components/photos-page/asset-select-context-menu.svelte
View File

@ -29,9 +29,7 @@
<CircleIconButton {title} {icon} on:click={handleShowMenu} />
{#if showContextMenu}
<ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg">
<slot />
</div>
<slot />
</ContextMenu>
{/if}
</div>

6
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View File

@ -23,12 +23,14 @@
<div
transition:slide={{ duration: 200, easing: quintOut }}
bind:this={menuElement}
class="absolute z-10 w-[200px] overflow-hidden rounded-lg shadow-lg"
class="absolute z-10 min-w-[200px] w-max max-w-[300px] overflow-hidden rounded-lg shadow-lg"
style="left: {left}px; top: {top}px;"
role="menu"
use:clickOutside
on:outclick
on:escape
>
<slot />
<div class="flex flex-col rounded-lg">
<slot />
</div>
</div>

12
web/src/lib/components/shared-components/context-menu/menu-option.svelte
View File

@ -1,6 +1,9 @@
<script>
import Icon from '$lib/components/elements/icon.svelte';
export let text = '';
export let subtitle = '';
export let icon = '';
</script>
<button
@ -9,7 +12,14 @@
role="menuitem"
>
{#if text}
{text}
{#if icon}
<p class="flex gap-2">
<Icon path={icon} size="18" />
{text}
</p>
{:else}
{text}
{/if}
{:else}
<slot />
{/if}

11
web/src/lib/utils.ts
View File

@ -12,6 +12,7 @@ import {
unlinkOAuthAccount,
type UserResponseDto,
} from '@immich/sdk';
import { mdiCogRefreshOutline, mdiDatabaseRefreshOutline, mdiImageRefreshOutline } from '@mdi/js';
interface DownloadRequestOptions<T = unknown> {
method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
@ -196,6 +197,16 @@ export const getAssetJobMessage = (job: AssetJobName) => {
return messages[job];
};
export const getAssetJobIcon = (job: AssetJobName) => {
const names: Record<AssetJobName, string> = {
[AssetJobName.RefreshMetadata]: mdiDatabaseRefreshOutline,
[AssetJobName.RegenerateThumbnail]: mdiImageRefreshOutline,
[AssetJobName.TranscodeVideo]: mdiCogRefreshOutline,
};
return names[job];
};
export const copyToClipboard = async (secret: string) => {
try {
await navigator.clipboard.writeText(secret);

45
web/src/routes/(user)/albums/[albumId]/+page.svelte
View File

@ -64,11 +64,14 @@
mdiArrowLeft,
mdiDeleteOutline,
mdiDotsVertical,
mdiFileImagePlusOutline,
mdiFolderDownloadOutline,
mdiLink,
mdiPlus,
mdiShareVariantOutline,
mdiPresentationPlay,
mdiCogOutline,
mdiImageOutline,
mdiImagePlusOutline,
} from '@mdi/js';
import { fly } from 'svelte/transition';
import type { PageData } from './$types';
@ -385,23 +388,25 @@
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
{#if isAllUserOwned}
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
{/if}
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<DownloadAction menuItem filename="{album.albumName}.zip" />
{#if isAllUserOwned}
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
{/if}
<DownloadAction menuItem filename="{album.albumName}.zip" />
{#if isOwned || isAllUserOwned}
<RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
{/if}
{#if isAllUserOwned}
<DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
{/if}
</AssetSelectContextMenu>
</AssetSelectControlBar>
@ -410,9 +415,9 @@
<ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(backUrl)}>
<svelte:fragment slot="trailing">
<CircleIconButton
title="Add Photos"
title="Add photos"
on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
icon={mdiFileImagePlusOutline}
icon={mdiImagePlusOutline}
/>
{#if isOwned}
@ -421,11 +426,6 @@
on:click={() => (viewMode = ViewMode.SELECT_USERS)}
icon={mdiShareVariantOutline}
/>
<CircleIconButton
title="Delete album"
on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
icon={mdiDeleteOutline}
/>
{/if}
{#if album.assetCount > 0}
@ -436,9 +436,22 @@
<CircleIconButton title="Album options" on:click={handleOpenAlbumOptions} icon={mdiDotsVertical}>
{#if viewMode === ViewMode.ALBUM_OPTIONS}
<ContextMenu {...contextMenuPosition}>
<MenuOption on:click={handleStartSlideshow} text="Slideshow" />
<MenuOption on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" />
<MenuOption on:click={() => (viewMode = ViewMode.OPTIONS)} text="Options" />
<MenuOption icon={mdiPresentationPlay} text="Slideshow" on:click={handleStartSlideshow} />
<MenuOption
icon={mdiImageOutline}
text="Select album cover"
on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
/>
<MenuOption
icon={mdiCogOutline}
text="Options"
on:click={() => (viewMode = ViewMode.OPTIONS)}
/>
<MenuOption
icon={mdiDeleteOutline}
text="Delete album"
on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
/>
</ContextMenu>
{/if}
</CircleIconButton>

6
web/src/routes/(user)/archive/+page.svelte
View File

@ -31,14 +31,14 @@
<ArchiveAction unarchive onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
</AssetSelectContextMenu>
</AssetSelectControlBar>
{/if}

6
web/src/routes/(user)/favorites/+page.svelte
View File

@ -34,16 +34,16 @@
<FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<DownloadAction menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
</AssetSelectContextMenu>
</AssetSelectControlBar>
{/if}

42
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@ -44,7 +44,16 @@
type AssetResponseDto,
type PersonResponseDto,
} from '@immich/sdk';
import { mdiArrowLeft, mdiDotsVertical, mdiPlus } from '@mdi/js';
import {
mdiAccountBoxOutline,
mdiAccountMultipleCheckOutline,
mdiArrowLeft,
mdiCalendarEditOutline,
mdiDotsVertical,
mdiEyeOffOutline,
mdiEyeOutline,
mdiPlus,
} from '@mdi/js';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import { listNavigation } from '$lib/utils/list-navigation';
@ -395,18 +404,18 @@
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
<CreateSharedLink />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
<MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
<MenuOption icon={mdiAccountMultipleCheckOutline} text="Fix incorrect match" on:click={handleReassignAssets} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
<DeleteAssets menuItem onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
</AssetSelectContextMenu>
</AssetSelectControlBar>
{:else}
@ -414,13 +423,26 @@
<ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close={() => goto(previousRoute)}>
<svelte:fragment slot="trailing">
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_PERSON)} />
<MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
<MenuOption text="Merge person" on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)} />
<MenuOption
text="Select featured photo"
icon={mdiAccountBoxOutline}
on:click={() => (viewMode = ViewMode.SELECT_PERSON)}
/>
<MenuOption
text={data.person.isHidden ? 'Unhide person' : 'Hide person'}
icon={data.person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
on:click={() => toggleHidePerson()}
/>
<MenuOption
text="Set date of birth"
icon={mdiCalendarEditOutline}
on:click={() => (viewMode = ViewMode.BIRTH_DATE)}
/>
<MenuOption
text="Merge people"
icon={mdiAccountMultipleCheckOutline}
on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)}
/>
</AssetSelectContextMenu>
</svelte:fragment>
</ControlAppBar>
@ -428,7 +450,7 @@
{#if viewMode === ViewMode.SELECT_PERSON}
<ControlAppBar on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}>
<svelte:fragment slot="leading">Select feature photo</svelte:fragment>
<svelte:fragment slot="leading">Select featured photo</svelte:fragment>
</ControlAppBar>
{/if}
{/if}

16
web/src/routes/(user)/photos/+page.svelte
View File

@ -55,23 +55,25 @@
>
<CreateSharedLink on:escape={() => (handleEscapeKey = true)} />
<SelectAllAssets {assetStore} {assetInteractionStore} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets
on:escape={() => (handleEscapeKey = true)}
onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
/>
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<DownloadAction menuItem />
<ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
{#if $selectedAssets.size > 1}
<StackAction onStack={(assetIds) => assetStore.removeAssets(assetIds)} />
{/if}
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
<DeleteAssets
menuItem
on:escape={() => (handleEscapeKey = true)}
onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
/>
<hr />
<AssetJobActions />
</AssetSelectContextMenu>
</AssetSelectControlBar>

8
web/src/routes/(user)/search/+page.svelte
View File

@ -209,18 +209,18 @@
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
<CreateSharedLink />
<CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
<AssetSelectContextMenu icon={mdiPlus} title="Add">
<AssetSelectContextMenu icon={mdiPlus} title="Add to...">
<AddToAlbum />
<AddToAlbum shared />
</AssetSelectContextMenu>
<DeleteAssets {onAssetDelete} />
<FavoriteAction removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
<DeleteAssets menuItem {onAssetDelete} />
</AssetSelectContextMenu>
</AssetSelectControlBar>
</div>

4
web/src/routes/(user)/trash/+page.svelte
View File

@ -76,13 +76,13 @@
<LinkButton on:click={handleRestoreTrash}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiHistory} size="18" />
Restore All
Restore all
</div>
</LinkButton>
<LinkButton on:click={() => (isShowEmptyConfirmation = true)}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiDeleteOutline} size="18" />
Empty Trash
Empty trash
</div>
</LinkButton>
</div>