mirror of https://github.com/fantasticit/think.git
feat: update document style
This commit is contained in:
parent
d5b3ea24de
commit
7ac3355cc2
|
@ -52,9 +52,7 @@ export const DocumentEditor: React.FC<IProps> = ({ documentId }) => {
|
|||
<DocumentShare key="share" documentId={documentId} />
|
||||
<DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} />
|
||||
<DocumentStar key="star" documentId={documentId} />
|
||||
<Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
||||
</Popover>
|
||||
<DocumentStyle />
|
||||
</Space>
|
||||
);
|
||||
|
||||
|
|
|
@ -90,12 +90,10 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
|
|||
<DocumentStar key="star" documentId={documentId} />
|
||||
</>
|
||||
)}
|
||||
<Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
||||
</Popover>
|
||||
<DocumentStyle />
|
||||
</Space>
|
||||
),
|
||||
[document, documentId, authority, isMobile, gotoEdit]
|
||||
[document, documentId, authority, gotoEdit]
|
||||
);
|
||||
|
||||
const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
|
||||
|
|
|
@ -86,9 +86,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
|
|||
}
|
||||
footer={
|
||||
<Space>
|
||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
||||
</Popover>
|
||||
<DocumentStyle />
|
||||
<Theme />
|
||||
<User />
|
||||
</Space>
|
||||
|
|
|
@ -1,14 +1,26 @@
|
|||
import React from 'react';
|
||||
import { RadioGroup, Radio, Typography, Slider } from '@douyinfe/semi-ui';
|
||||
import { RadioGroup, Radio, Typography, Slider, Popover, Button } from '@douyinfe/semi-ui';
|
||||
import { IconArticle } from '@douyinfe/semi-icons';
|
||||
import { useWindowSize } from 'hooks/use-window-size';
|
||||
import { useDocumentStyle } from 'hooks/use-document-style';
|
||||
import { useToggle } from 'hooks/use-toggle';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export const DocumentStyle = () => {
|
||||
const { isMobile } = useWindowSize();
|
||||
const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
|
||||
const [visible, toggleVisible] = useToggle(false);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
key="style"
|
||||
zIndex={1061}
|
||||
position={isMobile ? 'topRight' : 'bottomLeft'}
|
||||
visible={visible}
|
||||
onVisibleChange={toggleVisible}
|
||||
content={
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.item}>
|
||||
<Text>正文大小</Text>
|
||||
|
@ -30,5 +42,9 @@ export const DocumentStyle = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" onMouseDown={toggleVisible} />
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -63,9 +63,7 @@ export const Editor: React.FC<IProps> = ({ user, data, updateTemplate, deleteTem
|
|||
}
|
||||
footer={
|
||||
<Space>
|
||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
||||
</Popover>
|
||||
<DocumentStyle />
|
||||
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
||||
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
||||
</Tooltip>
|
||||
|
|
|
@ -78,9 +78,7 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
|
|||
}
|
||||
footer={
|
||||
<Space>
|
||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
||||
</Popover>
|
||||
<DocumentStyle />
|
||||
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
||||
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
||||
</Tooltip>
|
||||
|
|
Loading…
Reference in New Issue