Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-17 18:21:04 +10:00
Code Issues Packages Projects Releases Wiki Activity

Wrap menu in a filled fieldset

Browse Source
This commit is contained in:
Ryan Palmer
2024-09-04 15:21:12 +10:00
parent bd15401e7f
commit 9a11d1d086
1 changed files with 27 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/client/src/features/editor/components/table-of-contents/table-of-contents-menu.tsx
View File

@ -13,6 +13,7 @@ import {
Text, Text,
Checkbox, Checkbox,
Card, Card,
Fieldset,
} from "@mantine/core"; } from "@mantine/core";
import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react"; import { IconLayoutAlignCenter, IconLayoutAlignLeft, IconLayoutAlignRight } from "@tabler/icons-react";
import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx"; import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
@ -81,35 +82,29 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
}} }}
shouldShow={shouldShow} shouldShow={shouldShow}
> >
<Group gap={0}> <Fieldset variant="filled" p="xs">
<Tooltip position="top" label="Divider type"> <Group gap="xs">
<Select <Tooltip position="top" label="Divider type">
w={100} <Select
value={editor.getAttributes("tableOfContents").dividerType} w={100}
data={[ value={editor.getAttributes("tableOfContents").dividerType}
{ value: "solid", label: "Solid" }, data={[
{ value: "dashed", label: "Dashed" }, { value: "solid", label: "Solid" },
{ value: "dotted", label: "Dotted" }, { value: "dashed", label: "Dashed" },
{ value: "none", label: "None" }, { value: "dotted", label: "Dotted" },
]} { value: "none", label: "None" },
onChange={(_value, option) => setDividerType(_value as DividerVariant)} ]}
/> onChange={(_value, option) => setDividerType(_value as DividerVariant)}
</Tooltip> />
<Tooltip position="top" label="Table type"> </Tooltip>
<SegmentedControl <Tooltip position="top" label="Table type">
value={editor.getAttributes("tableOfContents").tableType} <SegmentedControl
data={["Contents", "Child Pages"]} value={editor.getAttributes("tableOfContents").tableType}
onChange={(value: "Contents" | "Child Pages") => setTableType(value)} data={["Contents", "Child Pages"]}
/> onChange={(value: "Contents" | "Child Pages") => setTableType(value)}
</Tooltip> />
<Tooltip position="top" label="Show page icons"> </Tooltip>
<Card <Tooltip position="top" label="Show page icons">
p="xs"
m={0}
onClick={() => setPageIcons(!editor.getAttributes("tableOfContents").icons)}
style={{ cursor: "pointer" }}
withBorder
>
<Group gap="xs"> <Group gap="xs">
<Text size="sm">Page Icons</Text> <Text size="sm">Page Icons</Text>
<Checkbox <Checkbox
@ -117,9 +112,9 @@ export function TableOfContentsMenu({ editor }: EditorMenuProps) {
onChange={(event) => setPageIcons(event.currentTarget.checked)} onChange={(event) => setPageIcons(event.currentTarget.checked)}
/> />
</Group> </Group>
</Card> </Tooltip>
</Tooltip> </Group>
</Group> </Fieldset>
</BaseBubbleMenu> </BaseBubbleMenu>
); );
} }