summaryrefslogtreecommitdiff
path: root/components/Tweaks/NodesNLinks/CitationsPanel.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/Tweaks/NodesNLinks/CitationsPanel.tsx')
-rw-r--r--components/Tweaks/NodesNLinks/CitationsPanel.tsx102
1 files changed, 102 insertions, 0 deletions
diff --git a/components/Tweaks/NodesNLinks/CitationsPanel.tsx b/components/Tweaks/NodesNLinks/CitationsPanel.tsx
new file mode 100644
index 0000000..aebddca
--- /dev/null
+++ b/components/Tweaks/NodesNLinks/CitationsPanel.tsx
@@ -0,0 +1,102 @@
+import { Box, StackDivider, VStack } from '@chakra-ui/react'
+import React from 'react'
+import { ColorMenu } from '../Visual/ColorMenu'
+import { colorList, initialVisuals } from '../../config'
+import { EnableSection } from '../EnableSection'
+import { SliderWithInfo } from '../SliderWithInfo'
+
+export interface CitationsPanelProps {
+ visuals: typeof initialVisuals
+ setVisuals: any
+}
+export const CitationsPanel = (props: CitationsPanelProps) => {
+ const { visuals, setVisuals } = props
+ return (
+ <VStack
+ spacing={2}
+ justifyContent="flex-start"
+ divider={<StackDivider borderColor="gray.500" />}
+ align="stretch"
+ color="gray.800"
+ >
+ <Box>
+ <EnableSection
+ label="Dash cite links"
+ infoText="Add dashes to citation links made with org-roam-bibtex"
+ value={visuals.citeDashes}
+ onChange={() => setVisuals({ ...visuals, citeDashes: !visuals.citeDashes })}
+ >
+ <SliderWithInfo
+ label="Dash length"
+ value={visuals.citeDashLength / 10}
+ onChange={(value) => setVisuals({ ...visuals, citeDashLength: value * 10 })}
+ />
+ <SliderWithInfo
+ label="Gap length"
+ value={visuals.citeGapLength / 5}
+ onChange={(value) => setVisuals({ ...visuals, citeGapLength: value * 5 })}
+ />
+ </EnableSection>
+ <ColorMenu
+ colorList={colorList}
+ label="Citation node color"
+ setVisuals={setVisuals}
+ value={'citeNodeColor'}
+ visValue={visuals.citeNodeColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Citation link color"
+ setVisuals={setVisuals}
+ value={'citeLinkColor'}
+ visValue={visuals.citeLinkColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link highlight"
+ setVisuals={setVisuals}
+ value={'citeLinkHighlightColor'}
+ visValue={visuals.citeLinkHighlightColor}
+ />
+ <EnableSection
+ label="Dash ref links"
+ infoText="Add dashes to citation links, whose target has a note, made with org-roam-bibtex"
+ value={visuals.refDashes}
+ onChange={() => setVisuals({ ...visuals, refDashes: !visuals.refDashes })}
+ >
+ <SliderWithInfo
+ label="Dash length"
+ value={visuals.refDashLength / 10}
+ onChange={(value) => setVisuals({ ...visuals, refDashLength: value * 10 })}
+ />
+ <SliderWithInfo
+ label="Gap length"
+ value={visuals.refGapLength / 5}
+ onChange={(value) => setVisuals({ ...visuals, refGapLength: value * 5 })}
+ />
+ </EnableSection>
+ <ColorMenu
+ colorList={colorList}
+ label="Reference node color"
+ setVisuals={setVisuals}
+ value={'refNodeColor'}
+ visValue={visuals.refNodeColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link color"
+ setVisuals={setVisuals}
+ value={'refLinkColor'}
+ visValue={visuals.refLinkColor}
+ />
+ <ColorMenu
+ colorList={colorList}
+ label="Reference link highlight"
+ setVisuals={setVisuals}
+ value={'refLinkHighlightColor'}
+ visValue={visuals.refLinkHighlightColor}
+ />
+ </Box>
+ </VStack>
+ )
+}