summaryrefslogtreecommitdiff
path: root/components/tweaks.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/tweaks.tsx')
-rw-r--r--components/tweaks.tsx319
1 files changed, 11 insertions, 308 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index f03339b..2cb5b5d 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -57,6 +57,8 @@ import {
colorList,
} from './config'
+import FilterPanel from './FilterPanel'
+
import { ThemeContext } from '../util/themecontext'
import { usePersistantState } from '../util/persistant-state'
@@ -194,138 +196,15 @@ export const Tweaks = (props: TweakProps) => {
<Heading size="sm">Filter</Heading>
</AccordionButton>
<AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- >
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Link children to...</Text>
- <Menu isLazy placement="right">
- <MenuButton
- as={Button}
- rightIcon={<ChevronDownIcon />}
- colorScheme=""
- color="black"
- >
- {(() => {
- switch (filter.parent) {
- case 'parent':
- return <Text>File</Text>
- case 'heading':
- return <Text>Heading</Text>
- default:
- return <Text>Nothing</Text>
- }
- })()}
- </MenuButton>
- <Portal>
- {' '}
- <MenuList bgColor="gray.200" zIndex="popover">
- <MenuItem
- onClick={() =>
- setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' }))
- }
- >
- Nothing
- </MenuItem>
- <MenuItem
- onClick={() =>
- setFilter((curr: typeof initialFilter) => ({
- ...curr,
- parent: 'parent',
- }))
- }
- >
- Parent file node
- </MenuItem>
- <MenuItem
- onClick={() =>
- setFilter((curr: typeof initialFilter) => ({
- ...curr,
- parent: 'heading',
- }))
- }
- >
- Next highest heading node
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex justifyContent="space-between">
- <Text>Orphans</Text>
- <Switch
- onChange={() => {
- setFilter((curr: typeof initialFilter) => {
- return { ...curr, orphans: !curr.orphans }
- })
- }}
- isChecked={filter.orphans}
- ></Switch>
- </Flex>
- <Flex justifyContent="space-between">
- <Text>Citations without note files</Text>
- <Switch
- onChange={() => {
- setFilter({ ...filter, filelessCites: !filter.filelessCites })
- }}
- isChecked={filter.filelessCites}
- ></Switch>
- </Flex>
- <Flex justifyContent="space-between">
- <Text>Non-existant nodes</Text>
- <Switch
- onChange={() => {
- setTagColors({ ...tagColors, bad: 'white' })
- setFilter({ ...filter, bad: !filter.bad })
- }}
- isChecked={filter.bad}
- ></Switch>
- </Flex>
- </VStack>
- <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
- <AccordionItem>
- <AccordionButton>
- Tag filters
- <AccordionIcon />
- </AccordionButton>
- <AccordionPanel pr={0} mr={0}>
- <TagPanel
- highlightColor={highlightColor}
- filter={filter}
- setFilter={setFilter}
- tags={tags}
- mode="blacklist"
- />
- <TagPanel
- highlightColor={highlightColor}
- filter={filter}
- setFilter={setFilter}
- tags={tags}
- mode="whitelist"
- />
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- Tag Colors
- <AccordionIcon />
- </AccordionButton>
- <AccordionPanel pr={0} mr={0}>
- <TagColorPanel
- tags={tags}
- colorList={colorList}
- tagColors={tagColors}
- setTagColors={setTagColors}
- highlightColor={highlightColor}
- />
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
+ <FilterPanel
+ filter={filter}
+ setFilter={setFilter}
+ tagColors={tagColors}
+ setTagColors={setTagColors}
+ highlightColor={highlightColor}
+ colorList={colorList}
+ tags={tags}
+ />
</AccordionPanel>
</AccordionItem>
<AccordionItem>
@@ -1540,179 +1419,3 @@ export const ColorMenu = (props: ColorMenuProps) => {
</Flex>
)
}
-
-export interface TagPanelProps {
- tags: string[]
- filter: typeof initialFilter
- setFilter: any
- highlightColor: string
- mode: string
-}
-
-export const TagPanel = (props: TagPanelProps) => {
- const { filter, setFilter, tags, highlightColor, mode } = props
- const tagArray = tags.map((tag) => {
- return { value: tag, label: tag }
- })
-
- const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
- const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
- filter[currentTags].map((tag) => {
- return { value: tag, label: tag }
- }),
- )
-
- return (
- <CUIAutoComplete
- items={tagArray}
- label={'Add tag to ' + mode}
- placeholder=" "
- onCreateItem={(item) => null}
- disableCreateItem={true}
- selectedItems={selectedItems}
- onSelectedItemsChange={(changes) => {
- if (changes.selectedItems) {
- setSelectedItems(changes.selectedItems)
- setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
- }
- }}
- listItemStyleProps={{ overflow: 'hidden' }}
- highlightItemBg="gray.400"
- toggleButtonStyleProps={{ variant: 'outline' }}
- inputStyleProps={{
- focusBorderColor: highlightColor,
- color: 'gray.800',
- borderColor: 'gray.600',
- }}
- tagStyleProps={{
- rounded: 'full',
- bg: highlightColor,
- height: 8,
- paddingLeft: 4,
- fontWeight: 'bold',
- }}
- hideToggleButton
- itemRenderer={(selected) => selected.label}
- />
- )
-}
-
-export interface TagColorPanelProps {
- tags: string[]
- highlightColor: string
- colorList: string[]
- tagColors: TagColors
- setTagColors: any
-}
-export const TagColorPanel = (props: TagColorPanelProps) => {
- const { colorList, tagColors, setTagColors, highlightColor, tags } = props
- const tagArray = tags.map((tag) => {
- return { value: tag, label: tag }
- })
-
- const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
- Object.keys(tagColors).map((tag) => {
- return { value: tag, label: tag }
- }),
- )
-
- return (
- <Box>
- <CUIAutoComplete
- items={tagArray}
- label="Add tag to filter"
- placeholder=" "
- disableCreateItem={true}
- selectedItems={selectedItems}
- onSelectedItemsChange={(changes) => {
- if (changes.selectedItems) {
- setSelectedItems(Array.from(new Set(changes.selectedItems)))
- setTagColors(
- Object.fromEntries(
- Array.from(new Set(changes.selectedItems)).map((item) => {
- return [item.label, tagColors[item.label] ?? 'gray.600']
- }),
- ),
- )
- }
- }}
- listItemStyleProps={{ overflow: 'hidden' }}
- highlightItemBg="gray.400"
- toggleButtonStyleProps={{ variant: 'outline' }}
- inputStyleProps={{
- focusBorderColor: highlightColor,
- color: 'gray.800',
- borderColor: 'gray.600',
- }}
- tagStyleProps={{
- display: 'none',
- rounded: 'full',
- bg: highlightColor,
- height: 8,
- paddingLeft: 4,
- fontWeight: 'bold',
- }}
- hideToggleButton
- itemRenderer={(selected) => selected.label}
- />
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- {Object.keys(tagColors).map((tag) => {
- return (
- <Flex key={tag} alignItems="center" justifyContent="space-between" width="100%" pl={2}>
- <Box width="100%">
- <Text fontWeight="bold">{tag}</Text>
- </Box>
- <Menu isLazy placement="right">
- <MenuButton as={Button} colorScheme="" color="black">
- {<Box bgColor={tagColors[tag]} borderRadius="sm" height={6} width={6}></Box>}
- </MenuButton>
- <Portal>
- {' '}
- <MenuList minW={10} zIndex="popover" bgColor="gray.200">
- {colorList.map((color: string) => (
- <MenuItem
- key={color}
- onClick={() =>
- setTagColors({
- ...tagColors,
- [tag]: color,
- })
- }
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
- </MenuItem>
- ))}
- </MenuList>
- </Portal>
- </Menu>
- <IconButton
- aria-label="Delete tag color"
- variant="ghost"
- icon={<DeleteIcon />}
- onClick={() => {
- setTagColors(
- Object.fromEntries(
- Array.from(new Set(selectedItems)).map((item) => {
- return [item.label, tagColors[item.label] ?? 'gray.600']
- }),
- ),
- )
- setSelectedItems(selectedItems.filter((item) => item.value !== tag))
- }}
- />
- </Flex>
- )
- })}
- </VStack>
- </Box>
- )
-}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 12:15:25 +0000