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

- 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

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}

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>

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>