feat(web): add justify layout for GalleryViewer (#2207)

* Implemented justify layout

* Fixed issue with asset selection does not show style for selected assets

* pr feedback

* PR feedback

* fix test

* Added flip animation
This commit is contained in:
Alex 2023-04-08 20:40:37 -05:00 committed by GitHub
parent d76b3c8f78
commit 91e27affeb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 79 additions and 25 deletions

View file

@ -15,6 +15,8 @@
export let asset: AssetResponseDto;
export let groupIndex = 0;
export let thumbnailSize: number | undefined = undefined;
export let thumbnailWidth: number | undefined = undefined;
export let thumbnailHeight: number | undefined = undefined;
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
export let selected = false;
export let disabled = false;
@ -30,6 +32,10 @@
return [thumbnailSize, thumbnailSize];
}
if (thumbnailWidth && thumbnailHeight) {
return [thumbnailWidth, thumbnailHeight];
}
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
return [176, 235];
} else if (asset.exifInfo?.orientation === 'Horizontal (normal)') {
@ -57,7 +63,9 @@
<div
style:width="{width}px"
style:height="{height}px"
class="relative group {disabled ? 'bg-gray-300' : 'bg-immich-primary/20'}"
class="relative group {disabled
? 'bg-gray-300'
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
class:cursor-not-allowed={disabled}
class:hover:cursor-pointer={!disabled}
on:mouseenter={() => (mouseOver = true)}