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

fix: add image-viewer, update float button right position

This commit is contained in:
fantasticit 2022-05-04 19:37:33 +08:00
parent ba7cfd5b37
commit 9dd80bf5d4
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
import cls from 'classnames'; import cls from 'classnames';
import { Layout, Nav, Space, Button, Typography, Skeleton, Tooltip, Popover, BackTop, Spin } from '@douyinfe/semi-ui'; import { Layout, Nav, Space, Button, Typography, Skeleton, Tooltip, Popover, BackTop, Spin } from '@douyinfe/semi-ui';
import { IconEdit, IconArticle } from '@douyinfe/semi-icons'; import { IconEdit, IconArticle } from '@douyinfe/semi-icons';
import { ImageViewer } from 'components/image-viewer';
import { Seo } from 'components/seo'; import { Seo } from 'components/seo';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { DocumentShare } from 'components/document/share'; import { DocumentShare } from 'components/document/share';
@ -23,7 +24,7 @@ import styles from './index.module.scss';
const { Header } = Layout; const { Header } = Layout;
const { Text } = Typography; const { Text } = Typography;
const EditBtnStyle = { const getEditBtnStyle = (right = 16) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -32,10 +33,10 @@ const EditBtnStyle = {
borderRadius: '100%', borderRadius: '100%',
backgroundColor: '#0077fa', backgroundColor: '#0077fa',
color: '#fff', color: '#fff',
right: 16, right,
bottom: 70, bottom: 70,
transform: 'translateY(-50px)', transform: 'translateY(-50px)',
}; });
interface IProps { interface IProps {
documentId: string; documentId: string;
@ -97,6 +98,8 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
[document, documentId, authority, isMobile, gotoEdit] [document, documentId, authority, isMobile, gotoEdit]
); );
const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
if (!documentId) return null; if (!documentId) return null;
return ( return (
@ -142,7 +145,7 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
} }
normalContent={() => { normalContent={() => {
return ( return (
<> <div id="js-reader-container">
<Seo title={document.title} /> <Seo title={document.title} />
{user && ( {user && (
<CollaborationEditor <CollaborationEditor
@ -160,12 +163,15 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
</div> </div>
)} )}
{!isMobile && authority && authority.editable && container && ( {!isMobile && authority && authority.editable && container && (
<BackTop style={EditBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}> <BackTop style={editBtnStyle} onClick={gotoEdit} target={() => container} visibilityHeight={200}>
<IconEdit /> <IconEdit />
</BackTop> </BackTop>
)} )}
{container && <BackTop style={{ bottom: 65, right: 16 }} target={() => container} />} <ImageViewer containerSelector="#js-reader-container" />
</> {container && (
<BackTop style={{ bottom: 65, right: isMobile ? 16 : 100 }} target={() => container} />
)}
</div>
); );
}} }}
/> />

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

@ -29,6 +29,7 @@ import { DocumentSkeleton } from 'tiptap/components/skeleton';
import { CollaborationEditor } from 'tiptap/editor'; import { CollaborationEditor } from 'tiptap/editor';
import { Author } from '../author'; import { Author } from '../author';
import styles from './index.module.scss'; import styles from './index.module.scss';
import { useWindowSize } from 'hooks/use-window-size';
const { Header, Content } = Layout; const { Header, Content } = Layout;
const { Text } = Typography; const { Text } = Typography;
@ -42,6 +43,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
const $form = useRef<FormApi>(); const $form = useRef<FormApi>();
const { data, loading, error, query } = usePublicDocument(documentId); const { data, loading, error, query } = usePublicDocument(documentId);
const { width, fontSize } = useDocumentStyle(); const { width, fontSize } = useDocumentStyle();
const { isMobile } = useWindowSize();
const editorWrapClassNames = useMemo(() => { const editorWrapClassNames = useMemo(() => {
return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth; return width === 'standardWidth' ? styles.isStandardWidth : styles.isFullWidth;
}, [width]); }, [width]);
@ -158,7 +160,10 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
renderInEditorPortal={renderAuthor} renderInEditorPortal={renderAuthor}
/> />
<ImageViewer containerSelector="#js-share-document-editor-container" /> <ImageViewer containerSelector="#js-share-document-editor-container" />
<BackTop target={() => document.querySelector('#js-share-document-editor-container').parentNode} /> <BackTop
style={{ bottom: 65, right: isMobile ? 16 : 100 }}
target={() => document.querySelector('#js-share-document-editor-container').parentNode}
/>
</div> </div>
); );
}} }}