cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): minor album card issues (#7975)

Browse Source 
* fix(web): minor album card issues

* fix album grid gap
This commit is contained in:
Michel Heusschen
2024-03-15 17:03:54 +01:00
committed by GitHub
parent 0f79c4ff46
commit cfb14ca80b
7 changed files with 42 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/album-page/album-card.svelte
+13 -23
View File
@@ -5,25 +5,20 @@
import { getAssetThumbnailUrl } from '$lib/utils';
import { ThumbnailFormat, getAssetThumbnail, getUserById, type AlbumResponseDto } from '@immich/sdk';
import { mdiDotsVertical } from '@mdi/js';
import { createEventDispatcher, onMount } from 'svelte';
import { getContextMenuPosition } from '../../utils/context-menu';
import { onMount } from 'svelte';
import { getContextMenuPosition, type ContextMenuPosition } from '../../utils/context-menu';
import IconButton from '../elements/buttons/icon-button.svelte';
import type { OnClick, OnShowContextMenu } from './album-card';
export let album: AlbumResponseDto;
export let isSharingView = false;
export let showItemCount = true;
export let showContextMenu = true;
export let preload = false;
let showVerticalDots = false;
export let onShowContextMenu: ((position: ContextMenuPosition) => void) | undefined = undefined;
$: imageData = album.albumThumbnailAssetId
? getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
: null;
const dispatchClick = createEventDispatcher<OnClick>();
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
const loadHighQualityThumbnail = async (assetId: string | null) => {
if (!assetId) {
return;
@@ -33,8 +28,11 @@
return URL.createObjectURL(data);
};
const showAlbumContextMenu = (e: MouseEvent) =>
dispatchShowContextMenu('showalbumcontextmenu', getContextMenuPosition(e));
const showAlbumContextMenu = (e: MouseEvent) => {
e.stopPropagation();
e.preventDefault();
onShowContextMenu?.(getContextMenuPosition(e));
};
onMount(async () => {
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || null;
@@ -43,25 +41,17 @@
const getAlbumOwnerInfo = () => getUserById({ id: album.ownerId });
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="group relative mt-4 rounded-2xl border-[1px] border-transparent p-5 hover:cursor-pointer hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
on:click={() => dispatchClick('click', album)}
on:keydown={() => dispatchClick('click', album)}
on:mouseenter={() => (showVerticalDots = true)}
on:mouseleave={() => (showVerticalDots = false)}
class="group relative rounded-2xl border border-transparent p-5 hover:bg-gray-100 hover:border-gray-200 dark:hover:border-gray-800 dark:hover:bg-gray-900"
data-testid="album-card"
>
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if showContextMenu}
{#if onShowContextMenu}
<div
id={`icon-${album.id}`}
class="absolute right-6 top-6 z-10"
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
class:hidden={!showVerticalDots}
id="icon-{album.id}"
class="absolute right-6 top-6 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100"
data-testid="context-button-parent"
>
<IconButton color="transparent-primary">
<IconButton color="transparent-primary" title="Show album options" on:click={showAlbumContextMenu}>
<Icon path={mdiDotsVertical} size="20" class="icon-white-drop-shadow text-white" />
</IconButton>
</div>