diff options
Diffstat (limited to 'components/ColorsPanel.tsx')
| -rw-r--r-- | components/ColorsPanel.tsx | 237 |
1 files changed, 0 insertions, 237 deletions
diff --git a/components/ColorsPanel.tsx b/components/ColorsPanel.tsx deleted file mode 100644 index 6846a93..0000000 --- a/components/ColorsPanel.tsx +++ /dev/null @@ -1,237 +0,0 @@ -import { ArrowRightIcon, ChevronDownIcon, RepeatIcon } from '@chakra-ui/icons' -import { - Text, - Box, - Flex, - IconButton, - StackDivider, - Tooltip, - VStack, - MenuButton, - Menu, - Portal, - MenuList, - MenuOptionGroup, - MenuItemOption, - Button, - MenuItem, -} from '@chakra-ui/react' -import React from 'react' -import { ColorMenu } from './ColorMenu' -import { colorList, initialVisuals } from './config' - -export interface ColorsPanelProps { - visuals: typeof initialVisuals - setVisualsCallback: any - highlightColor: string - setHighlightColor: any -} - -export const ColorsPanel = (props: ColorsPanelProps) => { - const { visuals, setVisualsCallback, highlightColor, setHighlightColor } = props - - return ( - <VStack - spacing={2} - justifyContent="flex-start" - divider={<StackDivider borderColor="gray.500" />} - align="stretch" - color="gray.800" - > - <Box> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Nodes</Text> - <Tooltip label="Shuffle node colors"> - <IconButton - aria-label="Shuffle node colors" - size="sm" - icon={<RepeatIcon />} - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisualsCallback({ - ...visuals, - //shuffle that guy - //definitely thought of this myself - nodeColorScheme: arr - .map((x: any) => [Math.random(), x]) - .sort(([a], [b]) => a - b) - .map(([_, x]) => x), - }) - }} - /> - </Tooltip> - <Tooltip label="Cycle node colors"> - <IconButton - aria-label="Shift node colors" - icon={<ArrowRightIcon />} - size="sm" - variant="ghost" - onClick={() => { - const arr = visuals.nodeColorScheme ?? [] - setVisualsCallback({ - ...visuals, - nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], - }) - }} - /> - </Tooltip> - <Menu isLazy placement="right" closeOnSelect={false} matchWidth> - <MenuButton - width={20} - as={Button} - colorScheme="" - color="black" - rightIcon={<ChevronDownIcon />} - > - <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> - {visuals.nodeColorScheme.map((color) => ( - <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> - ))} - </Flex> - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - <MenuOptionGroup - width={500} - type="checkbox" - defaultValue={visuals.nodeColorScheme} - onChange={(colors) => { - if (!colors.length) { - return - } - setVisualsCallback({ ...visuals, nodeColorScheme: colors }) - }} - > - {colorList.map((color) => ( - <MenuItemOption - key={color} - isChecked={visuals.nodeColorScheme.some((c) => c === color)} - value={color} - isDisabled={ - visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color - } - > - <Box justifyContent="space-between" alignItems="center" display="flex"> - <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> - </Box> - </MenuItemOption> - ))} - </MenuOptionGroup> - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Links</Text> - <Menu isLazy placement="right"> - <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> - <Box> - {visuals.linkColorScheme ? ( - <Box - bgColor={visuals.linkColorScheme} - borderRadius="sm" - height={6} - width={6} - ></Box> - ) : ( - <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> - {visuals.nodeColorScheme.map((color) => ( - <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> - ))} - </Flex> - )} - </Box> - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - <MenuItem - onClick={() => setVisualsCallback({ ...visuals, linkColorScheme: '' })} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Flex height={6} width={6} flexDirection="column" flexWrap="wrap"> - {visuals.nodeColorScheme.map((color) => ( - <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box> - ))} - </Flex> - </MenuItem> - {colorList.map((color) => ( - <MenuItem - key={color} - onClick={() => - setVisualsCallback({ - ...visuals, - linkColorScheme: color, - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - </Flex> - <Flex alignItems="center" justifyContent="space-between"> - <Text>Accent</Text> - <Menu isLazy placement="right"> - <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> - {<Box bgColor={highlightColor} borderRadius="sm" height={6} width={6}></Box>} - </MenuButton> - <Portal> - {' '} - <MenuList minW={10} zIndex="popover" bgColor="gray.200"> - {colorList.map((color) => ( - <MenuItem - key={color} - onClick={() => setHighlightColor(color)} - justifyContent="space-between" - alignItems="center" - display="flex" - > - <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box> - </MenuItem> - ))} - </MenuList> - </Portal> - </Menu> - </Flex> - <ColorMenu - colorList={colorList} - label="Link highlight" - setVisuals={setVisualsCallback} - value="linkHighlight" - visValue={visuals.linkHighlight} - /> - <ColorMenu - colorList={colorList} - label="Node highlight" - setVisuals={setVisualsCallback} - value="nodeHighlight" - visValue={visuals.nodeHighlight} - /> - <ColorMenu - colorList={colorList} - label="Background" - setVisuals={setVisualsCallback} - value="backgroundColor" - visValue={visuals.backgroundColor} - /> - <ColorMenu - colorList={colorList} - label="Emacs node" - setVisuals={setVisualsCallback} - value="emacsNodeColor" - visValue={visuals.emacsNodeColor} - /> - </Box> - </VStack> - ) -} |