gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix height style

This commit is contained in:
fantasticit 2022-04-25 21:54:31 +08:00
parent de7954bb2a
commit ec726f4c59
7 changed files with 72 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/client/src/components/document/reader/editor.tsx
View File

@ -26,7 +26,7 @@ interface IProps {
document: IDocument;
}
export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
export const Editor: React.FC<IProps> = ({ user, documentId, document, children }) => {
const [loading, toggleLoading] = useToggle(true);
const [error, setError] = useState(null);
const provider = useMemo(() => {
@ -86,6 +86,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
document={document}
container={() => window.document.querySelector('#js-reader-container .ProseMirror .title')}
/>
{children}
</Content>
);
}}

28
packages/client/src/components/document/reader/index.module.scss
View File

@ -1,38 +1,40 @@
.wrap {
height: 100%;
margin-top: -16px;
display: flex;
flex-direction: column;
.headerWrap {
position: sticky;
padding: 0 24px;
height: 60px;
}
.contentWrap {
height: 100%;
padding: 24px 0;
flex: 1;
overflow: hidden;
.editorWrap {
padding-bottom: 24px;
> div {
height: 100%;
padding: 24px 16px 48px;
overflow: auto;
}
.editorWrap {
min-height: 100%;
padding-bottom: 24px;
margin: 0 auto;
&.isStandardWidth {
width: 96%;
max-width: 750px;
margin: 0 auto;
}
&.isFullWidth {
width: 100%;
margin: 0 auto;
}
}
.editorContainer {
min-height: 240px;
}
.commentWrap {
padding: 16px 0;
padding: 16px 0 32px;
border-top: 1px solid var(--semi-color-border);
}
}

18
packages/client/src/components/document/reader/index.tsx
View File

@ -1,5 +1,5 @@
import Router from 'next/router';
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import cls from 'classnames';
import { Layout, Nav, Space, Button, Typography, Skeleton, Tooltip, Popover, BackTop } from '@douyinfe/semi-ui';
import { IconEdit, IconArticle } from '@douyinfe/semi-icons';
@ -29,6 +29,7 @@ interface IProps {
export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
if (!documentId) return null;
const [container, setContainer] = useState<HTMLDivElement>();
const { width: windowWidth } = useWindowSize();
const { width, fontSize } = useDocumentStyle();
const editorWrapClassNames = useMemo(() => {
@ -85,6 +86,7 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
></Nav>
</Header>
<Layout className={styles.contentWrap}>
<div ref={setContainer}>
<div className={cls(styles.editorWrap, editorWrapClassNames)} style={{ fontSize }}>
<DataRender
loading={docAuthLoading}
@ -94,13 +96,14 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
return (
<>
<Seo title={document.title} />
<div className={styles.editorContainer}>
{user && <Editor key={document.id} user={user} documentId={document.id} document={document} />}
</div>
{user && (
<Editor key={document.id} user={user} documentId={document.id} document={document}>
<div className={styles.commentWrap}>
<CommentEditor documentId={document.id} />
</div>
{authority && authority.editable && (
</Editor>
)}
{authority && authority.editable && container && (
<BackTop
style={{
display: 'flex',
@ -115,18 +118,19 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
transform: `translateY(-50px);`,
}}
onClick={gotoEdit}
target={() => window.document.querySelector('.Pane2')}
target={() => container}
visibilityHeight={200}
>
<IconEdit />
</BackTop>
)}
<BackTop target={() => window.document.querySelector('.Pane2')} />
{container && <BackTop target={() => container} />}
</>
);
}}
/>
</div>
</div>
</Layout>
</div>
);

2
packages/client/src/layouts/double-column/index.module.scss
View File

@ -50,7 +50,7 @@
}
.rightWrap {
padding: 16px 24px;
height: 100%;
overflow: auto;
}
}

2
packages/client/src/pages/wiki/[wikiId]/document/[documentId]/index.tsx
View File

@ -11,7 +11,7 @@ interface IProps {
const Page: NextPage<IProps> = ({ wikiId, documentId }) => {
return (
<DoubleColumnLayout
leftNode={<WikiTocs pageTitle="文档" wikiId={wikiId} documentId={documentId} />}
leftNode={<WikiTocs wikiId={wikiId} documentId={documentId} />}
rightNode={<DocumentReader key={documentId} documentId={documentId} />}
/>
);

4
packages/client/src/pages/wiki/[wikiId]/documents/index.tsx
View File

@ -82,7 +82,7 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
<DoubleColumnLayout
leftNode={<WikiTocs wikiId={wikiId} />}
rightNode={
<>
<div style={{ padding: '16px 24px' }}>
<Seo title={tab === 'documents' ? '全部文档' : '目录管理'} />
<Title heading={3} style={{ marginBottom: 24 }}>
文档管理
@ -95,7 +95,7 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
<WikiTocsManager wikiId={wikiId} />
</TabPane>
</Tabs>
</>
</div>
}
></DoubleColumnLayout>
);

6
packages/client/src/pages/wiki/[wikiId]/setting/index.tsx
View File

@ -27,7 +27,11 @@ const Page: NextPage<IProps> = ({ wikiId }) => {
return (
<DoubleColumnLayout
leftNode={<WikiTocs wikiId={wikiId} />}
rightNode={<WikiSetting wikiId={wikiId} tab={tab} onNavigate={(tab) => navigate(tab)()} />}
rightNode={
<div style={{ padding: '16px 24px' }}>
<WikiSetting wikiId={wikiId} tab={tab} onNavigate={(tab) => navigate(tab)()} />
</div>
}
/>
);
};