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} />
|
<DocumentShare key="share" documentId={documentId} />
|
||||||
<DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} />
|
<DocumentVersion key="version" documentId={documentId} onSelect={triggerUseDocumentVersion} />
|
||||||
<DocumentStar key="star" documentId={documentId} />
|
<DocumentStar key="star" documentId={documentId} />
|
||||||
<Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
|
<DocumentStyle />
|
||||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -90,12 +90,10 @@ export const DocumentReader: React.FC<IProps> = ({ documentId }) => {
|
||||||
<DocumentStar key="star" documentId={documentId} />
|
<DocumentStar key="star" documentId={documentId} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<Popover key="style" zIndex={1061} position={isMobile ? 'topRight' : 'bottomLeft'} content={<DocumentStyle />}>
|
<DocumentStyle />
|
||||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
</Space>
|
</Space>
|
||||||
),
|
),
|
||||||
[document, documentId, authority, isMobile, gotoEdit]
|
[document, documentId, authority, gotoEdit]
|
||||||
);
|
);
|
||||||
|
|
||||||
const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
|
const editBtnStyle = useMemo(() => getEditBtnStyle(isMobile ? 16 : 100), [isMobile]);
|
||||||
|
|
|
@ -86,9 +86,7 @@ export const DocumentPublicReader: React.FC<IProps> = ({ documentId, hideLogo =
|
||||||
}
|
}
|
||||||
footer={
|
footer={
|
||||||
<Space>
|
<Space>
|
||||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
<DocumentStyle />
|
||||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
<Theme />
|
<Theme />
|
||||||
<User />
|
<User />
|
||||||
</Space>
|
</Space>
|
||||||
|
|
|
@ -1,34 +1,50 @@
|
||||||
import React from 'react';
|
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 { useDocumentStyle } from 'hooks/use-document-style';
|
||||||
|
import { useToggle } from 'hooks/use-toggle';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
const { Text } = Typography;
|
const { Text } = Typography;
|
||||||
|
|
||||||
export const DocumentStyle = () => {
|
export const DocumentStyle = () => {
|
||||||
|
const { isMobile } = useWindowSize();
|
||||||
const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
|
const { width, fontSize, setWidth, setFontSize } = useDocumentStyle();
|
||||||
|
const [visible, toggleVisible] = useToggle(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrap}>
|
<Popover
|
||||||
<div className={styles.item}>
|
key="style"
|
||||||
<Text>正文大小</Text>
|
zIndex={1061}
|
||||||
<Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
|
position={isMobile ? 'topRight' : 'bottomLeft'}
|
||||||
<Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
|
visible={visible}
|
||||||
</div>
|
onVisibleChange={toggleVisible}
|
||||||
<div className={styles.item}>
|
content={
|
||||||
<Text>页面尺寸</Text>
|
<div className={styles.wrap}>
|
||||||
<div>
|
<div className={styles.item}>
|
||||||
<RadioGroup
|
<Text>正文大小</Text>
|
||||||
type="button"
|
<Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
|
||||||
value={width}
|
<Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
|
||||||
onChange={(e) => setWidth(e.target.value)}
|
</div>
|
||||||
style={{ marginTop: '0.5em' }}
|
<div className={styles.item}>
|
||||||
>
|
<Text>页面尺寸</Text>
|
||||||
<Radio value={'standardWidth'}>标宽模式</Radio>
|
<div>
|
||||||
<Radio value={'fullWidth'}>超宽模式</Radio>
|
<RadioGroup
|
||||||
</RadioGroup>
|
type="button"
|
||||||
|
value={width}
|
||||||
|
onChange={(e) => setWidth(e.target.value)}
|
||||||
|
style={{ marginTop: '0.5em' }}
|
||||||
|
>
|
||||||
|
<Radio value={'standardWidth'}>标宽模式</Radio>
|
||||||
|
<Radio value={'fullWidth'}>超宽模式</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</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={
|
footer={
|
||||||
<Space>
|
<Space>
|
||||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
<DocumentStyle />
|
||||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
||||||
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
|
@ -78,9 +78,7 @@ export const TemplateEditor: React.FC<IProps> = ({ templateId }) => {
|
||||||
}
|
}
|
||||||
footer={
|
footer={
|
||||||
<Space>
|
<Space>
|
||||||
<Popover key="style" zIndex={1061} position="bottomLeft" content={<DocumentStyle />}>
|
<DocumentStyle />
|
||||||
<Button icon={<IconArticle />} theme="borderless" type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
<Tooltip position="bottom" content={isPublic ? '公开模板' : '个人模板'}>
|
||||||
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
<Switch onChange={(v) => updateTemplate({ isPublic: v })}></Switch>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
Loading…
Reference in New Issue