diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/BehaviorPanel.tsx | 0 | ||||
| -rw-r--r-- | components/Sidebar/Backlinks.tsx | 44 | ||||
| -rw-r--r-- | components/Sidebar/Link.tsx | 208 | ||||
| -rw-r--r-- | components/Sidebar/Note.tsx | 69 | ||||
| -rw-r--r-- | components/Sidebar/Toolbar.tsx | 61 | ||||
| -rw-r--r-- | components/Sidebar/index.tsx | 335 | ||||
| -rw-r--r-- | components/Sidebar/noteStyle.ts | 140 | ||||
| -rw-r--r-- | components/Tweaks/BehaviorPanel.tsx | 16 | ||||
| -rw-r--r-- | components/config.ts | 4 |
9 files changed, 526 insertions, 351 deletions
diff --git a/components/BehaviorPanel.tsx b/components/BehaviorPanel.tsx deleted file mode 100644 index e69de29..0000000 --- a/components/BehaviorPanel.tsx +++ /dev/null diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx index f899d3e..8c1e9bc 100644 --- a/components/Sidebar/Backlinks.tsx +++ b/components/Sidebar/Backlinks.tsx @@ -1,4 +1,4 @@ -import { LinksByNodeId, NodeById } from '../../pages/index' +import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index' import { GraphData, NodeObject, LinkObject } from 'force-graph' @@ -12,17 +12,34 @@ export interface BacklinksProps { setPreviewNode: any nodeById: NodeById linksByNodeId: LinksByNodeId - getText: any + nodeByCite: NodeByCite + setSidebarHighlightedNode: OrgRoamNode } import { PreviewLink } from './Link' +import { OrgRoamNode } from '../../api' export const Backlinks = (props: BacklinksProps) => { - const { previewNode, setPreviewNode, nodeById, linksByNodeId, getText } = props + const { + previewNode, + setPreviewNode, + setSidebarHighlightedNode, + nodeById, + linksByNodeId, + nodeByCite, + } = props const links = linksByNodeId[previewNode?.id] ?? [] + + const backLinks = links + .filter((link: LinkObject) => { + const [source, target] = normalizeLinkEnds(link) + return source !== previewNode?.id + }) + .map((l) => l.source) + return ( <Box> - <Heading pt={4}>{'Backlinks (' + links.length + ')'}</Heading> + <Heading pt={4}>{`Backlinks (${backLinks.length})`}</Heading> <VStack pt={2} spacing={3} @@ -32,20 +49,19 @@ export const Backlinks = (props: BacklinksProps) => { color="gray.800" > {previewNode?.id && - links.map((link: LinkObject, i: number) => { - const [source, target] = normalizeLinkEnds(link) - if (source === previewNode?.id) { - return - } + backLinks.map((link) => { + const title = nodeById[link as string]?.title ?? '' return ( - <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={source}> + <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={link}> <PreviewLink - href={'id:' + source} - children={nodeById[source]?.title} + nodeByCite={nodeByCite} + setSidebarHighlightedNode={setSidebarHighlightedNode} + href={`id:${link as string}`} nodeById={nodeById} setPreviewNode={setPreviewNode} - getText={getText} - /> + > + {nodeById[link as string]?.title} + </PreviewLink> </Box> ) })} diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx index ff812ef..9515b6d 100644 --- a/components/Sidebar/Link.tsx +++ b/components/Sidebar/Link.tsx @@ -1,6 +1,7 @@ import { Box, Button, + Link, Popover, PopoverArrow, PopoverBody, @@ -10,9 +11,9 @@ import { PopoverTrigger, Portal, Text, + useTheme, } from '@chakra-ui/react' -import React, { useState } from 'react' -import UniOrg from '../../util/uniorg' +import React, { ReactElement, useContext, useEffect, useMemo, useState } from 'react' import unified from 'unified' //import createStream from 'unified-stream' @@ -22,57 +23,184 @@ import uniorg2rehype from 'uniorg-rehype' import katex from 'rehype-katex' import 'katex/dist/katex.css' import rehype2react from 'rehype-react' +import { ThemeContext } from '../../util/themecontext' +import { NodeByCite, NodeById } from '../../pages' export interface LinkProps { - href: string + href: any children: any - testProp: string - getText: any previewNode?: any setPreviewNode: any + setSidebarHighlightedNode: any + nodeByCite: NodeByCite + nodeById: NodeById } -export const PreviewLink = (props: any) => { - const { href, children, nodeById, getText, previewNode, setPreviewNode } = props - const [previewText, setPreviewText] = useState('') - const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0] +export interface NormalLinkProps { + setPreviewNode: any + nodeById: NodeById + nodeByCite: NodeByCite + href: any + children: any + setSidebarHighlightedNode: any +} - const processor = unified().use(uniorgParse).use(uniorg2rehype).use(katex).use(rehype2react, { - createElement: React.createElement, - // eslint-disable-next-line react/display-name - }) +import { hexToRGBA, getThemeColor } from '../../pages/index' +import noteStyle from './noteStyle' - type === 'id' && getText(uri, setPreviewText) +export const NormalLink = (props: NormalLinkProps) => { + const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props + const { highlightColor } = useContext(ThemeContext) + const theme = useTheme() + const coolHighlightColor = getThemeColor(highlightColor, theme) + const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0] return ( - <> - <Popover trigger="hover" isLazy position="relative" zIndex="tooltip"> - <PopoverTrigger> - <Button size="sm" onClick={() => setPreviewNode(nodeById[uri])} variant="link"> - {children} - </Button> - </PopoverTrigger> - <Portal zIndex={100000} position="relative"> - <PopoverContent boxShadow="xl" position="relative" zIndex="tooltip"> - <PopoverHeader pl={5} fontSize="sm" zIndex="tooltip" fontWeight="semibold"> - {children} - </PopoverHeader> - <PopoverArrow zIndex={10000} /> - <PopoverCloseButton zIndex={10000} /> - <PopoverBody - pb={5} - fontSize="xs" - px={5} + <Text + onMouseEnter={() => setSidebarHighlightedNode(nodeById[uri])} + onMouseLeave={() => setSidebarHighlightedNode({})} + tabIndex={0} + display="inline" + overflow="hidden" + fontWeight={500} + color={highlightColor} + textDecoration="underline" + onClick={() => setPreviewNode(nodeById[uri])} + _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }} + _focus={{ outlineColor: highlightColor }} + > + {children} + </Text> + ) +} + +export const PreviewLink = (props: LinkProps) => { + const { + href, + children, + nodeById, + setSidebarHighlightedNode, + previewNode, + setPreviewNode, + nodeByCite, + } = props + // TODO figure out how to properly type this + // see https://github.com/rehypejs/rehype-react/issues/25 + const [orgText, setOrgText] = useState<any>() + const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0] + + const getId = (type: string, uri: string) => { + if (type === 'id') { + return uri + } + + if (type.includes('cite')) { + const node = nodeByCite[uri] ?? false + if (!node) { + return '' + } + if (node?.properties.FILELESS) { + return '' + } + return node?.id + } + return '' + } + + const id = getId(type, uri) + + const processor = unified() + .use(uniorgParse) + .use(uniorg2rehype) + .use(katex) + .use(rehype2react, { + createElement: React.createElement, + components: { + // eslint-disable-next-line react/display-name + a: ({ children, href }) => ( + <NormalLink + setSidebarHighlightedNode={setSidebarHighlightedNode} + nodeById={nodeById} + nodeByCite={nodeByCite} + setPreviewNode={setPreviewNode} + {...{ children, href }} + /> + ), + }, + }) + + const file = encodeURIComponent(nodeById[id]?.file as string) + const getText = () => { + console.log(nodeById[id]?.title) + fetch(`api/notes/${file}`) + .then((res) => { + return res.text() + }) + .then((res) => { + if (res !== 'error') { + const text = processor.processSync(res).result + setOrgText(text) + return + } + }) + .catch((e) => { + console.log(e) + return 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.' + }) + } + + useMemo(() => { + getText() + }, [id]) + if (id) { + return ( + <> + <Popover gutter={12} trigger="hover" placement="top-start"> + <PopoverTrigger> + <Box display="inline"> + <NormalLink + key={nodeById[id]?.title ?? id} + {...{ + setSidebarHighlightedNode, + setPreviewNode, + nodeById, + href, + children, + nodeByCite, + }} + /> + </Box> + </PopoverTrigger> + <Portal> + <PopoverContent + key={nodeById[id]?.title ?? id} + boxShadow="xl" position="relative" zIndex="tooltip" - maxHeight={300} - overflow="scroll" + onMouseEnter={() => setSidebarHighlightedNode(nodeById[id] ?? {})} + onMouseLeave={() => setSidebarHighlightedNode({})} > - {uri && <Box>{processor.processSync(previewText).result}</Box>} - </PopoverBody> - </PopoverContent> - </Portal> - </Popover> - </> + <PopoverArrow /> + <PopoverBody + pb={5} + fontSize="xs" + px={5} + position="relative" + zIndex="tooltip" + maxHeight={300} + overflow="scroll" + > + <Box sx={noteStyle}>{orgText}</Box> + </PopoverBody> + </PopoverContent> + </Portal> + </Popover> + </> + ) + } + return ( + <Text display="inline" color="base.700" cursor="not-allowed"> + {children} + </Text> ) } diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx new file mode 100644 index 0000000..ef2e2b2 --- /dev/null +++ b/components/Sidebar/Note.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import { NodeObject } from 'force-graph' + +import { NodeById, NodeByCite, LinksByNodeId } from '../../pages' +import { Box, Flex } from '@chakra-ui/react' +import { UniOrg } from '../../util/uniorg' +import { Backlinks } from '../../components/Sidebar/Backlinks' +import { noteStyle } from './noteStyle' + +export interface NoteProps { + setPreviewNode: any + previewNode: NodeObject + nodeById: NodeById + nodeByCite: NodeByCite + setSidebarHighlightedNode: any + justification: number + justificationList: string[] + linksByNodeId: LinksByNodeId +} + +export const Note = (props: NoteProps) => { + const { + setPreviewNode, + justificationList, + justification, + previewNode, + nodeById, + nodeByCite, + setSidebarHighlightedNode, + linksByNodeId, + } = props + return ( + <Box + pr={8} + overflow="scroll" + height="85%" + className="org" + sx={{ + ...noteStyle, + + textAlign: justificationList[justification], + }} + > + {previewNode?.id && ( + <Flex height="100%" flexDirection="column" justifyContent="space-between"> + <UniOrg + {...{ + setPreviewNode, + previewNode, + nodeById, + nodeByCite, + setSidebarHighlightedNode, + }} + /> + <Backlinks + {...{ + setPreviewNode, + previewNode, + nodeById, + linksByNodeId, + nodeByCite, + setSidebarHighlightedNode, + }} + /> + </Flex> + )} + </Box> + ) +} diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx new file mode 100644 index 0000000..458361f --- /dev/null +++ b/components/Sidebar/Toolbar.tsx @@ -0,0 +1,61 @@ +import React from 'react' +import { Text, Flex, IconButton } from '@chakra-ui/react' +import { + BiAlignJustify, + BiAlignLeft, + BiAlignMiddle, + BiAlignRight, + BiFont, + BiRightIndent, +} from 'react-icons/bi' +import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons' + +export interface ToolbarProps { + setJustification: any + justification: number + setIndent: any + setFont: any +} + +export const Toolbar = (props: ToolbarProps) => { + const { setJustification, setIndent, setFont, justification } = props + return ( + <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}> + <Flex> + <IconButton variant="ghost" icon={<ChevronLeftIcon />} aria-label="Previous node" /> + <IconButton variant="ghost" icon={<ChevronRightIcon />} aria-label="Previous node" /> + </Flex> + <Flex> + <IconButton + variant="ghost" + aria-label="Justify content" + icon={ + [ + <BiAlignJustify key="justify" />, + <BiAlignLeft key="left" />, + <BiAlignRight key="right" />, + <BiAlignMiddle key="center" />, + ][justification] + } + onClick={() => setJustification((curr: number) => (curr + 1) % 4)} + /> + <IconButton + variant="ghost" + aria-label="Indent Text" + icon={<BiRightIndent />} + onClick={() => { + setIndent((curr: number) => (curr ? 0 : 1)) + }} + /> + <IconButton + variant="ghost" + aria-label="Change font" + icon={<BiFont />} + onClick={() => { + setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif')) + }} + /> + </Flex> + </Flex> + ) +} diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx index e56a25d..4d807ef 100644 --- a/components/Sidebar/index.tsx +++ b/components/Sidebar/index.tsx @@ -1,42 +1,17 @@ import React, { useContext, useEffect, useState } from 'react' -import { UniOrg } from '../../util/uniorg' -import { Backlinks } from './Backlinks' -import { getOrgText } from '../../util/webSocketFunctions' +import { Toolbar } from './Toolbar' +import { Note } from './Note' -import { - Button, - Slide, - VStack, - Flex, - Heading, - Box, - CloseButton, - Text, - Drawer, - DrawerOverlay, - DrawerHeader, - DrawerBody, - DrawerCloseButton, - DrawerContent, - DrawerFooter, - IconButton, -} from '@chakra-ui/react' +import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react' import { Scrollbars } from 'react-custom-scrollbars-2' import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons' -import { - BiFont, - BiAlignJustify, - BiAlignLeft, - BiAlignMiddle, - BiAlignRight, - BiRightIndent, -} from 'react-icons/bi' +import { BiFile } from 'react-icons/bi' import { GraphData, NodeObject, LinkObject } from 'force-graph' import { OrgRoamNode } from '../../api' import { ThemeContext } from '../../util/themecontext' -import { LinksByNodeId, NodeById } from '../../pages/index' +import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index' export interface SidebarProps { isOpen: boolean @@ -46,68 +21,74 @@ export interface SidebarProps { previewNode: NodeObject setPreviewNode: any linksByNodeId: LinksByNodeId + nodeByCite: NodeByCite + setSidebarHighlightedNode: any } const Sidebar = (props: SidebarProps) => { - const { isOpen, onOpen, onClose, previewNode, setPreviewNode, nodeById, linksByNodeId } = props + const { + isOpen, + onOpen, + onClose, + previewNode, + setPreviewNode, + nodeById, + linksByNodeId, + nodeByCite, + setSidebarHighlightedNode, + } = props const { highlightColor } = useContext(ThemeContext) const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>() - const getText = (id: string, setText: any) => { - fetch(`http://localhost:35901/note/${id}`) - .then((res) => { - return res.text() - }) - .then((res) => setText(res)) - .catch((e) => { - return ( - 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.', - console.log(e) - ) - }) - } - useEffect(() => { - if (!previewNode.id) { + if (!previewNode?.id) { onClose() return } onOpen() setPreviewRoamNode(previewNode as OrgRoamNode) - }, [previewNode.id]) + }, [previewNode?.id]) - const [justification, setJustification] = useState(0) + const [justification, setJustification] = useState(1) const justificationList = ['justify', 'start', 'end', 'center'] const [font, setFont] = useState('sans serif') const [indent, setIndent] = useState(0) //maybe want to close it when clicking outside, but not sure //const outsideClickRef = useRef(); return ( - <Slide direction="right" in={isOpen} style={{ maxWidth: '50%' }} unmountOnExit> + <Slide + direction="right" + in={isOpen} + style={{ width: 'clamp(400px, 30%, 500px)' }} + unmountOnExit + > <Flex flexDirection="row" height="100%"> - <Box pl={2} color="gray.800" bg="alt.100" w="100%" paddingBottom={15}> + <Box pl={2} color="black" bg="alt.100" w="100%" paddingBottom={15}> <Flex justifyContent="space-between" paddingTop={4} - pl={0} + pl={4} pb={5} - pr={2} - alignItems="center" + pr={3} + alignItems="top" color="black" > - <Flex> - <IconButton - variant="link" - size="md" - icon={<ChevronLeftIcon />} - aria-label="Previous node" - /> - <Heading size="md" fontWeight={400}> + <Flex alignItems="center" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden"> + <BiFile /> + <Heading + pl={2} + whiteSpace="nowrap" + textOverflow="ellipsis" + overflow="hidden" + lineHeight={1} + size="sm" + fontWeight={600} + color={'gray.800'} + > {previewRoamNode?.title} </Heading> </Flex> - <IconButton // eslint-disable-next-line react/jsx-no-undef icon={<HamburgerIcon />} @@ -116,6 +97,7 @@ const Sidebar = (props: SidebarProps) => { onClick={onClose} /> </Flex> + <Toolbar {...{ setJustification, setIndent, setFont, justification }} /> <Scrollbars //autoHeight //autoHeightMax={600} @@ -132,220 +114,19 @@ const Sidebar = (props: SidebarProps) => { /> )} > - <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={10}> - <Box - pr={8} - overflow="scroll" - height="85%" - className="org" - sx={{ - '.katex': { overflowX: 'scroll' }, - h1: { fontSize: '20', fontWeight: 'bold', marginBottom: 3 }, - h2: { - fontSize: '18', - marginBottom: 2, - color: 'black', - }, - h3: { - fontSize: '16', - fontWeight: '600 !important', - marginBottom: '.5em', - }, - h4: { - fontSize: '14', - fontWeight: '500 !important', - marginBottom: '.25em', - fontStyle: 'italic', - }, - a: { - color: highlightColor, - }, - ol: { - paddingLeft: '5', - }, - ul: { - paddingLeft: '5', - }, - p: { - paddingBottom: '.5em', - }, - div: { - fontSize: 'small', - hyphens: 'auto !important', - textAlign: justificationList[justification], - }, - '.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' }, - // org-like indents - 'h1, h1 ~ *,h2 ~ h1,h2 ~ h1 ~ *,h3 ~ h1,h3 ~ h1 ~ *': { - marginLeft: 0 * indent, - }, - 'h2 ~ *, h1 ~ h2,h1 ~ h2 ~ *:not(h1):not(h3)': { - marginLeft: 2 * indent, - }, - 'h3 ~ *,h1 ~ h3,h1 ~ h3 ~ *:not(h1):not(h2)': { - marginLeft: 4 * indent, - }, + <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={4}> + <Note + {...{ + setPreviewNode, + previewNode, + nodeById, + nodeByCite, + setSidebarHighlightedNode, + justification, + justificationList, + linksByNodeId, }} - > - {previewNode?.id && ( - <Box> - <Flex pt={1} alignItems="center" justifyContent="flex-end"> - <IconButton - variant="ghost" - aria-label="Justify content" - icon={ - [ - <BiAlignJustify key="justify" />, - <BiAlignLeft key="left" />, - <BiAlignRight key="right" />, - <BiAlignMiddle key="center" />, - ][justification] - } - onClick={() => setJustification((curr) => (curr + 1) % 4)} - /> - <IconButton - variant="ghost" - aria-label="Indent Text" - icon={<BiRightIndent />} - onClick={() => { - console.log(indent) - setIndent((curr: number) => (indent ? 0 : 1)) - }} - /> - <IconButton - variant="ghost" - aria-label="Change font" - icon={<BiFont />} - onClick={() => { - setFont((curr: string) => - curr === 'sans serif' ? 'serif' : 'sans serif', - ) - }} - /> - </Flex> - <Flex height="100%" flexDirection="column" justifyContent="space-between"> - <UniOrg - {...{ - getText, - setPreviewNode, - previewNode, - nodeById, - }} - /> - <Backlinks - {...{ - setPreviewNode, - previewNode, - nodeById, - linksByNodeId, - getText, - }} - /> - </Flex> - </Box> - )} - </Box> + /> </VStack> </Scrollbars> </Box> @@ -355,7 +136,3 @@ const Sidebar = (props: SidebarProps) => { } 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/Sidebar/noteStyle.ts b/components/Sidebar/noteStyle.ts new file mode 100644 index 0000000..adf715d --- /dev/null +++ b/components/Sidebar/noteStyle.ts @@ -0,0 +1,140 @@ +export const noteStyle = { + '.katex': { overflowX: 'scroll' }, + h1: { color: 'black', lineHeight: '1.2', fontSize: '20', fontWeight: 'bold', marginBottom: 3 }, + h2: { + fontSize: '18', + marginBottom: 2, + color: 'black', + }, + h3: { + fontSize: '16', + fontWeight: '600 !important', + marginBottom: '.5em', + + color: 'black', + }, + h4: { + fontSize: '14', + fontWeight: '500 !important', + marginBottom: '.25em', + fontStyle: 'italic', + color: 'black', + }, + ol: { + paddingLeft: '5', + }, + ul: { + paddingLeft: '5', + }, + p: { + fontSize: '14', + fontWeight: '500 !important', + paddingBottom: '.5em', + }, + div: { + hyphens: 'auto !important', + }, + '.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' }, +} +export default noteStyle diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx index 27906c5..651396d 100644 --- a/components/Tweaks/BehaviorPanel.tsx +++ b/components/Tweaks/BehaviorPanel.tsx @@ -17,8 +17,6 @@ import { initialBehavior, initialMouse } from '../config' import { InfoTooltip } from './InfoTooltip' import { SliderWithInfo } from './SliderWithInfo' -import { checkFileSystemCompatibility } from '../../util/checkFileSystemCompatibility' - export interface BehaviorPanelProps { behavior: typeof initialBehavior setBehavior: any @@ -166,20 +164,6 @@ export const BehaviorPanel = (props: BehaviorPanelProps) => { onChange={(value) => setBehavior({ ...behavior, zoomPadding: value })} infoText="How much to zoom out to accomodate all nodes when changing the view." /> - - <Box> - <Button width="100%" isDisabled={!checkFileSystemCompatibility()}> - Grant Filesystem Access - </Button> - {!checkFileSystemCompatibility() && ( - <Box bg="gray.600" width="100%" padding={5}> - <Text> - You are not using a browser compatible with the FileSystem Access API. Only Chromium - based browsers are currently supported. - </Text> - </Box> - )} - </Box> </VStack> ) } diff --git a/components/config.ts b/components/config.ts index 0fe4bc1..e1923f2 100644 --- a/components/config.ts +++ b/components/config.ts @@ -119,8 +119,8 @@ export const initialBehavior = { export const initialMouse = { highlight: 'hover', - local: 'click', - follow: 'double', + local: 'double', + follow: 'never', context: 'right', preview: 'click', } |