Merge pull request #8 from slotDumpling/reader-menu

feat: move reader menu to top-right for desktop

src/pages/reader/Header/Right.tsx

@@ -49,6 +49,7 @@ import { useAsideOpen } from "lib/hooks";
 import { sortBy } from "lodash";
 import IconFont from "component/IconFont";
 import { useDrawCtrl, useUpdateDrawCtrl } from "lib/draw/DrawCtrl";
+import { OptionButton } from "../Options";
 
 export const HeaderRight: FC<{
   instantSave: () => Promise<void> | undefined;
@@ -58,6 +59,7 @@ export const HeaderRight: FC<{
     <div className="right">
       {teamOn ? <RoomInfo /> : <JoinRoom instantSave={instantSave} />}
       <PageNavButton />
+      <OptionButton placement="bottomRight" />
     </div>
   );
 };

src/pages/reader/Header/header.sass

@@ -32,8 +32,10 @@
         grid-column: span 3
   @include for-desktop
     height: $header-low-height
-    > .left, > .right
+    > .left
       grid-template-columns: repeat(2, 1fr)
+    > .right
+      grid-template-columns: repeat(3, 1fr)
     > .middle
       grid-template-columns: repeat(7, 1fr)
       .redo-btn
@@ -73,6 +75,9 @@
           max-width: 200px
           &[data-show=false]
             display: none
+  > .right .reader-option-btn
+    @include for-phone
+      display: none
 
 .team-title
   display: flex

src/pages/reader/Options/index.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { Button, Popover, Switch } from "antd";
+import { TooltipPlacement } from "antd/lib/tooltip";
+import { useForceLight } from "lib/Dark";
+import { useDrawCtrl, useUpdateDrawCtrl } from "lib/draw/DrawCtrl";
+import { useMediaQuery } from "react-responsive";
+import { MoreOutlined } from "@ant-design/icons";
+import "./options.sass";
+
+export const OptionButton: FC<{
+  placement?: TooltipPlacement;
+}> = ({ placement }) => {
+  const { finger } = useDrawCtrl();
+  const updateDrawCtrl = useUpdateDrawCtrl();
+  const [forceLight, setForceLight] = useForceLight();
+  const isLight = useMediaQuery({ query: "(prefers-color-scheme: light)" });
+
+  const options = (
+    <div className="reader-options">
+      <div className="other-option">
+        <span>Pencil only</span>
+        <Switch
+          size="small"
+          checked={!finger}
+          onChange={(v) => updateDrawCtrl({ finger: !v })}
+        />
+      </div>
+      <div className="other-option">
+        <span>Light mode</span>
+        <Switch
+          size="small"
+          checked={forceLight || isLight}
+          disabled={isLight}
+          onChange={setForceLight}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <Popover
+      getPopupContainer={(e) => e.parentElement!}
+      trigger="click"
+      content={options}
+      placement={placement}
+    >
+      <Button
+        type="text"
+        icon={<MoreOutlined />}
+        className="reader-option-btn"
+      />
+    </Popover>
+  );
+};

src/pages/reader/Options/options.sass

@@ -0,0 +1,15 @@
+@import ../../../sass/_mixins
+@import ../../../sass/_var
+
+.reader-options .other-option
+  width: 120px
+  display: flex
+  justify-content: space-between
+  align-items: center
+  padding-bottom: 10px
+  &:last-of-type
+    padding: 0
+  .ant-switch
+    box-shadow: 0 0 0 1px #eee
+    .ant-switch-handle::before
+      border: $default-border

src/pages/reader/PageNav/PageNav.tsx

@@ -18,16 +18,7 @@ import {
   DropResult,
   DragDropContext,
 } from "react-beautiful-dnd";
-import {
-  Avatar,
-  Button,
-  Menu,
-  Pagination,
-  Popover,
-  Select,
-  Switch,
-  Tabs,
-} from "antd";
+import { Avatar, Button, Menu, Pagination, Popover, Select, Tabs } from "antd";
 import {
   Setter,
   useActiveKey,
@@ -47,9 +38,7 @@ import { NotePage } from "lib/note/note";
 import { TeamState } from "lib/draw/TeamState";
 import { AddPageButton } from "../tools/AddButton";
 import { CSSTransition } from "react-transition-group";
-import { useForceLight } from "lib/Dark";
-import { useDrawCtrl, useUpdateDrawCtrl } from "lib/draw/DrawCtrl";
-import { useMediaQuery } from "react-responsive";
+import { OptionButton } from "../Options";
 
 type PreviewProps = ReaderMethods & ReaderStates;
 export const PageNav: FC<PreviewProps> = (props) => {
@@ -444,7 +433,6 @@ const PreviewFooter: FC<PreviewProps> = ({
           {pageIndex} / {pageOrder.length}
         </Button>
       </Popover>
-      <FooterOptions />
       <Select
         className="size-select"
         popupClassName="size-drop"
@@ -461,52 +449,7 @@ const PreviewFooter: FC<PreviewProps> = ({
         placement="topRight"
         getPopupContainer={(e) => e.parentElement!}
       />
+      <OptionButton placement="topRight" />
     </footer>
   );
 };
-
-const FooterOptions = () => {
-  const { finger } = useDrawCtrl();
-  const updateDrawCtrl = useUpdateDrawCtrl();
-  const [forceLight, setForceLight] = useForceLight();
-  const isLight = useMediaQuery({ query: "(prefers-color-scheme: light)" });
-
-  const options = (
-    <>
-      <div className="footer-option">
-        <span>Pencil only</span>
-        <Switch
-          size="small"
-          checked={!finger}
-          onChange={(v) => updateDrawCtrl({ finger: !v })}
-        />
-      </div>
-      <div className="footer-option">
-        <span>Light mode</span>
-        <Switch
-          size="small"
-          checked={forceLight || isLight}
-          disabled={isLight}
-          onChange={setForceLight}
-        />
-      </div>
-    </>
-  );
-
-  return (
-    <Popover
-      getPopupContainer={(e) => e.parentElement!}
-      trigger="click"
-      content={options}
-      placement="topRight"
-    >
-      <Button
-        className="option-btn"
-        size="small"
-        type="text"
-        shape="circle"
-        icon={<MoreOutlined />}
-      />
-    </Popover>
-  );
-};

src/pages/reader/PageNav/page-nav.sass

@@ -42,8 +42,8 @@ $card-width: 200px
   @include for-phone
     padding: $header-high-height+10px 10px calc(10px + $safe-bottom) 10px
 
-@media (hover: none)
-  main[data-finger=true] ~ .preview-drop
+main[data-finger=true] ~ .preview-drop
+  @media (hover: none)
     right: 30px
 
 body.ant-scrolling-effect .preview-drop
@@ -173,18 +173,9 @@ body.ant-scrolling-effect .preview-drop
     .size-select
       @include for-phone
         display: none
-    .footer-option
-      width: 120px
-      display: flex
-      justify-content: space-between
-      align-items: center
-      padding-bottom: 10px
-      &:last-of-type
-        padding: 0
-      .ant-switch
-        box-shadow: 0 0 0 1px #eee
-        .ant-switch-handle::before
-          border: $default-border
+    .reader-option-btn
+      @include for-desktop
+        display: none
 
 .preview-avatar
   box-sizing: content-box