highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-09-20 13:01:07 +02: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
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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