Merge pull request #9 from slotDumpling/header-tools-desktop

feat: more buttons in header for desktop
slotDumpling · Aug 8, 2024 · 65222a1 · 65222a1
2 parents 2e5906c + f4bffa1
commit 65222a1
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 33 deletions.
diff --git a/src/pages/reader/Header/Middle.tsx b/src/pages/reader/Header/Middle.tsx
@@ -40,8 +40,8 @@ export const HeaderMiddle: FC<{
     />
     <PenButton />
     <EraserButton />
+    <AddMoreButtons />
     <SelectButton />
-    <AddButton />
   </div>
 );
 
@@ -146,14 +146,19 @@ const SelectButton = () => {
   );
 };
 
-const AddButton: FC = () => {
+const AddMoreButtons: FC = () => {
   const drawCtrl = useDrawCtrl();
   const updateDrawCtrl = useUpdateDrawCtrl();
   const { mode, imageSrc } = drawCtrl;
 
-  const getButton = (modeName: DrawCtrl["mode"], icon: ReactNode) => (
+  const getButton = (
+    modeName: DrawCtrl["mode"],
+    icon: ReactNode,
+    className?: string
+  ) => (
     <Button
       key={modeName}
+      className={className}
       type={mode === modeName ? "link" : "text"}
       onClick={() => updateDrawCtrl({ mode: modeName })}
       icon={icon}
@@ -205,13 +210,27 @@ const AddButton: FC = () => {
     </div>
   );
   return (
-    <Popover
-      content={content}
-      trigger="click"
-      placement="bottomRight"
-      getPopupContainer={(e) => e.parentElement!}
-    >
-      {buttons[mode] ?? <Button type="text" icon={<PlusCircleOutlined />} />}
-    </Popover>
+    <>
+      {Object.entries(buttons).map(([key, btn]) => (
+        <Popover
+          className="btn-for-desktop"
+          content={optionPanels[key]}
+          trigger="click"
+          placement="bottomRight"
+          getPopupContainer={(e) => e.parentElement!}
+        >
+          {btn}
+        </Popover>
+      ))}
+      <Popover
+        className="btn-for-phone"
+        content={content}
+        trigger="click"
+        placement="bottomRight"
+        getPopupContainer={(e) => e.parentElement!}
+      >
+        {buttons[mode] ?? <Button type="text" icon={<PlusCircleOutlined />} />}
+      </Popover>
+    </>
   );
 };
diff --git a/src/pages/reader/Header/header.sass b/src/pages/reader/Header/header.sass
@@ -37,7 +37,7 @@
     > .right
       grid-template-columns: repeat(3, 1fr)
     > .middle
-      grid-template-columns: repeat(7, 1fr)
+      grid-template-columns: repeat(9, 1fr)
       .redo-btn
         grid-column: span 2
   > .middle
@@ -56,25 +56,25 @@
         border-top: $default-border
         margin-top: 10px
         padding-top: 10px
-        .text-option
-          width: 200px
-          color: #555
-        .picture-option
-          width: 200px
-          display: flex
-          flex-direction: column
-          align-items: center
-        &[data-mode=rect]
-          .width-seg
-            margin-left: auto
-            margin-right: auto
-          .hi-wrapper
-            display: none
-        img
-          margin-top: 10px
-          max-width: 200px
-          &[data-show=false]
-            display: none
+    .text-option
+      width: 200px
+      color: #555
+    .picture-option
+      width: 200px
+      display: flex
+      flex-direction: column
+      align-items: center
+      img
+        margin-top: 10px
+        max-width: 200px
+        &[data-show=false]
+          display: none
+    >.btn-for-phone
+      @include for-desktop
+        display: none
+    >.btn-for-desktop
+      @include for-phone
+        display: none
   > .right .reader-option-btn
     @include for-phone
       display: none

diff --git a/src/pages/reader/tools/PenPanel.tsx b/src/pages/reader/tools/PenPanel.tsx
@@ -13,11 +13,16 @@ export const PenPanel: FC<{
   updateDrawCtrl: (updated: Partial<DrawCtrl>) => void;
   drawCtrl: Partial<DrawCtrl>;
 }> = ({ updateDrawCtrl, drawCtrl }) => {
-  const { highlight, color } = drawCtrl;
+  const { highlight, color, mode } = drawCtrl;
   const [panelBlur, setPanelBlur] = useState(false);
 
   return (
-    <div className="pen-panel" data-blur={panelBlur} data-hi={highlight}>
+    <div
+      className="pen-panel"
+      data-blur={panelBlur}
+      data-hi={highlight}
+      data-mode={mode}
+    >
       <div className="pen-status">
         <WidthSelect
           updateDrawCtrl={updateDrawCtrl}

diff --git a/src/pages/reader/tools/pen-panel.sass b/src/pages/reader/tools/pen-panel.sass
@@ -24,6 +24,12 @@
     justify-content: space-between
     .width-seg
       margin-right: 20px
+  &[data-mode=rect]
+    .width-seg
+      margin-left: auto
+      margin-right: auto
+    .hi-wrapper
+      display: none
 
 .hi-wrapper
   display: block