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
@@ -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}
@@ -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>