Feat: added tooltips to dock icons

mezh-hq · Aug 18, 2024 · 88a16f5 · 88a16f5
1 parent 79957cb
commit 88a16f5
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 21 deletions.
diff --git a/src/components/controls/index.tsx b/src/components/controls/index.tsx
@@ -75,7 +75,7 @@ const Controls = ({ options, styles }: IControlProps) => {
       <AnimatedSwitcher
         key={ControlComponent.name}
         component={<ControlComponent options={options} styles={styles} />}
-        className="py-4 px-5"
+        className="py-4 px-5 h-[calc(100%-3.5rem)]"
       />
     </div>
   );

diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
@@ -105,7 +105,13 @@ const ToolBar: React.FC<ISTKProps> = (props) => {
                 }
               >
                 <Tooltip>
-                  <TooltipTrigger className="rounded-md w-8 h-8 flex justify-center items-center">
+                  <TooltipTrigger
+                    className={twMerge(
+                      "rounded-md w-8 h-8 flex justify-center items-center",
+                      props?.styles?.core?.tooltip?.trigger?.className
+                    )}
+                    style={props?.styles?.core?.tooltip?.trigger?.properties}
+                  >
                     <Icon
                       size={18}
                       className={twMerge(
@@ -119,8 +125,12 @@ const ToolBar: React.FC<ISTKProps> = (props) => {
                     align="start"
                     alignOffset={25}
                     sideOffset={-30}
-                    className={twMerge("flex gap-3 ml-8", styles?.tool?.label?.className)}
-                    style={styles?.tool?.label?.properties}
+                    className={twMerge(
+                      "flex gap-3 ml-8",
+                      props?.styles?.core?.tooltip?.content?.className,
+                      styles?.tool?.label?.className
+                    )}
+                    style={{ ...props?.styles?.core?.tooltip?.content?.properties, ...styles?.tool?.label?.properties }}
                   >
                     {key}
                   </TooltipContent>

diff --git a/src/components/workspace/dock/visibility.tsx b/src/components/workspace/dock/visibility.tsx
@@ -6,7 +6,7 @@ import { store } from "@/store";
 import { setInitialViewBoxScale, setVisibilityOffset } from "@/store/reducers/editor";
 import type { ISTKProps } from "@/types";
 import { d3Extended } from "@/utils";
-import { Button } from "../../core";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../../core";
 import { showAllElements } from "../elements";
 
 const freeze = () =>
@@ -32,14 +32,28 @@ export const VisibilityFreezeScale = (props: Pick<ISTKProps, "mode" | "styles" |
   const styles = props.styles?.visibilityControls;
 
   return (
-    <Button
-      variant="secondary"
-      className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
-      onClick={initialViewBoxScale ? unfreeze : freeze}
-      style={styles?.buttons?.properties}
-    >
-      {initialViewBoxScale ? <Lock size={16} /> : <Unlock size={16} />}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger
+        className={props.styles?.core?.tooltip?.trigger?.className}
+        style={props.styles?.core?.tooltip?.trigger?.properties}
+      >
+        <Button
+          variant={initialViewBoxScale ? "primary" : "secondary"}
+          className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
+          onClick={initialViewBoxScale ? unfreeze : freeze}
+          style={styles?.buttons?.properties}
+        >
+          {initialViewBoxScale ? <Lock size={16} /> : <Unlock size={16} />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent
+        sideOffset={15}
+        className={props.styles?.core?.tooltip?.content?.className}
+        style={props.styles?.core?.tooltip?.content?.properties}
+      >
+        {initialViewBoxScale ? "Unlock initial scale" : "Lock initial scale"}
+      </TooltipContent>
+    </Tooltip>
   );
 };
 
@@ -49,13 +63,27 @@ export const VisibilityOffset = (props: Pick<ISTKProps, "mode" | "styles" | "opt
   const styles = props.styles?.visibilityControls;
 
   return (
-    <Button
-      variant="secondary"
-      className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
-      onClick={visibilityOffset === 0 ? setVisibility : unsetVisibility}
-      style={styles?.buttons?.properties}
-    >
-      {visibilityOffset === 0 ? <Scan size={16} /> : <Focus size={16} />}
-    </Button>
+    <Tooltip>
+      <TooltipTrigger
+        className={props.styles?.core?.tooltip?.trigger?.className}
+        style={props.styles?.core?.tooltip?.trigger?.properties}
+      >
+        <Button
+          variant={visibilityOffset === 0 ? "secondary" : "primary"}
+          className={twMerge("w-8 h-8 p-2", styles?.buttons?.className)}
+          onClick={visibilityOffset === 0 ? setVisibility : unsetVisibility}
+          style={styles?.buttons?.properties}
+        >
+          {visibilityOffset === 0 ? <Scan size={16} /> : <Focus size={16} />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent
+        sideOffset={15}
+        className={props.styles?.core?.tooltip?.content?.className}
+        style={props.styles?.core?.tooltip?.content?.properties}
+      >
+        {visibilityOffset === 0 ? "Set visibility offset" : "Unset visibility offset"}
+      </TooltipContent>
+    </Tooltip>
   );
 };
diff --git a/src/types/styles.ts b/src/types/styles.ts
@@ -84,6 +84,10 @@ export interface IStyles {
   core?: {
     container?: IStyle;
     button?: IStyle;
+    tooltip?: {
+      trigger?: IStyle;
+      content?: IStyle;
+    };
   };
   dock?: {
     container?: IStyle;