diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-06 04:11:14 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-10-06 04:11:14 +0200 |
commit | 57185d21f8c85ad5063a420a12072b7d39e9e77c (patch) | |
tree | 2df3feaa904fff0e7db929742a8f241ee7d60446 /components/Tweaks | |
parent | e971a5936dbebf26a85446c8f9ed866b71514325 (diff) |
feat: theme selector
Diffstat (limited to 'components/Tweaks')
-rw-r--r-- | components/Tweaks/ThemeSelect.tsx | 57 | ||||
-rw-r--r-- | components/Tweaks/VisualsPanel.tsx | 13 |
2 files changed, 70 insertions, 0 deletions
diff --git a/components/Tweaks/ThemeSelect.tsx b/components/Tweaks/ThemeSelect.tsx new file mode 100644 index 0000000..e56d48d --- /dev/null +++ b/components/Tweaks/ThemeSelect.tsx @@ -0,0 +1,57 @@ +import React, { useContext } from 'react' +import { + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Text, +} from '@chakra-ui/react' + +import { themes } from '../themes' +import { ChevronDownIcon } from '@chakra-ui/icons' +import { ThemeContext } from '../../util/themecontext' + +export const ThemeSelect = () => { + type Theme = { [key: string]: string } + const { emacsTheme, setEmacsTheme, highlightColor } = useContext(ThemeContext) + return ( + <Flex alignItems="center" justifyContent="space-between" pl={7}> + <Text>Theme</Text> + <Menu isLazy placement="bottom" closeOnSelect={false}> + <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> + {emacsTheme[0]} + </MenuButton> + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuItem + onClick={() => ''} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Box height={6} width={6}></Box> + </MenuItem> + {Object.keys(themes).map((theme: string, i: number) => ( + <MenuItem + key={theme} + onClick={() => setEmacsTheme([theme, themes[theme]])} + justifyContent="space-between" + alignItems="center" + display="flex" + > + <Text>{theme}</Text> + <Flex height={6} width={20} flexDirection="column" flexWrap="wrap"> + {Object.values(themes[theme as string]).map((color: string) => { + return <Box key={color} bgColor={color} flex="1 1 8px"></Box> + })} + </Flex> + </MenuItem> + ))} + </MenuList> + </Menu> + </Flex> + ) +} diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx index 559975d..d3c8415 100644 --- a/components/Tweaks/VisualsPanel.tsx +++ b/components/Tweaks/VisualsPanel.tsx @@ -7,6 +7,13 @@ import { VStack, AccordionIcon, AccordionPanel, + MenuButton, + Menu, + Button, + Box, + Portal, + MenuList, + MenuItem, } from '@chakra-ui/react' import React, { useCallback } from 'react' import { HighlightingPanel } from './HighlightingPanel' @@ -15,6 +22,8 @@ import { initialVisuals } from '../config' import { NodesNLinksPanel } from './NodesNLinksPanel' import { LabelsPanel } from './LabelsPanel' import { CitationsPanel } from './CitationsPanel' +import { ColorMenu } from './ColorMenu' +import { ThemeSelect } from './ThemeSelect' export interface VisualsPanelProps { visuals: typeof initialVisuals @@ -29,6 +38,7 @@ export const VisualsPanel = (props: VisualsPanelProps) => { const setVisualsCallback = useCallback((val) => setVisuals(val), []) return ( <VStack justifyContent="flex-start" align="stretch"> + <ThemeSelect /> <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}> <AccordionItem> <AccordionButton> @@ -98,3 +108,6 @@ export const VisualsPanel = (props: VisualsPanelProps) => { </VStack> ) } +function clickCallback(color: string): void { + throw new Error('Function not implemented.') +} |