Add text hint for CopyButton

nk2028 · Dec 14, 2024 · 375a3d4 · 375a3d4
1 parent 58639eb
commit 375a3d4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/src/Components/Main.tsx b/src/Components/Main.tsx
@@ -116,10 +116,19 @@ const CopyButton = styled.button`
   transition: color 0.2s;
   color: #888;
   cursor: pointer;
+  font-size: 0.8em;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
   &:hover,
   &:focus {
     color: #0078e7;
   }
+  & > div {
+    font-size: 0.75em;
+    border-bottom: none;
+  }
 `;
 const CloseButton = styled.button`
   position: absolute;
@@ -181,19 +190,19 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
 
   const [loading, setLoading] = useState(false);
 
-  const [copyTooltipText, setCopyTooltipText] = useState("複製到剪貼簿");
+  const [copyTooltipText, setCopyTooltipText] = useState("全部複製");
   const copyEvaluationResult = useCallback(async () => {
     const content = ref.current.textContent?.trim();
     if (content) {
       try {
         await navigator.clipboard.writeText(content);
-        setCopyTooltipText("成功複製到剪貼簿");
+        setCopyTooltipText("已複製");
       } catch {
-        setCopyTooltipText("無法複製到剪貼簿");
+        setCopyTooltipText("複製失敗");
       }
     }
   }, []);
-  const onHideTooltip = useCallback(() => setCopyTooltipText("複製到剪貼簿"), []);
+  const onHideTooltip = useCallback(() => setCopyTooltipText("全部複製"), []);
 
   // XXX Please Rewrite
   useEffect(() => {
@@ -305,6 +314,7 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
                   <TooltipLabel description={copyTooltipText} onHideTooltip={onHideTooltip}>
                     <CopyButton onClick={copyEvaluationResult}>
                       <FontAwesomeIcon icon={faCopy} size="sm" />
+                      <div>全部複製</div>
                     </CopyButton>
                   </TooltipLabel>
                   <form method="dialog">

diff --git a/src/Components/Tooltip.tsx b/src/Components/Tooltip.tsx
@@ -62,6 +62,8 @@ function TooltipAnchor({
   outputContainerScrollLeft?: number;
 }) {
   useEffect(() => {
+    div.className = tooltipStyle + (fixedWidth ? " " + fixedWidthStyle : "");
+
     const oneRemSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
     const margin = oneRemSize / 6;
 
@@ -75,7 +77,6 @@ function TooltipAnchor({
     targetLeft = Math.min(outputContainerWidth - oneRemSize - divInnerBox.width, Math.max(oneRemSize, targetLeft));
     targetLeft += outputContainerScrollLeft;
 
-    div.className = tooltipStyle + (fixedWidth ? " " + fixedWidthStyle : "");
     div.style.top = targetTop + "px";
     div.style.left = targetLeft + "px";
     div.style.visibility = "visible";