feat: feature/mvp-sprint-1 Made settings menu more user friendly

Browse Source
This commit is contained in:
Nikolaj Frey 2023-08-15 11:01:05 +10:00
parent 813b5cf68a
commit d82863ff88
1 changed files with 140 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
remix/app/components/Thingtime/SettingsMenu.tsx
View File

@ -1,10 +1,42 @@
import React, { useState } from "react" import React, { useState } from "react"
import ClickAwayListener from "react-click-away-listener"
import { Center, Flex, Text } from "@chakra-ui/react" import { Center, Flex, Text } from "@chakra-ui/react"
import { Icon } from "../Icon/Icon" import { Icon } from "../Icon/Icon"
export const SettingsMenu = (props) => { export const SettingsMenu = (props) => {
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
const hideRef = React.useRef(null)
const [opacity, setOpacity] = React.useState(props?.opacity === 0 ? 0 : 1)
const opacityRef = React.useRef(null)
const waitTime = 1555
React.useEffect(() => {
clearInterval(opacityRef?.current)
if (props?.opacity) {
setOpacity(props?.opacity)
} else {
opacityRef.current = setInterval(() => {
setOpacity(props?.opacity)
setShow(false)
}, waitTime)
}
}, [props?.opacity])
React.useEffect(() => {
if (show || props?.opacity) {
clearInterval(hideRef?.current)
}
}, [show, props?.opacity])
const maybeHide = React.useCallback(() => {
clearInterval(hideRef?.current)
hideRef.current = setTimeout(() => {
setShow(false)
}, waitTime)
}, [])
const showMenu = React.useCallback(() => { const showMenu = React.useCallback(() => {
setShow(true) setShow(true)
@ -46,117 +78,124 @@ export const SettingsMenu = (props) => {
const iconSize = 10 const iconSize = 10
return ( return (
<Center <ClickAwayListener onClickAway={hideMenu}>
position="relative" <Center
// width="100%" position="relative"
paddingRight={36} // width="100%"
opacity={props?.opacity} paddingRight={36}
cursor="pointer" opacity={opacity}
transition={props?.transition || "all 0.2s ease-in-out"} transition={props?.transition || "all 0.2s ease-in-out"}
onMouseEnter={showMenu} onMouseEnter={showMenu}
onMouseLeave={hideMenu} onMouseLeave={maybeHide}
>
<Flex
paddingLeft={1}
// opacity={showContextIcon ? 1 : 0}
transition="all 0.2s ease-in-out"
// onClick={deleteValue}
>
<Icon name="wizard" size={7}></Icon>
</Flex>
<Flex
position="absolute"
zIndex={999}
top="100%"
left={0}
flexDirection="column"
opacity={show ? 1 : 0}
pointerEvents={show ? "all" : "none"}
> >
<Flex <Flex
flexDirection="column" paddingLeft={1}
// rowGap={basePadding / 3} // opacity={showContextIcon ? 1 : 0}
background="greys.lightt" cursor="pointer"
borderRadius={4} // onClick={deleteValue}
boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"} transition="all 0.2s ease-in-out"
paddingY={basePadding} >
<Icon name="wizard" size={7}></Icon>
</Flex>
<Flex
position="absolute"
zIndex={999}
top="100%"
left={0}
flexDirection="column"
opacity={show ? 1 : 0}
pointerEvents={show ? "all" : "none"}
> >
{!props?.readonly && (
<Flex
alignItems="center"
flexDirection="row"
_hover={{
background: "greys.light",
}}
paddingX={basePadding * 1}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Types
</Text>
</Flex>
)}
<Flex <Flex
flexDirection="column" flexDirection="column"
// rowGap={basePadding} // rowGap={basePadding / 3}
background="greys.lightt" background="greys.lightt"
cursor="pointer" borderRadius={4}
boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
paddingY={basePadding}
> >
{!props?.readonly && {!props?.readonly && (
types.map((type, idx) => { <Flex
const ret = ( alignItems="center"
<Flex flexDirection="row"
key={props?.uuid + props?.fullPath + "-type-menu-" + idx} paddingRight={basePadding * 2}
width="100%" paddingLeft={basePadding * 1}
_hover={{ // _hover={{
"&>div": { // background: "greys.light",
background: "greys.light", // }}
}, // paddingX={basePadding * 1}
}} paddingY={basePadding / 2}
onClick={() => onChangeType(type?.key || type)} >
paddingY={1} <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
> <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
<Flex Types
alignItems="center" </Text>
flexDirection="row" </Flex>
width="100%" )}
paddingX={basePadding * 2}
paddingY={basePadding / 2}
>
<Icon
marginBottom="-2px"
name={type?.icon || type?.key || type?.label || type}
size={iconSize}
></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
{type?.label || type?.key || type}
</Text>
</Flex>
</Flex>
)
return ret
})}
</Flex>
{!props?.readonly && (
<Flex <Flex
alignItems="center" flexDirection="column"
flexDirection="row" // rowGap={basePadding}
_hover={{ background="greys.lightt"
background: "greys.light", cursor="pointer"
}}
onClick={onDelete}
paddingX={basePadding * 1}
paddingY={basePadding / 2}
> >
<Icon marginBottom="-2px" name="bin" size={iconSize}></Icon> {!props?.readonly &&
<Text marginTop="-2px" paddingLeft={2} fontSize="xs"> types.map((type, idx) => {
Recycle const ret = (
</Text> <Flex
key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
width="100%"
_hover={{
"&>div": {
background: "greys.light",
},
}}
cursor="pointer"
onClick={() => onChangeType(type?.key || type)}
paddingY={1}
>
<Flex
alignItems="center"
flexDirection="row"
width="100%"
paddingRight={basePadding * 4}
paddingLeft={basePadding * 2}
paddingY={basePadding / 2}
>
<Icon
marginBottom="-2px"
name={type?.icon || type?.key || type?.label || type}
size={iconSize}
></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
{type?.label || type?.key || type}
</Text>
</Flex>
</Flex>
)
return ret
})}
</Flex> </Flex>
)} {!props?.readonly && (
<Flex
alignItems="center"
flexDirection="row"
_hover={{
background: "greys.light",
}}
cursor="pointer"
onClick={onDelete}
paddingX={basePadding * 1}
paddingY={basePadding / 2}
>
<Icon marginBottom="-2px" name="bin" size={iconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Recycle
</Text>
</Flex>
)}
</Flex>
</Flex> </Flex>
</Flex> </Center>
</Center> </ClickAwayListener>
) )
} }