self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 00:18:28 +02:00
Code Activity

chore(web): context menu improvements (#10475)

Browse Source 
- ability to add custom hover colors
- migrate activity menu to ButtonContextMenu component
- onClick callbacks rather than events for menu options
- remove slots
- configurable menu option colors
- improve menu option layout
This commit is contained in:
Ben
2024-06-20 21:15:36 +00:00
committed by GitHub
parent 5cde52eec9
commit 0fda67543d
19 changed files with 102 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/album-page/albums-list.svelte
View File

@@ -424,13 +424,13 @@
<MenuOption
icon={mdiRenameOutline}
text={$t('edit_album')}
on:click={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
onClick={() => contextMenuTargetAlbum && handleEdit(contextMenuTargetAlbum)}
/>
<MenuOption icon={mdiShareVariantOutline} text={$t('share')} on:click={() => openShareModal()} />
<MenuOption icon={mdiShareVariantOutline} text={$t('share')} onClick={() => openShareModal()} />
{/if}
<MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} on:click={() => handleDownloadAlbum()} />
<MenuOption icon={mdiFolderDownloadOutline} text={$t('download')} onClick={() => handleDownloadAlbum()} />
{#if showFullContextMenu}
<MenuOption icon={mdiDeleteOutline} text={$t('delete')} on:click={() => setAlbumToDelete()} />
<MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
{/if}
</RightClickContextMenu>

6
web/src/lib/components/album-page/share-info-modal.svelte
View File

@@ -109,14 +109,14 @@
{#if isOwned}
<ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
{#if role === AlbumUserRole.Viewer}
<MenuOption on:click={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
<MenuOption onClick={() => handleSetReadonly(user, AlbumUserRole.Editor)} text={$t('allow_edits')} />
{:else}
<MenuOption
on:click={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
onClick={() => handleSetReadonly(user, AlbumUserRole.Viewer)}
text={$t('disallow_edits')}
/>
{/if}
<MenuOption on:click={() => handleMenuRemove(user)} text={$t('remove')} />
<MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
</ButtonContextMenu>
{:else if user.id == currentUser?.id}
<button

67
web/src/lib/components/asset-viewer/activity-viewer.svelte
View File

@@ -4,7 +4,6 @@
import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
import { getAssetType } from '$lib/utils/asset-utils';
import { autoGrowHeight } from '$lib/actions/autogrow';
import { clickOutside } from '$lib/actions/click-outside';
import { handleError } from '$lib/utils/handle-error';
import { isTenMinutesApart } from '$lib/utils/timesince';
import {
@@ -16,7 +15,7 @@
type AssetTypeEnum,
type UserResponseDto,
} from '@immich/sdk';
import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend } from '@mdi/js';
import { mdiClose, mdiDotsVertical, mdiHeart, mdiSend, mdiDeleteOutline } from '@mdi/js';
import * as luxon from 'luxon';
import { createEventDispatcher, onMount } from 'svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -26,6 +25,8 @@
import { locale } from '$lib/stores/preferences.store';
import { shortcut } from '$lib/actions/shortcut';
import { t } from 'svelte-i18n';
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@@ -71,7 +72,6 @@
close: void;
}>();
$: showDeleteReaction = Array.from({ length: reactions.length }).fill(false);
$: {
if (innerHeight && activityHeight) {
divHeight = innerHeight - activityHeight;
@@ -109,7 +109,6 @@
try {
await deleteActivity({ id: reaction.id });
reactions.splice(index, 1);
showDeleteReaction.splice(index, 1);
reactions = reactions;
if (isLiked && reaction.type === 'like' && reaction.id == isLiked.id) {
dispatch('deleteLike');
@@ -147,10 +146,6 @@
}
isSendingMessage = false;
};
const showOptionsMenu = (index: number) => {
showDeleteReaction[index] = !showDeleteReaction[index];
};
</script>
<div class="overflow-y-hidden relative h-full" bind:offsetHeight={innerHeight}>
@@ -188,27 +183,23 @@
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
<div class="flex items-start w-fit pt-[5px]">
<CircleIconButton
<div class="mr-4">
<ButtonContextMenu
icon={mdiDotsVertical}
title={$t('comment_options')}
align="top-right"
direction="left"
size="16"
on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
/>
</div>
{/if}
<div>
{#if showDeleteReaction[index]}
<button
type="button"
class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
on:click={() => handleDeleteReaction(reaction, index)}
>
Remove
</button>
{/if}
<MenuOption
activeColor="bg-red-200"
icon={mdiDeleteOutline}
text={$t('remove')}
onClick={() => handleDeleteReaction(reaction, index)}
/>
</ButtonContextMenu>
</div>
{/if}
</div>
{#if (index != reactions.length - 1 && !shouldGroup(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
@@ -240,27 +231,23 @@
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
<div class="flex items-start w-fit">
<CircleIconButton
<div class="mr-4">
<ButtonContextMenu
icon={mdiDotsVertical}
title={$t('reaction_options')}
align="top-right"
direction="left"
size="16"
on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
/>
</div>
{/if}
<div>
{#if showDeleteReaction[index]}
<button
type="button"
class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
use:clickOutside={{ onOutclick: () => (showDeleteReaction[index] = false) }}
on:click={() => handleDeleteReaction(reaction, index)}
>
Remove
</button>
{/if}
<MenuOption
activeColor="bg-red-200"
icon={mdiDeleteOutline}
text={$t('remove')}
onClick={() => handleDeleteReaction(reaction, index)}
/>
</ButtonContextMenu>
</div>
{/if}
</div>
{#if (index != reactions.length - 1 && isTenMinutesApart(reactions[index].createdAt, reactions[index + 1].createdAt)) || index === reactions.length - 1}
<div

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

@@ -177,65 +177,65 @@
/>
<ButtonContextMenu direction="left" align="top-right" color="opaque" title={$t('more')} icon={mdiDotsVertical}>
{#if showSlideshow}
<MenuOption icon={mdiPresentationPlay} on:click={() => onMenuClick('playSlideShow')} text={$t('slideshow')} />
<MenuOption icon={mdiPresentationPlay} onClick={() => onMenuClick('playSlideShow')} text={$t('slideshow')} />
{/if}
{#if showDownloadButton}
<MenuOption icon={mdiFolderDownloadOutline} on:click={() => onMenuClick('download')} text={$t('download')} />
<MenuOption icon={mdiFolderDownloadOutline} onClick={() => onMenuClick('download')} text={$t('download')} />
{/if}
{#if asset.isTrashed}
<MenuOption icon={mdiHistory} on:click={() => onMenuClick('restoreAsset')} text={$t('restore')} />
<MenuOption icon={mdiHistory} onClick={() => onMenuClick('restoreAsset')} text={$t('restore')} />
{:else}
<MenuOption icon={mdiImageAlbum} on:click={() => onMenuClick('addToAlbum')} text={$t('add_to_album')} />
<MenuOption icon={mdiImageAlbum} onClick={() => onMenuClick('addToAlbum')} text={$t('add_to_album')} />
<MenuOption
icon={mdiShareVariantOutline}
on:click={() => onMenuClick('addToSharedAlbum')}
onClick={() => onMenuClick('addToSharedAlbum')}
text={$t('add_to_shared_album')}
/>
{/if}
{#if isOwner}
{#if hasStackChildren}
<MenuOption icon={mdiImageMinusOutline} on:click={() => onMenuClick('unstack')} text={$t('unstack')} />
<MenuOption icon={mdiImageMinusOutline} onClick={() => onMenuClick('unstack')} text={$t('unstack')} />
{/if}
{#if album}
<MenuOption
text={$t('set_as_album_cover')}
icon={mdiImageOutline}
on:click={() => onMenuClick('setAsAlbumCover')}
onClick={() => onMenuClick('setAsAlbumCover')}
/>
{/if}
{#if asset.type === AssetTypeEnum.Image}
<MenuOption
icon={mdiAccountCircleOutline}
on:click={() => onMenuClick('asProfileImage')}
onClick={() => onMenuClick('asProfileImage')}
text={$t('set_as_profile_picture')}
/>
{/if}
<MenuOption
on:click={() => onMenuClick('toggleArchive')}
onClick={() => onMenuClick('toggleArchive')}
icon={asset.isArchived ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline}
text={asset.isArchived ? $t('unarchive') : $t('to_archive')}
/>
<MenuOption
icon={mdiUpload}
on:click={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
onClick={() => openFileUploadDialog({ multiple: false, assetId: asset.id })}
text={$t('replace_with_upload')}
/>
<hr />
<MenuOption
icon={mdiDatabaseRefreshOutline}
on:click={() => onJobClick(AssetJobName.RefreshMetadata)}
onClick={() => onJobClick(AssetJobName.RefreshMetadata)}
text={getAssetJobName(AssetJobName.RefreshMetadata)}
/>
<MenuOption
icon={mdiImageRefreshOutline}
on:click={() => onJobClick(AssetJobName.RegenerateThumbnail)}
onClick={() => onJobClick(AssetJobName.RegenerateThumbnail)}
text={getAssetJobName(AssetJobName.RegenerateThumbnail)}
/>
{#if asset.type === AssetTypeEnum.Video}
<MenuOption
icon={mdiCogRefreshOutline}
on:click={() => onJobClick(AssetJobName.TranscodeVideo)}
onClick={() => onJobClick(AssetJobName.TranscodeVideo)}
text={getAssetJobName(AssetJobName.TranscodeVideo)}
/>
{/if}

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

@@ -75,15 +75,15 @@
icon={mdiDotsVertical}
title={$t('show_person_options')}
>
<MenuOption on:click={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
<MenuOption on:click={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
<MenuOption onClick={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
<MenuOption onClick={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
<MenuOption
on:click={() => onMenuClick('set-birth-date')}
onClick={() => onMenuClick('set-birth-date')}
icon={mdiCalendarEditOutline}
text={$t('set_date_of_birth')}
/>
<MenuOption
on:click={() => onMenuClick('merge-people')}
onClick={() => onMenuClick('merge-people')}
icon={mdiAccountMultipleCheckOutline}
text={$t('merge_people')}
/>

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

@@ -33,7 +33,7 @@
</script>
<MenuOption
on:click={() => (showAlbumPicker = true)}
onClick={() => (showAlbumPicker = true)}
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
/>

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

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

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

@@ -34,6 +34,6 @@
{#each jobs as job}
{#if isAllVideos || job !== AssetJobName.TranscodeVideo}
<MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} on:click={() => handleRunJob(job)} />
<MenuOption text={getAssetJobName(job)} icon={getAssetJobIcon(job)} onClick={() => handleRunJob(job)} />
{/if}
{/each}

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

@@ -28,7 +28,7 @@
</script>
{#if menuItem}
<MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} on:click={() => (isShowChangeDate = true)} />
<MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} onClick={() => (isShowChangeDate = true)} />
{/if}
{#if isShowChangeDate}
<ChangeDate

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

@@ -31,7 +31,7 @@
<MenuOption
text={$t('change_location')}
icon={mdiMapMarkerMultipleOutline}
on:click={() => (isShowChangeLocation = true)}
onClick={() => (isShowChangeLocation = true)}
/>
{/if}
{#if isShowChangeLocation}

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

@@ -39,7 +39,7 @@
</script>
{#if menuItem}
<MenuOption text={label} icon={mdiDeleteOutline} on:click={handleTrash} />
<MenuOption text={label} icon={mdiDeleteOutline} onClick={handleTrash} />
{:else if loading}
<CircleIconButton title={$t('loading')} icon={mdiTimerSand} />
{:else}

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

@@ -27,7 +27,7 @@
</script>
{#if menuItem}
<MenuOption text={$t('download')} icon={menuItemIcon} on:click={handleDownloadFiles} />
<MenuOption text={$t('download')} icon={menuItemIcon} onClick={handleDownloadFiles} />
{:else}
<CircleIconButton title={$t('download')} icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
{/if}

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

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

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

@@ -57,7 +57,7 @@
</script>
{#if menuItem}
<MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} on:click={removeFromAlbum} />
<MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} onClick={removeFromAlbum} />
{:else}
<CircleIconButton title={$t('remove_from_album')} icon={mdiDeleteOutline} on:click={removeFromAlbum} />
{/if}

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

@@ -40,7 +40,7 @@
</script>
{#if unstack}
<MenuOption text={$t('unstack')} icon={mdiImageMinusOutline} on:click={handleUnstack} />
<MenuOption text={$t('unstack')} icon={mdiImageMinusOutline} onClick={handleUnstack} />
{:else}
<MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} on:click={handleStack} />
<MenuOption text={$t('stack')} icon={mdiImageMultipleOutline} onClick={handleStack} />
{/if}

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

@@ -1,24 +1,22 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { generateId } from '$lib/utils/generate-id';
import { createEventDispatcher } from 'svelte';
import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
export let text = '';
export let text: string;
export let subtitle = '';
export let icon = '';
export let activeColor = 'bg-slate-300';
export let textColor = 'text-immich-fg dark:text-immich-dark-bg';
export let onClick: () => void;
let id: string = generateId();
$: isActive = $selectedIdStore === id;
const dispatch = createEventDispatcher<{
click: void;
}>();
const handleClick = () => {
$optionClickCallbackStore?.();
dispatch('click');
onClick();
};
</script>
@@ -29,27 +27,20 @@
on:click={handleClick}
on:mouseover={() => ($selectedIdStore = id)}
on:mouseleave={() => ($selectedIdStore = undefined)}
class="w-full p-4 text-left text-sm font-medium text-immich-fg focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg cursor-pointer border-gray-200"
class:bg-slate-300={isActive}
class:bg-slate-100={!isActive}
class="w-full p-4 text-left text-sm font-medium {textColor} focus:outline-none focus:ring-2 focus:ring-inset cursor-pointer border-gray-200 flex gap-2 items-center {isActive
? activeColor
: 'bg-slate-100'}"
role="menuitem"
>
{#if text}
{#if icon}
<p class="flex gap-2">
<Icon path={icon} ariaHidden={true} size="18" />
{text}
</p>
{:else}
{text}
{/if}
{:else}
<slot />
{/if}
<slot name="subtitle">
<div>
{text}
{#if subtitle}
<p class="text-xs text-gray-500">
{subtitle}
</p>
</slot>
{/if}
</div>
</li>

12
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -426,7 +426,7 @@
<MenuOption
text={$t('set_as_album_cover')}
icon={mdiImageOutline}
on:click={() => updateThumbnailUsingCurrentSelection()}
onClick={() => updateThumbnailUsingCurrentSelection()}
/>
{/if}
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
@@ -468,14 +468,10 @@
<MenuOption
icon={mdiImageOutline}
text={$t('select_album_cover')}
on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
onClick={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
/>
<MenuOption
icon={mdiCogOutline}
text={$t('options')}
on:click={() => (viewMode = ViewMode.OPTIONS)}
/>
<MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} on:click={() => handleRemoveAlbum()} />
<MenuOption icon={mdiCogOutline} text={$t('options')} onClick={() => (viewMode = ViewMode.OPTIONS)} />
<MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleRemoveAlbum()} />
</ButtonContextMenu>
{/if}
{/if}

10
web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -390,7 +390,7 @@
<MenuOption
icon={mdiAccountMultipleCheckOutline}
text={$t('fix_incorrect_match')}
on:click={handleReassignAssets}
onClick={handleReassignAssets}
/>
<ChangeDate menuItem />
<ChangeLocation menuItem />
@@ -406,22 +406,22 @@
<MenuOption
text={$t('select_featured_photo')}
icon={mdiAccountBoxOutline}
on:click={() => (viewMode = ViewMode.SELECT_PERSON)}
onClick={() => (viewMode = ViewMode.SELECT_PERSON)}
/>
<MenuOption
text={data.person.isHidden ? $t('unhide_person') : $t('hide_person')}
icon={data.person.isHidden ? mdiEyeOutline : mdiEyeOffOutline}
on:click={() => toggleHidePerson()}
onClick={() => toggleHidePerson()}
/>
<MenuOption
text={$t('set_date_of_birth')}
icon={mdiCalendarEditOutline}
on:click={() => (viewMode = ViewMode.BIRTH_DATE)}
onClick={() => (viewMode = ViewMode.BIRTH_DATE)}
/>
<MenuOption
text={$t('merge_people')}
icon={mdiAccountMultipleCheckOutline}
on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)}
onClick={() => (viewMode = ViewMode.MERGE_PEOPLE)}
/>
</ButtonContextMenu>
</svelte:fragment>

23
web/src/routes/admin/library-management/+page.svelte
View File

@@ -380,29 +380,32 @@
icon={mdiDotsVertical}
title={$t('library_options')}
>
<MenuOption on:click={() => onRenameClicked(index)} text={$t('rename')} />
<MenuOption on:click={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
<MenuOption on:click={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
<MenuOption onClick={() => onRenameClicked(index)} text={$t('rename')} />
<MenuOption onClick={() => onEditImportPathClicked(index)} text={$t('edit_import_paths')} />
<MenuOption onClick={() => onScanSettingClicked(index)} text={$t('scan_settings')} />
<hr />
<MenuOption on:click={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
<MenuOption onClick={() => onScanNewLibraryClicked(library)} text={$t('scan_new_library_files')} />
<MenuOption
on:click={() => onScanAllLibraryFilesClicked(library)}
onClick={() => onScanAllLibraryFilesClicked(library)}
text={$t('scan_all_library_files')}
subtitle={$t('only_refreshes_modified_files')}
/>
<MenuOption
on:click={() => onForceScanAllLibraryFilesClicked(library)}
onClick={() => onForceScanAllLibraryFilesClicked(library)}
text={$t('force_re-scan_library_files')}
subtitle={$t('refreshes_every_file')}
/>
<hr />
<MenuOption
on:click={() => onRemoveOfflineFilesClicked(library)}
onClick={() => onRemoveOfflineFilesClicked(library)}
text={$t('remove_offline_files')}
/>
<MenuOption on:click={() => onDeleteLibraryClicked(library, index)}>
<p class="text-red-600">{$t('delete_library')}</p>
</MenuOption>
<MenuOption
text={$t('delete_library')}
activeColor="bg-red-200"
textColor="text-red-600"
onClick={() => onDeleteLibraryClicked(library, index)}
/>
</ButtonContextMenu>
</td>
</tr>