highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-03-28 18:53:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Image gallery: Only show open button on over

Browse Source
This commit is contained in:
hzrd149 2023-07-10 09:43:56 -05:00
parent 40ad9e9d28
commit b32b6be9c0
2 changed files with 16 additions and 3 deletions
.changeset
smooth-bikes-appear.md
src/components/timeline-page/media-timeline
index.tsx

5
.changeset/smooth-bikes-appear.md Normal file

@ -0,0 +1,5 @@
---
"nostrudel": patch
---
Image gallery: Only show open button on over

14
src/components/timeline-page/media-timeline/index.tsx

@ -3,17 +3,24 @@ import { TimelineLoader } from "../../../classes/timeline-loader";
import useSubject from "../../../hooks/use-subject";
import { matchImageUrls } from "../../../helpers/regexp";
import { ImageGalleryLink, ImageGalleryProvider } from "../../image-gallery";
import { Box, Grid, IconButton } from "@chakra-ui/react";
import { Box, IconButton } from "@chakra-ui/react";
import { useIsMobile } from "../../../hooks/use-is-mobile";
import { useNavigate } from "react-router-dom";
import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
import { getSharableNoteId } from "../../../helpers/nip19";
import { ExternalLinkIcon } from "../../icons";
import styled from "@emotion/styled";
const matchAllImages = new RegExp(matchImageUrls, "ig");
type ImagePreview = { eventId: string; src: string; index: number };
const StyledImageGalleryLink = styled(ImageGalleryLink)`
&:not(:hover) > button {
display: none;
}
`;
const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
const navigate = useNavigate();
@ -21,7 +28,7 @@ const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
useRegisterIntersectionEntity(ref, image.eventId);
return (
<ImageGalleryLink href={image.src} position="relative" ref={ref}>
<StyledImageGalleryLink href={image.src} position="relative" ref={ref}>
<Box aspectRatio={1} backgroundImage={`url(${image.src})`} backgroundSize="cover" backgroundPosition="center" />
<IconButton
icon={<ExternalLinkIcon />}
@ -30,13 +37,14 @@ const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
right="2"
top="2"
size="sm"
colorScheme="brand"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
navigate(`/n/${getSharableNoteId(image.eventId)}`);
}}
/>
</ImageGalleryLink>
</StyledImageGalleryLink>
);
});