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

WIP

Browse Source
This commit is contained in:
Philipinho
2025-04-21 16:01:45 +01:00
parent 410dce9ea9
commit 0ff41d06fa
3 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/client/src/features/share/components/share-shell.tsx
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import { import {
ActionIcon, ActionIcon,
Affix, Affix,
@ -29,6 +29,8 @@ import {
} from "@/features/share/atoms/sidebar-atom.ts"; } from "@/features/share/atoms/sidebar-atom.ts";
import { IconList } from "@tabler/icons-react"; import { IconList } from "@tabler/icons-react";
import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts"; import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
import classes from "./share.module.css";
import { useClickOutside } from "@mantine/hooks";
const MemoizedSharedTree = React.memo(SharedTree); const MemoizedSharedTree = React.memo(SharedTree);
@ -52,6 +54,22 @@ export default function ShareShell({
const { data } = useGetSharedPageTreeQuery(shareId); const { data } = useGetSharedPageTreeQuery(shareId);
const readOnlyEditor = useAtomValue(readOnlyEditorAtom); const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
const [navbarOutside, setNavbarOutside] = useState<HTMLElement | null>(null);
const [asideOutside, setAsideOutside] = useState<HTMLElement | null>(null);
useClickOutside(
() => {
if (mobileOpened) {
toggleMobile();
}
if (mobileTocOpened) {
toggleTocMobile();
}
},
null,
[navbarOutside, asideOutside],
);
return ( return (
<AppShell <AppShell
header={{ height: 48 }} header={{ height: 48 }}
@ -135,7 +153,11 @@ export default function ShareShell({
</AppShell.Header> </AppShell.Header>
{data?.pageTree?.length > 1 && ( {data?.pageTree?.length > 1 && (
<AppShell.Navbar p="md"> <AppShell.Navbar
p="md"
className={classes.navbar}
ref={setNavbarOutside}
>
<MemoizedSharedTree sharedPageTree={data} /> <MemoizedSharedTree sharedPageTree={data} />
</AppShell.Navbar> </AppShell.Navbar>
)} )}
@ -155,7 +177,12 @@ export default function ShareShell({
</Affix> </Affix>
</AppShell.Main> </AppShell.Main>
<AppShell.Aside p="md" withBorder={false}> <AppShell.Aside
p="md"
withBorder={mobileTocOpened}
className={classes.aside}
ref={setAsideOutside}
>
<ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll"> <ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
<div style={{ paddingBottom: "50px" }}> <div style={{ paddingBottom: "50px" }}>
{readOnlyEditor && ( {readOnlyEditor && (

23
apps/client/src/features/share/components/share.module.css
View File

@ -1,13 +1,20 @@
.shareLinkText { .shareLinkText {
@mixin light { @mixin light {
border-bottom: 0.05em solid var(--mantine-color-dark-0); border-bottom: 0.05em solid var(--mantine-color-dark-0);
} }
@mixin dark { @mixin dark {
border-bottom: 0.05em solid var(--mantine-color-dark-2); border-bottom: 0.05em solid var(--mantine-color-dark-2);
} }
} }
.treeNode { .treeNode {
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
}
.navbar,
.aside {
@media (max-width: $mantine-breakpoint-sm) {
width: 350px;
}
} }

2
apps/client/src/pages/share/shared-page.tsx
View File

@ -45,7 +45,7 @@ export default function SingleSharedPage() {
{!data?.share.searchIndexing && <meta name="robots" content="noindex" />} {!data?.share.searchIndexing && <meta name="robots" content="noindex" />}
</Helmet> </Helmet>
<Container size={900}> <Container size={900} p={0}>
<ReadonlyPageEditor <ReadonlyPageEditor
key={data.page.id} key={data.page.id}
title={data.page.title} title={data.page.title}