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

feat: update document style

pull/44/head
fantasticit 2022-05-09 16:25:09 +08:00
parent d5b3ea24de
commit 7ac3355cc2
6 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/src/components/document/editor/index.tsx
View File

@ -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>
);

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

@ -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]);

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

@ -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>

58
packages/client/src/components/document/style/index.tsx
View File

@ -1,34 +1,50 @@
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 (
<div className={styles.wrap}>
<div className={styles.item}>
<Text>正文大小</Text>
<Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
<Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
</div>
<div className={styles.item}>
<Text>页面尺寸</Text>
<div>
<RadioGroup
type="button"
value={width}
onChange={(e) => setWidth(e.target.value)}
style={{ marginTop: '0.5em' }}
>
<Radio value={'standardWidth'}>标宽模式</Radio>
<Radio value={'fullWidth'}>超宽模式</Radio>
</RadioGroup>
<Popover
key="style"
zIndex={1061}
position={isMobile ? 'topRight' : 'bottomLeft'}
visible={visible}
onVisibleChange={toggleVisible}
content={
<div className={styles.wrap}>
<div className={styles.item}>
<Text>正文大小</Text>
<Text style={{ fontSize: '0.8em' }}> {fontSize}px</Text>
<Slider min={12} max={24} step={1} tooltipVisible={false} value={fontSize} onChange={setFontSize} />
</div>
<div className={styles.item}>
<Text>页面尺寸</Text>
<div>
<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>
}
>
<Button icon={<IconArticle />} theme="borderless" type="tertiary" onMouseDown={toggleVisible} />
</Popover>
);
};

4
packages/client/src/components/template/editor/editor.tsx
View File

@ -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>

4
packages/client/src/components/template/editor/index.tsx
View File

@ -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>