feat: update document style

This commit is contained in:
fantasticit 2022-05-09 16:25:09 +08:00
parent d5b3ea24de
commit 7ac3355cc2
6 changed files with 43 additions and 37 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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