self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-25 04:53:00 +02:00
Code Issues Releases Activity

feat(web): enhance ux/ui of the album list page (#8499)

Browse Source 
* feat(web): enhance ux/ui of the album list page

* fix unit tests

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ethan Margaillan
2024-04-05 21:19:26 +02:00
committed by GitHub
parent 939e91f9ed
commit 8f981b6052
27 changed files with 1352 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,30 +1,40 @@
<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';
export let direction: 'left' | 'right' = 'right';
export let x = 0;
export let y = 0;
let menuElement: HTMLDivElement;
export let menuElement: HTMLDivElement | undefined = undefined;
let left: number;
let top: number;
$: if (menuElement) {
const rect = menuElement.getBoundingClientRect();
const directionWidth = direction === 'left' ? rect.width : 0;
// We need to bind clientHeight since the bounding box may return a height
// of zero when starting the 'slide' animation.
let height: number;
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
top = Math.min(window.innerHeight - rect.height, y);
$: {
if (menuElement) {
const rect = menuElement.getBoundingClientRect();
const directionWidth = direction === 'left' ? rect.width : 0;
const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
left = Math.min(window.innerWidth - rect.width, x - directionWidth);
top = Math.min(window.innerHeight - menuHeight, y);
}
}
</script>
<div
transition:slide={{ duration: 200, easing: quintOut }}
bind:this={menuElement}
bind:clientHeight={height}
transition:slide={{ duration: 250, easing: quintOut }}
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;"
style:top="{top}px"
style:left="{left}px"
role="menu"
use:clickOutside
on:outclick