From a97f48220d1b819f11fb192cd5a182016f405f48 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Sat, 7 Jan 2023 09:25:34 +0800
Subject: [PATCH] use radix-ui tooltip

---
 .../src/components/CoffeeIcon/CoffeeIcon.tsx  |  1 -
 .../app/src/components/Editor/Editor.tsx      |  8 ---
 .../components/FileManager/FileManager.tsx    |  2 -
 .../app/src/components/Header/Header.tsx      |  3 --
 .../src/components/Settings/SettingIcon.tsx   |  1 -
 .../src/components/Shortcuts/Shortcuts.tsx    |  1 -
 .../src/components/SidePanel/PESidePanel.tsx  |  1 -
 .../app/src/components/shared/Button.tsx      | 54 +++++++++----------
 .../app/src/components/shared/Tooltip.scss    | 37 -------------
 9 files changed, 26 insertions(+), 82 deletions(-)

diff --git a/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx b/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx
index bb7d830..b9a9279 100644
--- a/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx
+++ b/lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx
@@ -14,7 +14,6 @@ const CoffeeIcon = () => {
       <Button
         onClick={onClick}
         toolTip="Buy me a coffee"
-        tooltipPosition="bottom"
         style={{ border: 0 }}
         icon={<Coffee />}
       />
diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index 27a411d..e769ff8 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -59,7 +59,6 @@ import Croper from '../Croper/Croper'
 import emitter, {
   EVENT_PROMPT,
   EVENT_CUSTOM_MASK,
-  CustomMaskEventData,
   EVENT_PAINT_BY_EXAMPLE,
 } from '../../event'
 import FileSelect from '../FileSelect/FileSelect'
@@ -1454,7 +1453,6 @@ export default function Editor() {
         <div className="editor-toolkit-btns">
           <Button
             toolTip="Interactive Segmentation"
-            tooltipPosition="top"
             icon={<CursorArrowRaysIcon />}
             disabled={isInteractiveSeg || isInpainting || !isOriginalLoaded}
             onClick={() => {
@@ -1466,14 +1464,12 @@ export default function Editor() {
           />
           <Button
             toolTip="Reset Zoom & Pan"
-            tooltipPosition="top"
             icon={<ArrowsPointingOutIcon />}
             disabled={scale === minScale && panned === false}
             onClick={resetZoom}
           />
           <Button
             toolTip="Undo"
-            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -1493,7 +1489,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Redo"
-            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -1514,7 +1509,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Show Original"
-            tooltipPosition="top"
             icon={<EyeIcon />}
             className={showOriginal ? 'eyeicon-active' : ''}
             onDown={ev => {
@@ -1536,7 +1530,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Save Image"
-            tooltipPosition="top"
             icon={<ArrowDownTrayIcon />}
             disabled={!renders.length}
             onClick={download}
@@ -1545,7 +1538,6 @@ export default function Editor() {
           {settings.runInpaintingManually && !isSD && !isPaintByExample && (
             <Button
               toolTip="Run Inpainting"
-              tooltipPosition="top"
               icon={
                 <svg
                   width="24"
diff --git a/lama_cleaner/app/src/components/FileManager/FileManager.tsx b/lama_cleaner/app/src/components/FileManager/FileManager.tsx
index e88fbc0..46d4ea3 100644
--- a/lama_cleaner/app/src/components/FileManager/FileManager.tsx
+++ b/lama_cleaner/app/src/components/FileManager/FileManager.tsx
@@ -201,7 +201,6 @@ export default function FileManager(props: Props) {
           <Button
             icon={<BarsArrowDownIcon />}
             toolTip="Descending order"
-            tooltipPosition="bottom"
             onClick={() => {
               setSortOrder(SortOrder.DESCENDING)
             }}
@@ -212,7 +211,6 @@ export default function FileManager(props: Props) {
           <Button
             icon={<BarsArrowUpIcon />}
             toolTip="Ascending order"
-            tooltipPosition="bottom"
             onClick={() => {
               setSortOrder(SortOrder.ASCENDING)
             }}
diff --git a/lama_cleaner/app/src/components/Header/Header.tsx b/lama_cleaner/app/src/components/Header/Header.tsx
index dfb2ab6..bfb0235 100644
--- a/lama_cleaner/app/src/components/Header/Header.tsx
+++ b/lama_cleaner/app/src/components/Header/Header.tsx
@@ -63,7 +63,6 @@ const Header = () => {
               icon={<FolderIcon />}
               style={{ border: 0 }}
               toolTip="Open File Manager"
-              tooltipPosition="bottom"
               onClick={() => {
                 setShowFileManager(true)
               }}
@@ -78,7 +77,6 @@ const Header = () => {
               style={{ border: 0, gap: 0 }}
               disabled={isInpainting}
               toolTip="Upload image"
-              tooltipPosition="bottom"
             >
               <input
                 style={{ display: 'none' }}
@@ -109,7 +107,6 @@ const Header = () => {
                 style={{ border: 0 }}
                 disabled={isInpainting}
                 toolTip="Upload custom mask"
-                tooltipPosition="bottom"
               >
                 <input
                   style={{ display: 'none' }}
diff --git a/lama_cleaner/app/src/components/Settings/SettingIcon.tsx b/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
index 55c6764..70b80cf 100644
--- a/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
+++ b/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
@@ -15,7 +15,6 @@ const SettingIcon = () => {
       <Button
         onClick={onClick}
         toolTip="Settings"
-        tooltipPosition="bottom"
         style={{ border: 0 }}
         icon={
           <svg
diff --git a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
index 36bf4d0..55289d1 100644
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
@@ -22,7 +22,6 @@ const Shortcuts = () => {
       <Button
         onClick={shortcutStateHandler}
         toolTip="Hotkeys"
-        tooltipPosition="bottom"
         disabled={shortcutVisibility}
         style={{ border: 0 }}
         icon={
diff --git a/lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx b/lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx
index 766a30c..e2799ba 100644
--- a/lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx
+++ b/lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx
@@ -36,7 +36,6 @@ const PESidePanel = () => {
         <Button
           border
           toolTip="Upload example image"
-          tooltipPosition="top"
           icon={<UploadIcon />}
           style={{ padding: '0.3rem', gap: 0 }}
         >
diff --git a/lama_cleaner/app/src/components/shared/Button.tsx b/lama_cleaner/app/src/components/shared/Button.tsx
index 707c44a..ea36a46 100644
--- a/lama_cleaner/app/src/components/shared/Button.tsx
+++ b/lama_cleaner/app/src/components/shared/Button.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import Tooltip from './Tooltip'
 
 interface ButtonProps {
   border?: boolean
@@ -7,7 +8,6 @@ interface ButtonProps {
   className?: string
   icon?: ReactNode
   toolTip?: string
-  tooltipPosition?: string
   onKeyDown?: () => void
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
@@ -23,7 +23,6 @@ const Button: React.FC<ButtonProps> = props => {
     disabled,
     icon,
     toolTip,
-    tooltipPosition,
     onKeyDown,
     onClick,
     onDown,
@@ -37,32 +36,31 @@ const Button: React.FC<ButtonProps> = props => {
   }
 
   return (
-    <div
-      role="button"
-      data-tooltip={toolTip}
-      style={style}
-      onKeyDown={onKeyDown}
-      onClick={blurOnClick}
-      onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {
-        onDown?.(ev.nativeEvent)
-      }}
-      onPointerUp={(ev: React.PointerEvent<HTMLDivElement>) => {
-        onUp?.(ev.nativeEvent)
-      }}
-      tabIndex={-1}
-      className={[
-        'btn-primary',
-        children ? 'btn-primary-content' : '',
-        disabled === true ? 'btn-primary-disabled' : '',
-        toolTip ? 'info-tooltip' : '',
-        tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
-        className,
-        border ? `btn-border` : '',
-      ].join(' ')}
-    >
-      {icon}
-      {children ? <span>{children}</span> : null}
-    </div>
+    <Tooltip content={toolTip}>
+      <div
+        role="button"
+        style={style}
+        onKeyDown={onKeyDown}
+        onClick={blurOnClick}
+        onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {
+          onDown?.(ev.nativeEvent)
+        }}
+        onPointerUp={(ev: React.PointerEvent<HTMLDivElement>) => {
+          onUp?.(ev.nativeEvent)
+        }}
+        tabIndex={-1}
+        className={[
+          'btn-primary',
+          children ? 'btn-primary-content' : '',
+          disabled === true ? 'btn-primary-disabled' : '',
+          className,
+          border ? `btn-border` : '',
+        ].join(' ')}
+      >
+        {icon}
+        {children ? <span>{children}</span> : null}
+      </div>
+    </Tooltip>
   )
 }
 
diff --git a/lama_cleaner/app/src/components/shared/Tooltip.scss b/lama_cleaner/app/src/components/shared/Tooltip.scss
index f3cc250..77a1468 100644
--- a/lama_cleaner/app/src/components/shared/Tooltip.scss
+++ b/lama_cleaner/app/src/components/shared/Tooltip.scss
@@ -1,40 +1,3 @@
-$tooltip-translate: 100%;
-$tooltip-margin: 1.5rem;
-
-.info-tooltip {
-  &:hover:before {
-    content: attr(data-tooltip);
-    position: absolute;
-    background-color: var(--tooltip-bg);
-    color: var(--tooltip-text-color);
-    padding: 0.5rem;
-    border-radius: 0.3rem;
-    z-index: 2;
-    opacity: 0;
-    animation-name: opacityReveal;
-    animation-duration: 0.2s;
-    animation-fill-mode: forwards;
-    animation-delay: 0.2s;
-    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-  }
-}
-
-.info-tooltip-top {
-  &:hover:before {
-    transform: translateY(calc($tooltip-translate * -1));
-    margin-bottom: $tooltip-margin;
-  }
-}
-
-.info-tooltip-bottom {
-  &:hover:before {
-    transform: translateY($tooltip-translate);
-    margin-top: $tooltip-margin;
-  }
-}
-
-// radix-ui
 .tooltip-trigger {
   all: unset;
   display: flex;