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

add focus state for own/want checkbox buttons

Browse source
This commit is contained in:
Emi Matchu 2020-09-12 22:45:58 -07:00
parent 3ecdd265c2
commit 3feade9241
1 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/ItemPage.js
View file

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import { css } from "emotion";
import { import {
AspectRatio, AspectRatio,
Badge, Badge,
@ -8,6 +9,7 @@ import {
VisuallyHidden, VisuallyHidden,
VStack, VStack,
useColorModeValue, useColorModeValue,
useTheme,
useToast, useToast,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
import { CheckIcon, ExternalLinkIcon, StarIcon } from "@chakra-ui/icons"; import { CheckIcon, ExternalLinkIcon, StarIcon } from "@chakra-ui/icons";
@ -180,11 +182,12 @@ function LinkBadge({ children, href }) {
} }
function ItemPageOwnWantButtons({ itemId }) { function ItemPageOwnWantButtons({ itemId }) {
const theme = useTheme();
const toast = useToast();
const [currentUserOwnsThis, setCurrentUserOwnsThis] = React.useState(false); const [currentUserOwnsThis, setCurrentUserOwnsThis] = React.useState(false);
const [currentUserWantsThis, setCurrentUserWantsThis] = React.useState(false); const [currentUserWantsThis, setCurrentUserWantsThis] = React.useState(false);
const toast = useToast();
const { loading, error } = useQuery( const { loading, error } = useQuery(
gql` gql`
query ItemPageOwnWantButtons($itemId: ID!) { query ItemPageOwnWantButtons($itemId: ID!) {
@ -208,7 +211,6 @@ function ItemPageOwnWantButtons({ itemId }) {
return <Box color="red.400">{error.message}</Box>; return <Box color="red.400">{error.message}</Box>;
} }
// TODO: Focus state!
return ( return (
<Box display="flex"> <Box display="flex">
<Skeleton isLoaded={!loading} marginRight="4"> <Skeleton isLoaded={!loading} marginRight="4">
@ -232,6 +234,11 @@ function ItemPageOwnWantButtons({ itemId }) {
size="lg" size="lg"
cursor="pointer" cursor="pointer"
transitionDuration="0.4s" transitionDuration="0.4s"
className={css`
input:focus + & {
box-shadow: ${theme.shadows.outline};
}
`}
> >
<IconCheckbox <IconCheckbox
icon={<CheckIcon />} icon={<CheckIcon />}
@ -264,6 +271,11 @@ function ItemPageOwnWantButtons({ itemId }) {
size="lg" size="lg"
cursor="pointer" cursor="pointer"
transitionDuration="0.4s" transitionDuration="0.4s"
className={css`
input:focus + & {
box-shadow: ${theme.shadows.outline};
}
`}
> >
<IconCheckbox <IconCheckbox
icon={<StarIcon />} icon={<StarIcon />}