Merge pull request #15 from slotDumpling/tooltip

feat: add tooltips
slotDumpling · Aug 25, 2024 · 81beac4 · 81beac4
2 parents 97cc651 + 7eaa7f0
commit 81beac4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 36 deletions.
diff --git a/src/pages/reader/Header/Middle.tsx b/src/pages/reader/Header/Middle.tsx
@@ -1,5 +1,5 @@
-import { FC, ReactNode, useState } from "react";
-import { Button, ButtonProps, Input, Popover, Segmented } from "antd";
+import React, { FC, ReactNode, useState } from "react";
+import { Button, ButtonProps, Input, Popover, Segmented, Tooltip } from "antd";
 import {
   UndoOutlined,
   RedoOutlined,
@@ -17,6 +17,11 @@ import { DrawCtrl } from "draft-pad/dist/lib";
 import { useDrawCtrl, useUpdateDrawCtrl } from "lib/draw/DrawCtrl";
 
 const btnProps: ButtonProps = { type: "text" };
+const addTip = (icon: React.ReactNode, title = ""): React.ReactNode => (
+  <Tooltip placement="bottom" title={title}>
+    {icon}
+  </Tooltip>
+);
 
 export const HeaderMiddle: FC<{
   handleUndo: () => void;
@@ -27,14 +32,14 @@ export const HeaderMiddle: FC<{
   <div className="middle">
     <Button
       {...btnProps}
-      icon={<UndoOutlined />}
+      icon={addTip(<UndoOutlined />, "Undo")}
       onClick={handleUndo}
       disabled={!undoable}
     />
     <Button
       className="redo-btn"
       {...btnProps}
-      icon={<RedoOutlined />}
+      icon={addTip(<RedoOutlined />, "Redo")}
       onClick={handleRedo}
       disabled={!redoable}
     />
@@ -60,15 +65,18 @@ const PenButton = () => {
     >
       <Button
         type="link"
-        icon={<HighlightTwoTone twoToneColor={color} className="pen-icon" />}
+        icon={addTip(
+          <HighlightTwoTone twoToneColor={color} className="pen-icon" />,
+          "Draw"
+        )}
         data-active={mode === "draw"}
       />
     </Popover>
   ) : (
     <Button
       {...btnProps}
       onClick={() => updateDrawCtrl({ mode: "draw" })}
-      icon={<HighlightOutlined />}
+      icon={addTip(<HighlightOutlined />, "Draw")}
     />
   );
 };
@@ -111,15 +119,15 @@ const EraserButton = () => {
     >
       <Button
         type="link"
-        icon={<IconFont type="icon-eraser" />}
+        icon={addTip(<IconFont type="icon-eraser" />, "Eraser")}
         data-active={mode === "erase"}
       />
     </Popover>
   ) : (
     <Button
       {...btnProps}
       onClick={() => updateDrawCtrl({ mode: "erase" })}
-      icon={<IconFont type="icon-eraser" />}
+      icon={addTip(<IconFont type="icon-eraser" />, "Eraser")}
     />
   );
 };
@@ -128,7 +136,10 @@ const SelectButton = () => {
   const { lasso, mode } = useDrawCtrl();
   const updateDrawCtrl = useUpdateDrawCtrl();
 
-  const icon = lasso ? <IconFont type="icon-lasso1" /> : <GatewayOutlined />;
+  const icon = addTip(
+    lasso ? <IconFont type="icon-lasso1" /> : <GatewayOutlined />,
+    "Lasso"
+  );
 
   return mode === "select" ? (
     <Button
@@ -167,9 +178,9 @@ const AddMoreButtons: FC = () => {
   );
 
   const buttons: Record<string, ReactNode> = {
-    text: getButton("text", <IconFont type="icon-text1" />),
-    picture: getButton("picture", <PictureOutlined />),
-    rect: getButton("rect", <BorderOutlined />),
+    text: getButton("text", addTip(<IconFont type="icon-text1" />, "Add text")),
+    picture: getButton("picture", addTip(<PictureOutlined />, "Add image")),
+    rect: getButton("rect", addTip(<BorderOutlined />, "Add rectangle")),
   };
 
   const [showImage, setShowImage] = useState(false);
@@ -230,7 +241,12 @@ const AddMoreButtons: FC = () => {
         placement="bottomRight"
         getPopupContainer={(e) => e.parentElement!}
       >
-        {buttons[mode] ?? <Button type="text" icon={<PlusCircleOutlined />} />}
+        {buttons[mode] ?? (
+          <Button
+            type="text"
+            icon={addTip(<PlusCircleOutlined />, "Add more")}
+          />
+        )}
       </Popover>
     </>
   );

diff --git a/src/pages/reader/tools/DrawTools.tsx b/src/pages/reader/tools/DrawTools.tsx
@@ -1,5 +1,12 @@
 /// <reference types="paper" />
-import { CSSProperties, FC, RefObject, useMemo, useState } from "react";
+import {
+  CSSProperties,
+  FC,
+  RefObject,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import {
   CopyOutlined,
   BoldOutlined,
@@ -39,6 +46,7 @@ export const SelectTool: FC<{
   clickPoint?: paper.Point;
 }> = ({ drawRef, visible, clickPoint }) => {
   const [currDrawCtrl, setCurrDrawCtrl] = useState<Partial<DrawCtrl>>({});
+  useEffect(() => setCurrDrawCtrl({}), [visible]);
   if (!clickPoint) return null;
   const { x, y } = clickPoint;
   return (
@@ -47,24 +55,26 @@ export const SelectTool: FC<{
       data-visible={visible}
       style={getPosVars(x, y)}
     >
-      <Popover
-        trigger="click"
-        placement="bottom"
-        overlayClassName="style-pop"
-        getPopupContainer={(e) => e.parentElement!}
-        destroyTooltipOnHide
-        content={
-          <PenPanel
-            updateDrawCtrl={(updated) => {
-              setCurrDrawCtrl((prev) => ({ ...prev, ...updated }));
-              drawRef.current?.mutateStyle(updated);
-            }}
-            drawCtrl={currDrawCtrl}
-          />
-        }
-      >
-        <Button icon={<BgColorsOutlined />} {...btnProps} />
-      </Popover>
+      {visible && (
+        <Popover
+          trigger="click"
+          placement="bottom"
+          overlayClassName="style-pop"
+          getPopupContainer={(e) => e.parentElement!}
+          destroyTooltipOnHide
+          content={
+            <PenPanel
+              updateDrawCtrl={(updated) => {
+                setCurrDrawCtrl((prev) => ({ ...prev, ...updated }));
+                drawRef.current?.mutateStyle(updated);
+              }}
+              drawCtrl={currDrawCtrl}
+            />
+          }
+        >
+          <Button icon={<BgColorsOutlined />} {...btnProps} />
+        </Popover>
+      )}
       <Button
         icon={<CopyOutlined />}
         onClick={() => drawRef.current?.duplicateSelected()}

diff --git a/src/pages/reader/tools/PenPanel.tsx b/src/pages/reader/tools/PenPanel.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useEffect, useMemo, useState } from "react";
 import { defaultWidthList, DrawCtrl } from "draft-pad/dist/lib";
 import { ColorCirle } from "component/ColorCircle";
-import { Popover, Segmented, Slider } from "antd";
+import { Popover, Segmented, Slider, Tooltip } from "antd";
 import { allColors } from "lib/color";
 import { Setter, useEvent } from "lib/hooks";
 import IconFont from "component/IconFont";
@@ -142,9 +142,11 @@ const HighlightSwitch: FC<{
         checked={checked}
         onChange={(e) => updateDrawCtrl({ highlight: e.target.checked })}
       />
-      <div className="hi-switch">
-        <IconFont type="icon-Highlight" />
-      </div>
+      <Tooltip title="Highlighter" placement="bottom">
+        <div className="hi-switch">
+          <IconFont type="icon-Highlight" />
+        </div>
+      </Tooltip>
     </label>
   );
 };