From 22834a82431168ad2773a062187cc830c54ec18a Mon Sep 17 00:00:00 2001
From: Sanster <cwq1913@gmail.com>
Date: Sat, 21 May 2022 13:04:09 +0800
Subject: [PATCH] button tooltip from b90e32886a019e0e55af8d8d6f289312527d2fed

---
 .../app/src/components/Editor/Editor.tsx      | 10 +++++++
 .../src/components/Settings/SettingIcon.tsx   |  2 ++
 .../src/components/Shortcuts/Shortcuts.tsx    |  2 ++
 .../app/src/components/shared/Button.scss     |  3 +-
 .../app/src/components/shared/Button.tsx      |  7 +++++
 .../app/src/components/shared/Tooltip.scss    | 28 +++++++++++++++++++
 lama_cleaner/app/src/styles/_Colors.scss      |  2 ++
 lama_cleaner/app/src/styles/_ColorsDark.scss  |  2 ++
 lama_cleaner/app/src/styles/_index.scss       |  1 +
 9 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 lama_cleaner/app/src/components/shared/Tooltip.scss

diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index 0d98920..1d29d7b 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -731,11 +731,15 @@ export default function Editor(props: EditorProps) {
         />
         <div className="editor-toolkit-btns">
           <Button
+            toolTip="Show Full"
+            tooltipPosition="top"
             icon={<ArrowsExpandIcon />}
             disabled={scale === minScale && panned === false}
             onClick={resetZoom}
           />
           <Button
+            toolTip="Undo"
+            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -754,6 +758,8 @@ export default function Editor(props: EditorProps) {
             disabled={disableUndo()}
           />
           <Button
+            toolTip="Show Original"
+            tooltipPosition="top"
             icon={<EyeIcon />}
             className={showOriginal ? 'eyeicon-active' : ''}
             onDown={ev => {
@@ -774,6 +780,8 @@ export default function Editor(props: EditorProps) {
             disabled={renders.length === 0}
           />
           <Button
+            toolTip="Save Image"
+            tooltipPosition="top"
             icon={<DownloadIcon />}
             disabled={!renders.length}
             onClick={download}
@@ -781,6 +789,8 @@ export default function Editor(props: EditorProps) {
 
           {settings.runInpaintingManually && (
             <Button
+              toolTip="Run Inpainting"
+              tooltipPosition="top"
               icon={
                 <svg
                   width="24"
diff --git a/lama_cleaner/app/src/components/Settings/SettingIcon.tsx b/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
index ca11c55..55c6764 100644
--- a/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
+++ b/lama_cleaner/app/src/components/Settings/SettingIcon.tsx
@@ -14,6 +14,8 @@ const SettingIcon = () => {
     <div>
       <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 65f785b..6dda87b 100644
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx
@@ -22,6 +22,8 @@ const Shortcuts = () => {
     <div className="shortcuts">
       <Button
         onClick={shortcutStateHandler}
+        toolTip="Hotkeys"
+        tooltipPosition="bottom"
         disabled={shortcutVisibility}
         style={{ border: 0 }}
         icon={
diff --git a/lama_cleaner/app/src/components/shared/Button.scss b/lama_cleaner/app/src/components/shared/Button.scss
index 70b3bdb..4a0c3d8 100644
--- a/lama_cleaner/app/src/components/shared/Button.scss
+++ b/lama_cleaner/app/src/components/shared/Button.scss
@@ -1,8 +1,9 @@
+@use '../../styles/Mixins/' as *;
+
 .btn-primary {
   display: grid;
   grid-auto-flow: column;
   column-gap: 1rem;
-  // border: 1px solid var(--btn-border-color);
   color: var(--btn-text-color);
   font-family: 'WorkSans', sans-serif;
   width: max-content;
diff --git a/lama_cleaner/app/src/components/shared/Button.tsx b/lama_cleaner/app/src/components/shared/Button.tsx
index d897062..ea35962 100644
--- a/lama_cleaner/app/src/components/shared/Button.tsx
+++ b/lama_cleaner/app/src/components/shared/Button.tsx
@@ -5,6 +5,8 @@ interface ButtonProps {
   children?: ReactNode
   className?: string
   icon?: ReactNode
+  toolTip?: string
+  tooltipPosition?: string
   onKeyDown?: () => void
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
@@ -18,6 +20,8 @@ const Button: React.FC<ButtonProps> = props => {
     className,
     disabled,
     icon,
+    toolTip,
+    tooltipPosition,
     onKeyDown,
     onClick,
     onDown,
@@ -33,6 +37,7 @@ const Button: React.FC<ButtonProps> = props => {
   return (
     <div
       role="button"
+      data-tooltip={toolTip}
       style={style}
       onKeyDown={onKeyDown}
       onClick={blurOnClick}
@@ -47,6 +52,8 @@ const Button: React.FC<ButtonProps> = props => {
         'btn-primary',
         children ? 'btn-primary-content' : '',
         disabled === true ? 'btn-primary-disabled' : '',
+        toolTip ? 'info-tooltip' : '',
+        tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
         className,
       ].join(' ')}
     >
diff --git a/lama_cleaner/app/src/components/shared/Tooltip.scss b/lama_cleaner/app/src/components/shared/Tooltip.scss
new file mode 100644
index 0000000..6c9e15e
--- /dev/null
+++ b/lama_cleaner/app/src/components/shared/Tooltip.scss
@@ -0,0 +1,28 @@
+$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;
+    }
+}
+
+.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;
+    }
+}
\ No newline at end of file
diff --git a/lama_cleaner/app/src/styles/_Colors.scss b/lama_cleaner/app/src/styles/_Colors.scss
index 679f2c9..6abfed1 100644
--- a/lama_cleaner/app/src/styles/_Colors.scss
+++ b/lama_cleaner/app/src/styles/_Colors.scss
@@ -9,6 +9,8 @@
   --link-color: rgb(0, 0, 0);
   --border-color: rgb(100, 100, 120);
   --border-color-light: rgba(100, 100, 120, 0.5);
+  --tooltip-bg: rgb(230, 230, 234);
+  --tooltip-text-color: rgb(0, 0,0);
 
   --error-color: rgb(239, 68, 68);
   --success-color: rgb(16, 185, 129);
diff --git a/lama_cleaner/app/src/styles/_ColorsDark.scss b/lama_cleaner/app/src/styles/_ColorsDark.scss
index e0b454e..3fa2dcb 100644
--- a/lama_cleaner/app/src/styles/_ColorsDark.scss
+++ b/lama_cleaner/app/src/styles/_ColorsDark.scss
@@ -9,6 +9,8 @@
   --link-color: var(--yellow-accent);
   --border-color: rgb(100, 100, 120);
   --border-color-light: rgba(102, 102, 102);
+  --tooltip-bg: rgb(33, 33, 33);
+  --tooltip-text-color: rgb(210, 210, 210);
 
   // Editor
   --editor-toolkit-bg: rgba(0, 0, 0, 0.5);
diff --git a/lama_cleaner/app/src/styles/_index.scss b/lama_cleaner/app/src/styles/_index.scss
index e277d5f..65d0fbd 100644
--- a/lama_cleaner/app/src/styles/_index.scss
+++ b/lama_cleaner/app/src/styles/_index.scss
@@ -21,6 +21,7 @@
 @use '../components/shared/Switch';
 @use '../components/shared/NumberInput';
 @use '../components/shared/Toast';
+@use '../components/shared/Tooltip';
 
 // Main CSS
 *,