feat: add tooltip into zoom control

weni-ai · Oct 5, 2023 · 5a3e0b4 · 5a3e0b4
1 parent c51638a
commit 5a3e0b4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/src/components/canvas/Canvas.module.scss b/src/components/canvas/Canvas.module.scss
@@ -115,4 +115,10 @@ $background_offset: ($grid_size / 2) + ($node_padding) + px;
       font-size: 18px;
     }
   }
+}
+
+.zoom_tooltip {
+  position: fixed !important;
+  bottom: 85px !important;
+  left: 110px !important;
 }
diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
@@ -10,14 +10,16 @@ import i18n from 'config/i18n';
 import { CanvasPositions, DragSelection, MouseState } from 'store/editor';
 import { addPosition } from 'store/helpers';
 import { MergeEditorState } from 'store/thunks';
-import { COLLISION_FUDGE, throttle } from 'utils';
+import { COLLISION_FUDGE, getOS, throttle } from 'utils';
 
 import styles from './Canvas.module.scss';
 import nodesCopy from '../../components/copyAndPasteNodes';
 import { RenderNode } from '../../store/flowContext';
 
+import { applyVueInReact } from 'vuereact-combined';
 // @ts-ignore
-import { unnnicCallAlert } from '@weni/unnnic-system';
+import { unnnicCallAlert, unnnicToolTip } from '@weni/unnnic-system';
+const UnnnicTooltip = applyVueInReact(unnnicToolTip);
 
 export const CANVAS_PADDING = 300;
 export const REFLOW_QUIET = 200;
@@ -1017,18 +1019,26 @@ export class Canvas extends React.PureComponent<CanvasProps, CanvasState> {
             </div>
 
             {this.panzoomInstance && (
-              <div className={styles.zoom_control}>
-                <div className={styles.out} onClick={() => this.handleZoomClick(0)}>
-                  <span className="material-symbols-outlined">remove</span>
+              <UnnnicTooltip
+                className={styles.zoom_tooltip}
+                text="Zoom"
+                enabled={true}
+                side="top"
+                shortcutText={(getOS() === 'Macintosh' ? 'Cmd' : 'Ctrl') + ' + Scroll'}
+              >
+                <div className={styles.zoom_control}>
+                  <div className={styles.out} onClick={() => this.handleZoomClick(0)}>
+                    <span className="material-symbols-outlined">remove</span>
+                  </div>
+                  <div className={styles.percentage}>
+                    {this.state.currentZoom}
+                    <span className="material-symbols-outlined">percent</span>
+                  </div>
+                  <div className={styles.in} onClick={() => this.handleZoomClick(1)}>
+                    <span className="material-symbols-outlined">add</span>
+                  </div>
                 </div>
-                <div className={styles.percentage}>
-                  {this.state.currentZoom}
-                  <span className="material-symbols-outlined">percent</span>
-                </div>
-                <div className={styles.in} onClick={() => this.handleZoomClick(1)}>
-                  <span className="material-symbols-outlined">add</span>
-                </div>
-              </div>
+              </UnnnicTooltip>
             )}
           </div>
         </div>

diff --git a/src/utils/index.tsx b/src/utils/index.tsx
@@ -325,7 +325,7 @@ export const unset = (val: any): Query<any> => ({ $unset: val });
 export const push = (arr: any[]): Query<any[]> => ({ $push: arr });
 
 // tslint:disable-next-line:array-type
-export const splice = (arr: Array<Array<any>>): Query<Array<Array<any>>> => ({
+export const splice = (arr: any[][]): Query<any[][]> => ({
   $splice: arr
 });
 
@@ -426,7 +426,7 @@ export const copyToClipboard = (text: string) => {
 };
 
 export const throttle = (func: any, timeout: any) => {
-  let ready: boolean = true;
+  let ready = true;
 
   return (...args: any) => {
     if (!ready) {
@@ -484,3 +484,13 @@ export const desnake = (text: string): string => {
 export const bool = (prop: boolean) => {
   return prop ? 'true' : null;
 };
+
+export const getOS = () => {
+  var OSName = 'Unknown OS';
+  if (navigator.userAgent.indexOf('Win') !== -1) OSName = 'Windows';
+  if (navigator.userAgent.indexOf('Mac') !== -1) OSName = 'Macintosh';
+  if (navigator.userAgent.indexOf('Linux') !== -1) OSName = 'Linux';
+  if (navigator.userAgent.indexOf('Android') !== -1) OSName = 'Android';
+
+  return OSName;
+};