diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/contextmenu.tsx | 313 | ||||
| -rw-r--r-- | components/tweaks.tsx | 3 |
2 files changed, 168 insertions, 148 deletions
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx index 442b956..228a780 100644 --- a/components/contextmenu.tsx +++ b/components/contextmenu.tsx @@ -1,106 +1,120 @@ import React, { useRef } from 'react' import { - Box, - Menu, - MenuItem, - MenuList, - MenuGroup, - MenuItemOption, - MenuOptionGroup, - Heading, - MenuDivider, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalFooter, - ModalBody, - ModalCloseButton, - useDisclosure, - Button, - PopoverTrigger, - PopoverContent, - Popover, - Flex, - PopoverBody, - PopoverCloseButton, - PopoverArrow, - PopoverHeader, - PopoverFooter, - Portal, - Text, - VStack, + Box, + Menu, + MenuItem, + MenuList, + MenuGroup, + MenuItemOption, + MenuOptionGroup, + Heading, + MenuDivider, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + useDisclosure, + Button, + PopoverTrigger, + PopoverContent, + Popover, + Flex, + PopoverBody, + PopoverCloseButton, + PopoverArrow, + PopoverHeader, + PopoverFooter, + Portal, + Text, + VStack, } from '@chakra-ui/react' import { - DeleteIcon, - EditIcon, - CopyIcon, - AddIcon, - ViewIcon, - ExternalLinkIcon, - ChevronRightIcon, - PlusSquareIcon, + DeleteIcon, + EditIcon, + CopyIcon, + AddIcon, + ViewIcon, + ExternalLinkIcon, + ChevronRightIcon, + PlusSquareIcon, } from '@chakra-ui/icons' import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' export default interface ContextMenuProps { - background: Boolean - node?: OrgRoamNode - nodeType?: string - coordinates: number[] - handleLocal: (node: OrgRoamNode, add: string) => void - openNodeInEmacs: (node: OrgRoamNode) => void - menuClose: () => void - scope: { nodeIds: string[] } - deleteNodeInEmacs: (node: OrgRoamNode) => void + background: Boolean + node?: OrgRoamNode + nodeType?: string + coordinates: number[] + handleLocal: (node: OrgRoamNode, add: string) => void + openNodeInEmacs: (node: OrgRoamNode) => void + menuClose: () => void + scope: { nodeIds: string[] } + deleteNodeInEmacs: (node: OrgRoamNode) => void } export const ContextMenu = (props: ContextMenuProps) => { - const { background, node, nodeType, coordinates, handleLocal, menuClose, scope, openNodeInEmacs, deleteNodeInEmacs } = props - const { isOpen, onOpen, onClose } = useDisclosure() - const copyRef = useRef<any>() - return ( - <> - <Box - position="absolute" - zIndex="overlay" - left={coordinates[0] + 10} - top={coordinates[1] - 10} - padding={5} - > - <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}> - <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs"> - {node && ( - <> - <Heading size="sm" isTruncated px={3} py={1}> - {node.title} - </Heading> - <MenuDivider borderColor="gray.500" /> - </> - )} - {scope.nodeIds.length !== 0 && - <> - <MenuItem onClick={() => handleLocal(node!, "add")} icon={<PlusSquareIcon />}> - Expand local graph at node - </MenuItem> - <MenuItem onClick={() => handleLocal(node!, "replace")} icon={<ViewIcon />}> - Open local graph for this node - </MenuItem> - </> - } - {!node?.properties.FILELESS ? ( - <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}>Open in Emacs</MenuItem> - ) : ( - <MenuItem icon={<AddIcon />}>Create node</MenuItem> - )} - {node?.properties.ROAM_REFS && ( - <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem> - )} - {scope.nodeIds.length === 0 && - <MenuItem icon={<ViewIcon />} onClick={() => handleLocal(node!, "replace")}>Open local graph</MenuItem> - } - {/* Doesn't work at the moment + const { + background, + node, + nodeType, + coordinates, + handleLocal, + menuClose, + scope, + openNodeInEmacs, + deleteNodeInEmacs, + } = props + const { isOpen, onOpen, onClose } = useDisclosure() + const copyRef = useRef<any>() + return ( + <> + <Box + position="absolute" + zIndex="overlay" + left={coordinates[0] + 10} + top={coordinates[1] - 10} + padding={5} + > + <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}> + <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs"> + {node && ( + <> + <Heading size="sm" isTruncated px={3} py={1}> + {node.title} + </Heading> + <MenuDivider borderColor="gray.500" /> + </> + )} + {scope.nodeIds.length !== 0 && ( + <> + <MenuItem onClick={() => handleLocal(node!, 'add')} icon={<PlusSquareIcon />}> + Expand local graph at node + </MenuItem> + <MenuItem onClick={() => handleLocal(node!, 'replace')} icon={<ViewIcon />}> + Open local graph for this node + </MenuItem> + </> + )} + {!node?.properties.FILELESS ? ( + <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}> + Open in Emacs + </MenuItem> + ) : ( + <MenuItem icon={<AddIcon />}>Create node</MenuItem> + )} + {node?.properties.ROAM_REFS && ( + <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem> + )} + {scope.nodeIds.length === 0 && ( + <MenuItem icon={<ViewIcon />} onClick={() => handleLocal(node!, 'replace')}> + Open local graph + </MenuItem> + )} + {/* Doesn't work at the moment <MenuItem closeOnSelect={false} closeOnBlur={false}> <Box _hover={{ bg: 'gray.200' }} width="100%"> <Popover @@ -129,63 +143,66 @@ export const ContextMenu = (props: ContextMenuProps) => { </Popover> </Box> </MenuItem> */} - {node?.level === 0 && - <MenuItem - closeOnSelect={false} - icon={<DeleteIcon color="red.500" />} - color="red.500" - onClick={onOpen} - > - Permenantly delete note - </MenuItem> - } - </MenuList> - </Menu> - </Box> - <Modal isCentered isOpen={isOpen} onClose={onClose}> - <ModalOverlay /> - <ModalContent zIndex="popover" > - <ModalHeader>Delete node?</ModalHeader> - <ModalCloseButton /> - <ModalBody> - <VStack - spacing={4} - display="flex" - alignItems="flex-start"> - <Text> - This will permanently delete your note: - </Text> - <Text fontWeight="bold">{node?.title} - </Text> - {node?.level !== 0 && - <Text>This will only delete the from this heading until but not including the next node. - Your parent file and all other nodes will not be deleted.</Text>} - <Text> - Are you sure you want to do continue? - </Text> - </VStack> - </ModalBody> - <ModalFooter> - <Button mr={3} onClick={() => { - console.log('closing') - onClose() - }}> - Cancel - </Button> - <Button variant="link" colorScheme="red" ml={3} - onClick={() => { - console.log('aaaaa') - deleteNodeInEmacs(node!) - onClose() - }} - > - Delete node - </Button> - </ModalFooter> - </ModalContent> - </Modal> - </> - ) + {node?.level === 0 && ( + <MenuItem + closeOnSelect={false} + icon={<DeleteIcon color="red.500" />} + color="red.500" + onClick={onOpen} + > + Permenantly delete note + </MenuItem> + )} + </MenuList> + </Menu> + </Box> + <Modal isCentered isOpen={isOpen} onClose={onClose}> + <ModalOverlay /> + <ModalContent zIndex="popover"> + <ModalHeader>Delete node?</ModalHeader> + <ModalCloseButton /> + <ModalBody> + <VStack spacing={4} display="flex" alignItems="flex-start"> + <Text>This will permanently delete your note:</Text> + <Text fontWeight="bold">{node?.title}</Text> + {node?.level !== 0 && ( + <Text> + This will only delete the from this heading until but not including the next node. + Your parent file and all other nodes will not be deleted. + </Text> + )} + <Text>Are you sure you want to do continue?</Text> + </VStack> + </ModalBody> + <ModalFooter> + <Button + mr={3} + onClick={() => { + console.log('closing') + onClose() + menuClose() + }} + > + Cancel + </Button> + <Button + variant="link" + colorScheme="red" + ml={3} + onClick={() => { + console.log('aaaaa') + deleteNodeInEmacs(node!) + onClose() + menuClose() + }} + > + Delete node + </Button> + </ModalFooter> + </ModalContent> + </Modal> + </> + ) } /* <Box> diff --git a/components/tweaks.tsx b/components/tweaks.tsx index e23476e..9ff994e 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -1130,6 +1130,9 @@ export const Tweaks = (props: TweakProps) => { <Portal> {' '} <MenuList bgColor="gray.200" zIndex="popover"> + <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'color' })}> + Just coloring the currently opened node + </MenuItem> <MenuItem onClick={() => setBehavior({ ...behavior, follow: 'local' })}> Opening the local graph </MenuItem> |