summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/Sidebar/index.tsx484
-rw-r--r--components/preview.tsx20
2 files changed, 237 insertions, 267 deletions
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 64436f2..3332d39 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -1,273 +1,263 @@
import React, { useContext, useEffect, useState } from 'react'
-import { UniOrg } from "../../util/uniorg"
-import { getOrgText } from "../../util/webSocketFunctions"
+import { UniOrg } from '../../util/uniorg'
+import { getOrgText } from '../../util/webSocketFunctions'
import {
- Button,
- Slide,
- VStack,
- Flex,
- Heading,
- Box,
- CloseButton,
- Text,
- Drawer,
- DrawerOverlay,
- DrawerHeader,
- DrawerBody,
- DrawerCloseButton,
- DrawerContent,
- DrawerFooter,
- IconButton,
+ Button,
+ Slide,
+ VStack,
+ Flex,
+ Heading,
+ Box,
+ CloseButton,
+ Text,
+ Drawer,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ DrawerCloseButton,
+ DrawerContent,
+ DrawerFooter,
+ IconButton,
} from '@chakra-ui/react'
import { Scrollbars } from 'react-custom-scrollbars-2'
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
import { GraphData, NodeObject, LinkObject } from 'force-graph'
import { OrgRoamNode } from '../../api'
-import {ThemeContext} from '../../util/themecontext'
+import { ThemeContext } from '../../util/themecontext'
export interface SidebarProps {
- isOpen: boolean
- onClose: any
- openNode: string
- nodeById: any
- previewNode: NodeObject,
- orgText: string
+ isOpen: boolean
+ onClose: any
+ //nodeById: any
+ previewNode: NodeObject
+ orgText: string
}
const Sidebar = (props: SidebarProps) => {
+ const { isOpen, onClose, previewNode, orgText } = props
- const { isOpen, onClose, openNode, nodeById, previewNode, orgText } = props
+ const { highlightColor } = useContext(ThemeContext)
+ const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>()
- const {highlightColor}= useContext(ThemeContext)
+ useEffect(() => {
+ if (!previewNode) {
+ return
+ }
- useEffect(() => {
- (async () => {
- if (!openNode) {
- return
- }
- if (openNode === 'nil') {
- return
- }
- })()
+ setPreviewRoamNode(previewNode as OrgRoamNode)
+ }, [previewNode])
- const previewRoamNode = previewNode as OrgRoamNode
- }, [previewNode])
-
- //maybe want to close it when clicking outside, but not sure
- //const outsideClickRef = useRef();
- return (
- <Slide direction="right" in={isOpen} style={{ zIndex: 200, width: 500 }} unmountOnExit>
- <Flex flexDirection="row" height="100%">
- <IconButton
- icon={<ChevronRightIcon height={30} />}
- colorScheme="white"
- aria-label="Close file-viewer"
- height={100}
- variant="ghost"
- marginRight={-2}
- bg="alt.100"
- onClick={onClose}
- marginTop={20}
- />
- <Box
- color="gray.800"
- bg="alt.100"
- boxShadow="xl"
- w={500}
- height="98%"
- position="relative"
- zIndex="overlay"
- marginTop={10}
- paddingBottom={15}
- borderRadius="xl"
- right={-2}
- >
- <Flex
- justifyContent="space-between"
- padding={4}
- paddingTop={10}
- paddingLeft={10}
- width="80%"
- alignItems="center"
- color="black"
- >
- <Heading size="md">{previewNode.title}</Heading>
- </Flex>
- <Scrollbars
- //autoHeight
- //autoHeightMax={600}
- autoHide
- renderThumbVertical={({ style, ...props }) => (
- <Box
- {...props}
- style={{
- ...style,
- borderRadius: 10,
- }}
- bg={highlightColor}
- />
- )}
- >
- <VStack alignItems="left" bg="alt.100" paddingLeft={10} paddingRight={10}>
- <Box
- className="org"
- sx={{
- h1: { display: 'none' },
- h2: {
- fontSize: '20',
- fontWeight: 'bold !important',
- marginBottom: '1em',
- color: 'black',
- },
- h3: {
- fontSize: '18',
- fontWeight: '600 !important',
- marginBottom: '.5em',
- },
- h4: {
- fontSize: '16',
- fontWeight: '500 !important',
- marginBottom: '.25em',
- fontStyle: 'italic',
- },
- a: {
- color: highlightColor,
- pointerEvents: 'none',
- },
- ol: {
- paddingLeft: '5',
- },
- ul: {
- paddingLeft: '5',
- },
- p: {
- paddingBottom: '.5em',
- },
- ".katex-html": {visibility: 'hidden',
- width: '0px', position: 'absolute'},
- '#content': { textAlign: 'justify' },
- '.title': {
- textAlign: 'center',
- marginBottom: '.2em',
- },
- '.subtitle': {
- textAlign: 'center',
- fontSize: 'medium',
- fontWeight: 'bold',
- marginTop: 0,
- },
- '.todo': { fontFamily: 'monospace', color: 'red' },
- '.equationContainer': {
- display: 'table',
- textAlign: 'center',
- width: '100%',
- },
- '.equation': {
- verticalAlign: 'middle',
- },
- '.equation-label': {
- display: 'tableCell',
- textAlign: 'right',
- verticalAlign: 'middle',
- },
- '.inlinetask': {
- padding: '10px',
- border: '2px solid gray',
- margin: '10px',
- background: '#ffffcc',
- },
- '#org-div-home-and-up': {
- textAlign: 'right',
- fontSize: '70 % ',
- whiteSpace: 'nowrap',
- },
- textarea: { overflowX: 'auto' },
- '.linenr': { fontSize: 'smaller' },
- '.code-highlighted': { backgroundColor: '#ffff00' },
- '.org-info-js_info-navigation': { borderStyle: 'none' },
- '#org-info-js_console-label': {
- fontSize: '10px',
- fontWeight: 'bold',
- whiteSpace: 'nowrap',
- },
- '.org-info-js_search-highlight': {
- backgroundColor: '#ffff00',
- color: '#000000',
- fontWeight: 'bold',
- },
- '.org-svg': { width: '90%' },
- '.done': { fontFamily: 'monospace', color: 'green' },
- '.priority': { fontFamily: 'monospace', color: 'orange' },
- '.tag': {
- backgroundColor: '#eee',
- fontFamily: 'monospace',
- padding: '2px',
- fontSize: '80%',
- fontWeight: 'normal',
- },
- '.timestamp': { color: '#bebebe' },
- '.timestamp-kwd': { color: '#5f9ea0' },
- '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' },
- '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' },
- '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' },
- '.underline': { textDecoration: 'underline' },
- '#postamble p': { fontSize: '90%', margin: '.2em' },
- '#preamble p': { fontSize: '90%', margin: '.2em' },
- 'p.verse': { marginLeft: '3%' },
- pre: {
- border: '1px solid #e6e6e6',
- borderRadius: '3px',
- backgroundColor: '#f2f2f2',
- padding: '8pt',
- fontFamily: 'monospace',
- overflow: 'auto',
- margin: '1.2em',
- },
- 'pre.src': {
- position: 'relative',
- overflow: 'auto',
- },
- 'pre.src:before': {
- display: 'none',
- position: 'absolute',
- top: '-8px',
- right: '12px',
- padding: '3px',
- color: '#555',
- backgroundColor: '#f2f2f299',
- },
- 'caption.t-above': { captionSide: 'top' },
- 'caption.t-bottom': { captionSide: 'bottom' },
- 'th.org-right': { textAlign: 'center' },
- 'th.org-left': { textAlign: 'center' },
- 'th.org-center': { textAlign: 'center' },
- 'td.org-right': { textAlign: 'right' },
- 'td.org-left': { textAlign: 'left' },
- 'td.org-center': { textAlign: 'center' },
- '.footpara': { display: 'inline' },
- '.footdef': { marginBottom: '1em' },
- '.figure': { padding: '1em' },
- '.figure p': { textAlign: 'center' },
- }}
- >
- <UniOrg orgText={orgText} />
- </Box>
- </VStack>
- </Scrollbars>
- </Box>
- </Flex>
- </Slide>
- )
+ //maybe want to close it when clicking outside, but not sure
+ //const outsideClickRef = useRef();
+ return (
+ <Slide direction="right" in={isOpen} style={{ zIndex: 200, width: 500 }} unmountOnExit>
+ <Flex flexDirection="row" height="100%">
+ <IconButton
+ icon={<ChevronRightIcon height={30} />}
+ colorScheme="white"
+ aria-label="Close file-viewer"
+ height={100}
+ variant="ghost"
+ marginRight={-2}
+ bg="alt.100"
+ onClick={onClose}
+ marginTop={20}
+ />
+ <Box
+ color="gray.800"
+ bg="alt.100"
+ boxShadow="xl"
+ w={500}
+ height="98%"
+ position="relative"
+ zIndex="overlay"
+ marginTop={10}
+ paddingBottom={15}
+ borderRadius="xl"
+ right={-2}
+ >
+ <Flex
+ justifyContent="space-between"
+ padding={4}
+ paddingTop={10}
+ paddingLeft={10}
+ width="80%"
+ alignItems="center"
+ color="black"
+ >
+ <Heading size="md">{previewRoamNode}</Heading>
+ </Flex>
+ <Scrollbars
+ //autoHeight
+ //autoHeightMax={600}
+ autoHide
+ renderThumbVertical={({ style, ...props }) => (
+ <Box
+ {...props}
+ style={{
+ ...style,
+ borderRadius: 10,
+ }}
+ bg={highlightColor}
+ />
+ )}
+ >
+ <VStack alignItems="left" bg="alt.100" paddingLeft={10} paddingRight={10}>
+ <Box
+ className="org"
+ sx={{
+ h1: { display: 'none' },
+ h2: {
+ fontSize: '20',
+ fontWeight: 'bold !important',
+ marginBottom: '1em',
+ color: 'black',
+ },
+ h3: {
+ fontSize: '18',
+ fontWeight: '600 !important',
+ marginBottom: '.5em',
+ },
+ h4: {
+ fontSize: '16',
+ fontWeight: '500 !important',
+ marginBottom: '.25em',
+ fontStyle: 'italic',
+ },
+ a: {
+ color: highlightColor,
+ pointerEvents: 'none',
+ },
+ ol: {
+ paddingLeft: '5',
+ },
+ ul: {
+ paddingLeft: '5',
+ },
+ p: {
+ paddingBottom: '.5em',
+ },
+ '.katex-html': { visibility: 'hidden', width: '0px', position: 'absolute' },
+ '#content': { textAlign: 'justify' },
+ '.title': {
+ textAlign: 'center',
+ marginBottom: '.2em',
+ },
+ '.subtitle': {
+ textAlign: 'center',
+ fontSize: 'medium',
+ fontWeight: 'bold',
+ marginTop: 0,
+ },
+ '.todo': { fontFamily: 'monospace', color: 'red' },
+ '.equationContainer': {
+ display: 'table',
+ textAlign: 'center',
+ width: '100%',
+ },
+ '.equation': {
+ verticalAlign: 'middle',
+ },
+ '.equation-label': {
+ display: 'tableCell',
+ textAlign: 'right',
+ verticalAlign: 'middle',
+ },
+ '.inlinetask': {
+ padding: '10px',
+ border: '2px solid gray',
+ margin: '10px',
+ background: '#ffffcc',
+ },
+ '#org-div-home-and-up': {
+ textAlign: 'right',
+ fontSize: '70 % ',
+ whiteSpace: 'nowrap',
+ },
+ textarea: { overflowX: 'auto' },
+ '.linenr': { fontSize: 'smaller' },
+ '.code-highlighted': { backgroundColor: '#ffff00' },
+ '.org-info-js_info-navigation': { borderStyle: 'none' },
+ '#org-info-js_console-label': {
+ fontSize: '10px',
+ fontWeight: 'bold',
+ whiteSpace: 'nowrap',
+ },
+ '.org-info-js_search-highlight': {
+ backgroundColor: '#ffff00',
+ color: '#000000',
+ fontWeight: 'bold',
+ },
+ '.org-svg': { width: '90%' },
+ '.done': { fontFamily: 'monospace', color: 'green' },
+ '.priority': { fontFamily: 'monospace', color: 'orange' },
+ '.tag': {
+ backgroundColor: '#eee',
+ fontFamily: 'monospace',
+ padding: '2px',
+ fontSize: '80%',
+ fontWeight: 'normal',
+ },
+ '.timestamp': { color: '#bebebe' },
+ '.timestamp-kwd': { color: '#5f9ea0' },
+ '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' },
+ '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' },
+ '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' },
+ '.underline': { textDecoration: 'underline' },
+ '#postamble p': { fontSize: '90%', margin: '.2em' },
+ '#preamble p': { fontSize: '90%', margin: '.2em' },
+ 'p.verse': { marginLeft: '3%' },
+ pre: {
+ border: '1px solid #e6e6e6',
+ borderRadius: '3px',
+ backgroundColor: '#f2f2f2',
+ padding: '8pt',
+ fontFamily: 'monospace',
+ overflow: 'auto',
+ margin: '1.2em',
+ },
+ 'pre.src': {
+ position: 'relative',
+ overflow: 'auto',
+ },
+ 'pre.src:before': {
+ display: 'none',
+ position: 'absolute',
+ top: '-8px',
+ right: '12px',
+ padding: '3px',
+ color: '#555',
+ backgroundColor: '#f2f2f299',
+ },
+ 'caption.t-above': { captionSide: 'top' },
+ 'caption.t-bottom': { captionSide: 'bottom' },
+ 'th.org-right': { textAlign: 'center' },
+ 'th.org-left': { textAlign: 'center' },
+ 'th.org-center': { textAlign: 'center' },
+ 'td.org-right': { textAlign: 'right' },
+ 'td.org-left': { textAlign: 'left' },
+ 'td.org-center': { textAlign: 'center' },
+ '.footpara': { display: 'inline' },
+ '.footdef': { marginBottom: '1em' },
+ '.figure': { padding: '1em' },
+ '.figure p': { textAlign: 'center' },
+ }}
+ >
+ <UniOrg orgText={orgText} />
+ </Box>
+ </VStack>
+ </Scrollbars>
+ </Box>
+ </Flex>
+ </Slide>
+ )
}
export default Sidebar
-
-
-
/* <Box marginLeft="auto" zIndex={5000} bg="alt.100" maxHeight="100%" width= "30%" padding={8} borderRadius={2}>
<Heading size="sm">{previewNode.title}</Heading>
</Box> */
diff --git a/components/preview.tsx b/components/preview.tsx
deleted file mode 100644
index 8d3a1ca..0000000
--- a/components/preview.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Box, Heading } from '@chakra-ui/react'
-import React from 'react'
-import UniOrg from '../util/uniorg'
-import getOrgText from '../util/getOrgText'
-
-export interface PreviewProps {
- id: string
- title: string
-}
-export const Preview = (props: PreviewProps) => {
- const { id, title } = props
- const text = getOrgText(id)
-
- return (
- <Box>
- <Heading>{title}</Heading>
- <UniOrg orgText={text} />
- </Box>
- )
-}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 11:24:33 +0000