From 7ac3355cc272819471fc9a7b4462ba96e2b40d82 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 9 May 2022 16:25:09 +0800
Subject: [PATCH] feat: update document style

---
 .../src/components/document/editor/index.tsx  |  4 +-
 .../src/components/document/reader/index.tsx  |  6 +-
 .../document/reader/public/index.tsx          |  4 +-
 .../src/components/document/style/index.tsx   | 58 ++++++++++++-------
 .../src/components/template/editor/editor.tsx |  4 +-
 .../src/components/template/editor/index.tsx  |  4 +-
 6 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/packages/client/src/components/document/editor/index.tsx b/packages/client/src/components/document/editor/index.tsx
index 53b767e..5484f54 100644
--- a/packages/client/src/components/document/editor/index.tsx
+++ b/packages/client/src/components/document/editor/index.tsx
@@ -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>
   );
 
diff --git a/packages/client/src/components/document/reader/index.tsx b/packages/client/src/components/document/reader/index.tsx
index 0c36357..b77fe5e 100644
--- a/packages/client/src/components/document/reader/index.tsx
+++ b/packages/client/src/components/document/reader/index.tsx
@@ -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]);
diff --git a/packages/client/src/components/document/reader/public/index.tsx b/packages/client/src/components/document/reader/public/index.tsx
index 726bc54..c29f5bd 100644
--- a/packages/client/src/components/document/reader/public/index.tsx
+++ b/packages/client/src/components/document/reader/public/index.tsx
@@ -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>
diff --git a/packages/client/src/components/document/style/index.tsx b/packages/client/src/components/document/style/index.tsx
index 9cce083..e394e0b 100644
--- a/packages/client/src/components/document/style/index.tsx
+++ b/packages/client/src/components/document/style/index.tsx
@@ -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>
   );
 };
diff --git a/packages/client/src/components/template/editor/editor.tsx b/packages/client/src/components/template/editor/editor.tsx
index d7cc4fe..e42f276 100644
--- a/packages/client/src/components/template/editor/editor.tsx
+++ b/packages/client/src/components/template/editor/editor.tsx
@@ -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>
diff --git a/packages/client/src/components/template/editor/index.tsx b/packages/client/src/components/template/editor/index.tsx
index 06c606e..00a22d4 100644
--- a/packages/client/src/components/template/editor/index.tsx
+++ b/packages/client/src/components/template/editor/index.tsx
@@ -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>