Skip to content

Commit d3fe52d

Browse files
pwfisherpwfisher
committed
add (empty) ActionsMenu to DrawingPage
1 parent c93af5a commit d3fe52d

File tree

5 files changed

+211
-118
lines changed

5 files changed

+211
-118
lines changed

‎explorer/components/DrawingPage.tsx‎

Lines changed: 0 additions & 118 deletions
This file was deleted.

‎explorer/components/DrawingPage/ActionsMenu.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { navBarItemStyles } from './styles'
4+
5+
export const ActionsMenu: React.FC = () => {
6+
const [isActive, setIsActive] = React.useState(false)
7+
8+
return (
9+
<Container title='More Actions' onClick={() => setIsActive(!isActive)}>
10+
<svg viewBox="0 0 24 24">
11+
<circle cx="5" cy="12" r="2" />
12+
<circle cx="12" cy="12" r="2" />
13+
<circle cx="19" cy="12" r="2" />
14+
</svg>
15+
<Popup isActive={isActive}>
16+
<Item>No actions available</Item>
17+
</Popup>
18+
</Container>
19+
)
20+
}
21+
22+
const Container = styled.button.attrs({ className: 'Explorer__ActionsMenu__Container'})`
23+
${navBarItemStyles}
24+
background: none;
25+
border: 0;
26+
27+
svg {
28+
display: block;
29+
width: 24px;
30+
}
31+
`
32+
33+
const Popup = styled.div.attrs({ className: 'Explorer__ActionsMenu__Popup'})<{ isActive: boolean }>`
34+
background: white;
35+
border: 1px solid rgba(0, 0, 0, 0.2);
36+
bottom: 100%;
37+
display: ${o => !o.isActive && 'none'};
38+
padding: 8px;
39+
position: absolute;
40+
right: 0;
41+
text-align: left;
42+
width: 200px;
43+
`
44+
45+
const Item = styled.div.attrs({ className: 'Explorer__ActionsMenu__Item'})``

‎explorer/components/DrawingPage/DrawingPage.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react'
2+
import { Drawing } from '../../types'
3+
import Link from 'next/link'
4+
import { assetPrefix } from '../../lib/assetPrefix'
5+
import {
6+
Container,
7+
Title,
8+
ImageWrap,
9+
Image,
10+
NavBar,
11+
ArrowButton,
12+
LeftArrow,
13+
RightArrow,
14+
DrawingLink,
15+
YearLink,
16+
DateLink,
17+
} from './styles'
18+
import { getPreviousSlug, getNextSlug } from '../../lib/drawings'
19+
import { useRouter } from 'next/router'
20+
import Div100vh from 'react-div-100vh'
21+
import { PageLayout } from '../PageLayout'
22+
import { ActionsMenu } from './ActionsMenu'
23+
24+
export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
25+
const router = useRouter()
26+
const goToPrevious = () => router.push(`/drawing/${getPreviousSlug(drawing.slug)}`)
27+
const goToNext = () => router.push(`/drawing/${getNextSlug(drawing.slug)}`)
28+
29+
const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
30+
const handler = ({
31+
ArrowUp: goToPrevious,
32+
ArrowDown: goToNext,
33+
ArrowLeft: goToPrevious,
34+
ArrowRight: goToNext,
35+
} as Record<string, Function>)[event.key]
36+
handler?.()
37+
}
38+
39+
return (
40+
<PageLayout title={`explodingdog ${year}`} showHeader={false} showFooter={false}>
41+
<Div100vh>
42+
<Container onKeyDown={onKeyDown} tabIndex={-1}>
43+
<Title>{drawing.title}</Title>
44+
<ImageWrap>
45+
<Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
46+
</ImageWrap>
47+
<NavBar>
48+
<Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
49+
<ArrowButton title='Previous'><LeftArrow /></ArrowButton>
50+
</Link>
51+
<DrawingLink title='Source' href={`http://explodingdog.com/title/${drawing.slug}.html`}>
52+
<b>#{drawing.number}</b>
53+
</DrawingLink>
54+
<Link href="/year/[id]" as={`/year/${year}`}>
55+
<YearLink title={`Drawings for ${drawing.year}`}><b>{year}</b></YearLink>
56+
</Link>
57+
<Link href="/day/[id]" as={`/day/${drawing.date}`}>
58+
<DateLink title={`Drawings for ${drawing.date}`}><b>{drawing.date.slice(5)}</b></DateLink>
59+
</Link>
60+
<ActionsMenu />
61+
<Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
62+
<ArrowButton title='Next'><RightArrow /></ArrowButton>
63+
</Link>
64+
</NavBar>
65+
</Container>
66+
</Div100vh>
67+
</PageLayout>
68+
)
69+
}

‎explorer/components/DrawingPage/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './DrawingPage'

‎explorer/components/DrawingPage/styles.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import styled, { css } from 'styled-components'
2+
3+
export const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Container'})`
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: space-between;
7+
height: 100%;
8+
`
9+
10+
export const Title = styled.h1.attrs({ className: 'Explorer__DrawingPage__Title'})`
11+
flex: 0 0 auto;
12+
font-size: 32px;
13+
font-weight: bold;
14+
padding: 16px 24px;
15+
text-align: center;
16+
`
17+
18+
export const ImageWrap = styled.figure.attrs({ className: 'Explorer__DrawingPage__ImageWrap'})`
19+
flex: 1 1 0;
20+
position: relative;
21+
`
22+
23+
export const Image = styled.img.attrs({ className: 'Explorer__DrawingPage__Image'})`
24+
display: block;
25+
height: 100%;
26+
object-fit: contain;
27+
position: absolute;
28+
width: 100%;
29+
`
30+
31+
export const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
32+
display: flex;
33+
flex: 0 0 auto;
34+
justify-content: space-between;
35+
font-size: 18px;
36+
font-weight: bold;
37+
height: 80px;
38+
`
39+
40+
export const navBarItemStyles = css`
41+
align-items: center;
42+
cursor: pointer;
43+
display: flex;
44+
padding: 0 2%;
45+
position: relative;
46+
user-select: none;
47+
48+
&:hover::after,
49+
&:focus::after {
50+
background: black;
51+
bottom: 0;
52+
content: '';
53+
display: block;
54+
height: 4px;
55+
left: 0;
56+
position: absolute;
57+
width: 100%;
58+
}
59+
`
60+
61+
export const ArrowButton = styled.button.attrs({ className: 'Explorer__DrawingPage__ArrowButton'})`
62+
${navBarItemStyles}
63+
background: none;
64+
border: 0;
65+
font: inherit;
66+
font-size: 24px;
67+
padding: 0 6%;
68+
`
69+
70+
export const Arrow = styled.div`
71+
border: solid currentColor;
72+
border-width: 4px 4px 0 0;
73+
height: 11px;
74+
width: 11px;
75+
`
76+
77+
export const LeftArrow = styled(Arrow).attrs({ className: 'Explorer__DrawingPage__LeftArrow'})`
78+
transform: rotate(225deg);
79+
`
80+
81+
export const RightArrow = styled(Arrow).attrs({ className: 'Explorer__DrawingPage__RightArrow'})`
82+
transform: rotate(45deg);
83+
`
84+
85+
export const YearLink = styled.a.attrs({ className: 'Explorer__DrawingPage__YearLink'})`
86+
${navBarItemStyles}
87+
color: black;
88+
`
89+
90+
export const DrawingLink = styled.a.attrs({ className: 'Explorer__DrawingPage__DrawingLink'})`
91+
${navBarItemStyles}
92+
`
93+
94+
export const DateLink = styled.a.attrs({ classNamne: 'Explorer__DrawingPage__Date'})`
95+
${navBarItemStyles}
96+
`

0 commit comments

Comments
 (0)