diff --git a/components/ContentThumb.tsx b/components/ContentThumb.tsx index 7064616..79568e8 100644 --- a/components/ContentThumb.tsx +++ b/components/ContentThumb.tsx @@ -1,22 +1,43 @@ -import { Link, styled } from 'components'; +import { Link, Dialog, styled, IconButton, useTheme } from 'components'; import { THUMB_HEIGHT, THUMB_WIDTH } from 'util/constants'; import { constructNextImageURL, contentUrl } from 'util/url-factory'; import { defineMessages, useIntl } from 'i18n'; import { Content } from 'data/graphql-generated'; +import { MouseEvent, useEffect, useState } from 'react'; +import { ArrowBackIosNew, ArrowForwardIos, Close } from '@mui/icons-material'; +import { Backdrop } from '@mui/material'; +import Header from './content/Header'; +import Image from 'next/image'; const ThumbLink = styled(Link)` - max-width: ${THUMB_WIDTH}px; - min-height: ${THUMB_HEIGHT}px; + width: ${THUMB_WIDTH}px; + height: ${THUMB_HEIGHT}px; display: flex; align-items: center; justify-content: center; `; +const DialogImage = styled('img')` + max-height: 80vh; + max-width: 100%; + + &:not(:last-child) { + margin-bottom: ${(props) => props.theme.spacing(1)}; + } +`; + +const DialogContent = styled('div')` + header { + align-self: center; + } +`; + const StyledThumb = styled('img')` display: inline-block; - max-width: ${THUMB_WIDTH}px; - max-height: ${THUMB_HEIGHT}px; + width: ${THUMB_WIDTH}px; + height: ${THUMB_HEIGHT}px; + object-fit: cover; `; const messages = defineMessages({ @@ -27,24 +48,56 @@ export default function Thumb({ className, item, currentContent: currentContentProp, + isOpen, + onOpen, + onClose, + handlePrev, + handleNext, }: { className?: string; item: Content; currentContent?: Content; + isOpen: boolean; + onOpen: () => void; + onClose: () => void; + handlePrev: () => void; + handleNext: () => void; }) { const intl = useIntl(); + const [isDialogOpen, setIsDialogOpen] = useState(false); + const theme = useTheme(); + + useEffect(() => setIsDialogOpen(isOpen), [isOpen]); const currentContent = currentContentProp || { forceRefresh: false }; const thumbAltText = intl.formatMessage(messages.thumbnail); - const thumb = ( + const thumb = // TODO(mime): is loading lazy necessary here for next.js? i forget - - ); + item.thumb.startsWith('/resource') ? ( + {thumbAltText} + ) : ( + + ); // We're using the fancy new "loading" attribute for images to lazy load thumbs. Woo! // return !isEditing && item.externalLink ? ( @@ -62,14 +115,112 @@ export default function Thumb({ // // ); + const handleClick = (evt: MouseEvent) => { + evt.preventDefault(); + + setIsDialogOpen(true); + onOpen(); + }; + const handleClose = () => { + setIsDialogOpen(false); + onClose(); + }; + + const isPhotosSectionAndHasPhotos = item.section === 'photos' && !!item.prefetchImages?.length; + return ( - - {thumb} - + <> + + {thumb} + + + {isPhotosSectionAndHasPhotos && ( + + + + + + + + + + + + + + +
+ {item.prefetchImages?.map((image) => )} + {/* */} + +
+ )} + ); } diff --git a/components/Help.tsx b/components/Help.tsx index 38a9bbc..58eef90 100644 --- a/components/Help.tsx +++ b/components/Help.tsx @@ -1,14 +1,4 @@ -import { - Checkbox, - IconButton, - List, - ListItem, - ListItemText, - Menu, - MenuItem, - SwipeableDrawer, - Typography, -} from '@mui/material'; +import { Checkbox, IconButton, List, ListItem, ListItemText, Menu, MenuItem, Drawer, Typography } from '@mui/material'; import { F, defineMessages, useIntl } from 'i18n'; import { MouseEvent, useContext, useEffect, useState } from 'react'; import { styled, useTheme } from '@mui/material/styles'; @@ -148,12 +138,7 @@ export default function Help() { - setIsExperimentsOpen(false)} - onOpen={() => setIsExperimentsOpen(true)} - > + setIsExperimentsOpen(false)}> Experiments @@ -170,7 +155,7 @@ export default function Help() { ))} - + ); } diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx index 6087c17..61a815c 100644 --- a/components/ItemWrapper.tsx +++ b/components/ItemWrapper.tsx @@ -80,7 +80,6 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })` & img { max-width: calc(100% + 16px); margin: ${(props) => props.theme.spacing(0, -1)}; - height: auto; } & img:not([alt='thumbnail']) { diff --git a/components/content/SiteMap.tsx b/components/content/SiteMap.tsx index ae82c1b..9bc2b34 100644 --- a/components/content/SiteMap.tsx +++ b/components/content/SiteMap.tsx @@ -15,7 +15,7 @@ import baseTheme from 'styles'; import constants from 'util/constants'; import { transientOptions } from 'util/css'; import { useRouter } from 'next/router'; -import { SwipeableDrawer, useMediaQuery } from '@mui/material'; +import { Drawer, useMediaQuery } from '@mui/material'; export const SITE_MAP_WIDTH = 175; @@ -35,7 +35,7 @@ const Nav = styled('nav', transientOptions)` 3px 3px ${(props) => props.theme.palette.primary.light}; `; -const SwipeableDrawerStyled = styled(SwipeableDrawer)` +const DrawerStyled = styled(Drawer)` height: calc(100vh - ${(props) => props.theme.spacing(1)} * 2); width: ${SITE_MAP_WIDTH}px; overflow: auto; @@ -266,7 +266,7 @@ export default function SiteMap({ content, username }: { content?: Content; user } const items = generateItems(siteMap); - const DrawerComponent = isTablet ? SwipeableDrawerStyled : Nav; + const DrawerComponent = isTablet ? DrawerStyled : Nav; return ( <> @@ -293,7 +293,6 @@ export default function SiteMap({ content, username }: { content?: Content; user anchor="left" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} - onOpen={() => setIsDrawerOpen(true)} PaperProps={{ sx: { width: '100%' } }} >