You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-06-27 05:11:11 +02:00
@ -1,33 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
export let direction: 'left' | 'right' = 'right';
|
||||
export let x = 0;
|
||||
export let y = 0;
|
||||
export let direction: 'left' | 'right' = 'right';
|
||||
export let x = 0;
|
||||
export let y = 0;
|
||||
|
||||
let menuElement: HTMLDivElement;
|
||||
let left: number;
|
||||
let top: number;
|
||||
let menuElement: HTMLDivElement;
|
||||
let left: number;
|
||||
let top: number;
|
||||
|
||||
$: if (menuElement) {
|
||||
const rect = menuElement.getBoundingClientRect();
|
||||
const directionWidth = direction === 'left' ? rect.width : 0;
|
||||
$: if (menuElement) {
|
||||
const rect = menuElement.getBoundingClientRect();
|
||||
const directionWidth = direction === 'left' ? rect.width : 0;
|
||||
|
||||
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
|
||||
top = Math.min(window.innerHeight - rect.height, y);
|
||||
}
|
||||
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
|
||||
top = Math.min(window.innerHeight - rect.height, y);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
transition:slide={{ duration: 200, easing: quintOut }}
|
||||
bind:this={menuElement}
|
||||
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
|
||||
style="left: {left}px; top: {top}px;"
|
||||
role="menu"
|
||||
use:clickOutside
|
||||
on:outclick
|
||||
transition:slide={{ duration: 200, easing: quintOut }}
|
||||
bind:this={menuElement}
|
||||
class="absolute w-[200px] z-[99999] rounded-lg overflow-hidden shadow-lg"
|
||||
style="left: {left}px; top: {top}px;"
|
||||
role="menu"
|
||||
use:clickOutside
|
||||
on:outclick
|
||||
>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
@ -1,15 +1,15 @@
|
||||
<script>
|
||||
export let text = '';
|
||||
export let text = '';
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click
|
||||
class="bg-slate-100 hover:bg-gray-200 text-immich-fg dark:text-immich-dark-bg p-4 w-full text-left text-sm font-medium focus:outline-none focus:ring-inset focus:ring-2"
|
||||
role="menuitem"
|
||||
on:click
|
||||
class="bg-slate-100 hover:bg-gray-200 text-immich-fg dark:text-immich-dark-bg p-4 w-full text-left text-sm font-medium focus:outline-none focus:ring-inset focus:ring-2"
|
||||
role="menuitem"
|
||||
>
|
||||
{#if text}
|
||||
{text}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
{#if text}
|
||||
{text}
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
|
Reference in New Issue
Block a user