usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-17 14:19:17 +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); onOpenChange(false);
}; };
// Prevent closing when clicking on the image const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
const handleImageClick = (event: React.MouseEvent) => { if (event.target === event.currentTarget) {
event.stopPropagation(); handleClose();
}
}; };
// Return early if no images provided // Return early if no images provided
@ -71,12 +72,11 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
</div> </div>
{/* Image container */} {/* 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 <img
src={imgUrls[safeIndex]} src={imgUrls[safeIndex]}
alt={`Preview image ${safeIndex + 1} of ${imgUrls.length}`} alt={`Preview image ${safeIndex + 1} of ${imgUrls.length}`}
className="max-w-full max-h-full object-contain select-none" className="max-w-full max-h-full object-contain select-none"
onClick={handleImageClick}
draggable={false} draggable={false}
loading="eager" loading="eager"
decoding="async" decoding="async"