1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import { Box, StackDivider, VStack } from '@chakra-ui/react'
import React from 'react'
import { ColorMenu } from './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>
)
}
|
