Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-13 19:42:39 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add width option to page menu

Browse Source
This commit is contained in:
Philipinho
2024-07-03 11:23:42 +01:00
parent 8f056d1071
commit e824aeced7
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/client/src/features/page/components/header/page-header-menu.tsx
View File

@ -1,5 +1,6 @@
import { ActionIcon, Menu, Tooltip } from "@mantine/core"; import { ActionIcon, Group, Menu, Tooltip } from "@mantine/core";
import { import {
IconArrowsHorizontal,
IconDots, IconDots,
IconHistory, IconHistory,
IconLink, IconLink,
@ -19,6 +20,7 @@ import { getAppUrl } from "@/lib/config.ts";
import { extractPageSlugId } from "@/lib"; import { extractPageSlugId } from "@/lib";
import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts"; import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx"; import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
interface PageHeaderMenuProps { interface PageHeaderMenuProps {
readOnly?: boolean; readOnly?: boolean;
@ -95,6 +97,13 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
Copy link Copy link
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item leftSection={<IconArrowsHorizontal size={16} stroke={2} />}>
<Group wrap="nowrap">
<PageWidthToggle label="Full width" />
</Group>
</Menu.Item>
<Menu.Item <Menu.Item
leftSection={<IconHistory size={16} stroke={2} />} leftSection={<IconHistory size={16} stroke={2} />}
onClick={openHistoryModal} onClick={openHistoryModal}

13
apps/client/src/features/user/components/page-width-pref.tsx
View File

@ -1,4 +1,4 @@
import { Group, Text, Switch } from "@mantine/core"; import { Group, Text, Switch, MantineSize } from "@mantine/core";
import { useAtom } from "jotai/index"; import { useAtom } from "jotai/index";
import { userAtom } from "@/features/user/atoms/current-user-atom.ts"; import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
import { updateUser } from "@/features/user/services/user-service.ts"; import { updateUser } from "@/features/user/services/user-service.ts";
@ -14,12 +14,16 @@ export default function PageWidthPref() {
</Text> </Text>
</div> </div>
<WidthToggle /> <PageWidthToggle />
</Group> </Group>
); );
} }
function WidthToggle() { interface PageWidthToggleProps {
size?: MantineSize;
label?: string;
}
export function PageWidthToggle({ size, label }: PageWidthToggleProps) {
const [user, setUser] = useAtom(userAtom); const [user, setUser] = useAtom(userAtom);
const [checked, setChecked] = useState( const [checked, setChecked] = useState(
user.settings?.preferences?.fullPageWidth, user.settings?.preferences?.fullPageWidth,
@ -34,6 +38,9 @@ function WidthToggle() {
return ( return (
<Switch <Switch
size={size}
label={label}
labelPosition="left"
defaultChecked={checked} defaultChecked={checked}
onChange={handleChange} onChange={handleChange}
aria-label="Toggle full page width" aria-label="Toggle full page width"