From ee8539a9351374a719c9026f85d85e7b4ea6e8f5 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Sat, 25 Sep 2021 16:11:31 +0200
Subject: chore: move tweaks to separate subfolder

---
 components/ColorsPanel.tsx | 237 ---------------------------------------------
 1 file changed, 237 deletions(-)
 delete mode 100644 components/ColorsPanel.tsx

(limited to 'components/ColorsPanel.tsx')

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>
-  )
-}
-- 
cgit v1.2.3