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 ClickAwayListener from "react-click-away-listener"
import { Center, Flex, Text } from "@chakra-ui/react"
import { Icon } from "../Icon/Icon"
export const SettingsMenu = (props) => {
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(() => {
setShow(true)
@ -46,117 +78,124 @@ export const SettingsMenu = (props) => {
const iconSize = 10
return (
<Center
position="relative"
// width="100%"
paddingRight={36}
opacity={props?.opacity}
cursor="pointer"
transition={props?.transition || "all 0.2s ease-in-out"}
onMouseEnter={showMenu}
onMouseLeave={hideMenu}
>
<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"}
<ClickAwayListener onClickAway={hideMenu}>
<Center
position="relative"
// width="100%"
paddingRight={36}
opacity={opacity}
transition={props?.transition || "all 0.2s ease-in-out"}
onMouseEnter={showMenu}
onMouseLeave={maybeHide}
>
<Flex
flexDirection="column"
// rowGap={basePadding / 3}
background="greys.lightt"
borderRadius={4}
boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
paddingY={basePadding}
paddingLeft={1}
// opacity={showContextIcon ? 1 : 0}
cursor="pointer"
// onClick={deleteValue}
transition="all 0.2s ease-in-out"
>
<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
flexDirection="column"
// rowGap={basePadding}
// rowGap={basePadding / 3}
background="greys.lightt"
cursor="pointer"
borderRadius={4}
boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
paddingY={basePadding}
>
{!props?.readonly &&
types.map((type, idx) => {
const ret = (
<Flex
key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
width="100%"
_hover={{
"&>div": {
background: "greys.light",
},
}}
onClick={() => onChangeType(type?.key || type)}
paddingY={1}
>
<Flex
alignItems="center"
flexDirection="row"
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 && (
{!props?.readonly && (
<Flex
alignItems="center"
flexDirection="row"
paddingRight={basePadding * 2}
paddingLeft={basePadding * 1}
// _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
alignItems="center"
flexDirection="row"
_hover={{
background: "greys.light",
}}
onClick={onDelete}
paddingX={basePadding * 1}
paddingY={basePadding / 2}
flexDirection="column"
// rowGap={basePadding}
background="greys.lightt"
cursor="pointer"
>
<Icon marginBottom="-2px" name="bin" size={iconSize}></Icon>
<Text marginTop="-2px" paddingLeft={2} fontSize="xs">
Recycle
</Text>
{!props?.readonly &&
types.map((type, idx) => {
const ret = (
<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>
)}
{!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>
</Center>
</Center>
</ClickAwayListener>
)
}