self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +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
23 changed files with 204 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}