stepus53/photos
1
0
Fork 0
mirror of https://github.com/usatiuk/photos.git synced 2025-10-28 15:27:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

click on blank space closes image

Browse Source
This commit is contained in:
Stepan Usatiuk
2022-04-19 19:06:13 +00:00
committed by Stepan Usatiuk
parent e020261a4b
commit 6e716d7b01
2 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/Photos/Overview.tsx
View File

@@ -85,13 +85,11 @@ export const OverviewComponent: React.FunctionComponent<
);
const photosEls = photos.map((photo) => {
return (
<>
<PhotoCard
key={photo.id}
photo={photo}
onClick={() => onCardClick(photo.id)}
/>
</>
<PhotoCard
key={photo.id}
photo={photo}
onClick={() => onCardClick(photo.id)}
/>
);
});
return [
@@ -144,7 +142,12 @@ export const OverviewComponent: React.FunctionComponent<
>
<div id="photoOverlayContainer">
<div id="photo">
<Photo id={selectedPhoto} />
<Photo
id={selectedPhoto}
close={() => {
setOverlayOpen(false);
}}
/>
</div>
<div id="photoOverlayDrawer">
<Button

26
frontend/src/Photos/Photo.tsx
View File

@@ -20,22 +20,18 @@ export interface IPhotoComponentProps {
photoState: IPhotoState | undefined;
fetchPhoto: (id: number) => void;
close: () => void;
}
export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
props,
) => {
const [
smallPreviewFetching,
setSmallPreviewFetching,
] = React.useState<boolean>(false);
const [
largePreviewFetching,
setLargePreviewFetching,
] = React.useState<boolean>(false);
const [originalFetching, setOriginalFetching] = React.useState<boolean>(
false,
);
const [smallPreviewFetching, setSmallPreviewFetching] =
React.useState<boolean>(false);
const [largePreviewFetching, setLargePreviewFetching] =
React.useState<boolean>(false);
const [originalFetching, setOriginalFetching] =
React.useState<boolean>(false);
const [smallPreview, setSmallPreview] = React.useState<string | null>(null);
const [largePreview, setLargePreview] = React.useState<string | null>(null);
@@ -97,7 +93,13 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
return (
<>
{fileExists ? (
<div id="photoView">
<div
id="photoView"
onClick={(e: React.MouseEvent) => {
if ((e.target as HTMLElement).tagName !== "IMG")
props.close();
}}
>
<img
ref={imgRef}
id="photoImg"