summaryrefslogtreecommitdiff
path: root/components/Tweaks/ColorMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/Tweaks/ColorMenu.tsx')
-rw-r--r--components/Tweaks/ColorMenu.tsx73
1 files changed, 45 insertions, 28 deletions
diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx
index 3d90e36..b87f76b 100644
--- a/components/Tweaks/ColorMenu.tsx
+++ b/components/Tweaks/ColorMenu.tsx
@@ -9,6 +9,9 @@ import {
MenuItem,
MenuList,
Portal,
+ PopoverTrigger,
+ PopoverContent,
+ Popover,
} from '@chakra-ui/react'
import React, { useCallback } from 'react'
import { initialVisuals } from '../config'
@@ -19,10 +22,11 @@ export interface ColorMenuProps {
value: string
visValue: string
setVisuals?: any
+ noEmpty?: boolean
}
export const ColorMenu = (props: ColorMenuProps) => {
- const { label, colorList, value, visValue, setVisuals } = props
+ const { label, colorList, value, visValue, setVisuals, noEmpty } = props
const clickCallback = useCallback(
(color) =>
@@ -37,35 +41,48 @@ export const ColorMenu = (props: ColorMenuProps) => {
return (
<Flex alignItems="center" justifyContent="space-between">
<Text>{label}</Text>
- <Menu isLazy placement="right">
- <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
- {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
- </MenuButton>
+ <Popover isLazy placement="right">
+ <PopoverTrigger>
+ <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+ {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+ </Button>
+ </PopoverTrigger>
<Portal>
- {' '}
- <MenuList minW={10} zIndex="popover" bgColor="gray.200">
- <MenuItem
- onClick={() => clickCallback('')}
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box height={6} width={6}></Box>
- </MenuItem>
- {colorList.map((color: string) => (
- <MenuItem
- key={color}
- onClick={() => clickCallback(color)}
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
- </MenuItem>
- ))}
- </MenuList>
+ <PopoverContent zIndex="tooltip" maxW={36} position="relative">
+ <Flex flexWrap="wrap" bgColor="gray.200">
+ {!noEmpty && (
+ <Box
+ onClick={() => clickCallback('')}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ m={1}
+ >
+ <Box
+ height={6}
+ width={6}
+ borderColor="gray.600"
+ borderRadius="xl"
+ borderWidth={1}
+ ></Box>
+ </Box>
+ )}
+ {colorList.map((color: string) => (
+ <Box
+ m={1}
+ key={color}
+ onClick={() => clickCallback(color)}
+ justifyContent="space-between"
+ alignItems="center"
+ display="flex"
+ >
+ <Box bgColor={color} borderRadius="xl" height={6} width={6}></Box>
+ </Box>
+ ))}
+ </Flex>
+ </PopoverContent>
</Portal>
- </Menu>
+ </Popover>
</Flex>
)
}