usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-16 21:59:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: allow closing image preview via backdrop click (#5243)

Browse source
This commit is contained in:
Simon 2025-11-10 03:12:45 -08:00 • committed by GitHub
parent 6fc0ef7cc2
commit bb3d808e0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/src/components/PreviewImageDialog.tsx
View file

@ -40,9 +40,10 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
onOpenChange(false);
};
// Prevent closing when clicking on the image
const handleImageClick = (event: React.MouseEvent) => {
event.stopPropagation();
const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (event.target === event.currentTarget) {
handleClose();
}
};
// Return early if no images provided
@ -71,12 +72,11 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
</div>
{/* Image container */}
<div className="w-full h-full flex items-center justify-center p-4 sm:p-8 overflow-auto">
<div className="w-full h-full flex items-center justify-center p-4 sm:p-8 overflow-auto" onClick={handleBackdropClick}>
<img
src={imgUrls[safeIndex]}
alt={`Preview image ${safeIndex + 1} of ${imgUrls.length}`}
className="max-w-full max-h-full object-contain select-none"
onClick={handleImageClick}
draggable={false}
loading="eager"
decoding="async"