OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

cuter play/pause button at top of controls

Browse source
This commit is contained in:
Emi Matchu 2020-09-24 06:04:59 -07:00
parent c4a9ee8497
commit 5027a62ec5
1 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/app/WardrobePage/OutfitControls.js
View file

@ -2,6 +2,7 @@ import React from "react";
import { css, cx } from "emotion"; import { css, cx } from "emotion";
import { import {
Box, Box,
Button,
DarkMode, DarkMode,
Flex, Flex,
IconButton, IconButton,
@ -88,9 +89,9 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
padding={{ base: 2, lg: 6 }} padding={{ base: 2, lg: 6 }}
display="grid" display="grid"
overflow="auto" overflow="auto"
gridTemplateAreas={`"back sharing" gridTemplateAreas={`"back play-pause sharing"
"space space" "space space space"
"picker picker"`} "picker picker picker"`}
gridTemplateRows="auto minmax(1rem, 1fr) auto" gridTemplateRows="auto minmax(1rem, 1fr) auto"
className={cx( className={cx(
css` css`
@ -139,6 +140,11 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
d="inline-flex" // Not sure why <a> requires this to style right! ^^` d="inline-flex" // Not sure why <a> requires this to style right! ^^`
/> />
</Box> </Box>
<Box gridArea="play-pause" display="flex" justifyContent="center">
<DarkMode>
<PlayPauseButton />
</DarkMode>
</Box>
<Stack <Stack
gridArea="sharing" gridArea="sharing"
alignSelf="flex-end" alignSelf="flex-end"
@ -152,9 +158,6 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
<Box> <Box>
<CopyLinkButton outfitState={outfitState} /> <CopyLinkButton outfitState={outfitState} />
</Box> </Box>
<Box>
<PlayPauseButton />
</Box>
</Stack> </Stack>
<Box gridArea="space" onClick={maybeUnlockFocus} /> <Box gridArea="space" onClick={maybeUnlockFocus} />
<Flex gridArea="picker" justify="center" onClick={maybeUnlockFocus}> <Flex gridArea="picker" justify="center" onClick={maybeUnlockFocus}>
@ -246,17 +249,25 @@ function CopyLinkButton({ outfitState }) {
function PlayPauseButton() { function PlayPauseButton() {
const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true); const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true);
const label = isPaused ? "Start animations" : "Stop animations";
return ( return (
<Tooltip label={label} placement="left"> <Button
<Box> leftIcon={isPaused ? <MdPause /> : <MdPlayArrow />}
<ControlButton size="sm"
icon={isPaused ? <MdPlayArrow /> : <MdPause />} color="gray.300"
aria-label={label} variant="outline"
onClick={() => setIsPaused(!isPaused)} borderColor="gray.300"
/> borderRadius="full"
</Box> backgroundColor="blackAlpha.500"
</Tooltip> marginTop="0.3rem" // to center-align with buttons (not sure on amt?)
_hover={{
backgroundColor: "gray.600",
borderColor: "gray.50",
color: "gray.50",
}}
onClick={() => setIsPaused(!isPaused)}
>
{isPaused ? <>Paused</> : <>Playing</>}
</Button>
); );
} }