Merge pull request #3008 from ethereum/custom-tooltips-fe

add custom tooltips for file explorer icons

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react' //eslint-disable-line
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { Placement } from 'react-bootstrap/esm/Overlay'
 import { FileExplorerMenuProps } from '../types'
 const _paq = window._paq = window._paq || []
 
@@ -8,27 +10,32 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
       {
         action: 'createNewFile',
         title: 'Create New File',
-        icon: 'far fa-file'
+        icon: 'far fa-file',
+        placement: 'top-start'
       },
       {
         action: 'createNewFolder',
         title: 'Create New Folder',
-        icon: 'far fa-folder'
+        icon: 'far fa-folder',
+        placement: 'top-end'
       },
       {
         action: 'publishToGist',
         title: 'Publish all the current workspace files (only root) to a github gist',
-        icon: 'fab fa-github'
+        icon: 'fab fa-github',
+        placement: 'top-start'
       },
       {
         action: 'uploadFile',
         title: 'Load a local file into current workspace',
-        icon: 'fa fa-upload'
+        icon: 'fa fa-upload',
+        placement: 'right'
       },
       {
         action: 'updateGist',
         title: 'Update the current [gist] explorer',
-        icon: 'fab fa-github'
+        icon: 'fab fa-github',
+        placement: 'right-start'
       }
     ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
     actions: {}
@@ -46,49 +53,74 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
 
   return (
     <>
-      <span className='remixui_label' title={props.title} data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
+      <OverlayTrigger
+        placement="top-start"
+        overlay={
+          <Tooltip id="remixuilabelTooltip" className="text-nowrap">
+            <span>{props.title}</span>
+          </Tooltip>
+        }
+      >
+        <span className='remixui_label' data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
+      </OverlayTrigger>
       <span className="pl-2">{
-        state.menuItems.map(({ action, title, icon }, index) => {
+        state.menuItems.map(({ action, title, icon, placement }, index) => {
           if (action === 'uploadFile') {
             return (
-              <label
+              <OverlayTrigger
-                id={action}
+                placement="right"
-                data-id={'fileExplorerUploadFile' + action }
+                overlay={
-                className={icon + ' mb-0 remixui_newFile'}
+                  <Tooltip id="uploadFileTooltip" className="text-nowrap">
-                title={title}
+                    <span>{title}</span>
-                key={index}
+                  </Tooltip>
+                }
               >
-                <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
+                <label
-                  e.stopPropagation()
+                  id={action}
-                  props.uploadFile(e.target)
+                  data-id={'fileExplorerUploadFile' + action }
-                  e.target.value = null
+                  className={icon + ' mb-0 remixui_newFile'}
-                }}
+                  key={index}
-                multiple />
+                >
-              </label>
+                    <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
+                      e.stopPropagation()
+                      props.uploadFile(e.target)
+                      e.target.value = null
+                    }}
+                    multiple />
+                </label>
+              </OverlayTrigger>
             )
           } else {
             return (
-              <span
+              <OverlayTrigger
-                id={action}
+                placement={placement as Placement}
-                data-id={'fileExplorerNewFile' + action}
+                overlay={
-                onClick={(e) => {
+                  <Tooltip id={`${action}-${title}-${icon}-${index}`} className="text-nowrap">
-                  e.stopPropagation()
+                    <span>{title}</span>
-                  _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                  </Tooltip>
-                  if (action === 'createNewFile') {
+                }
-                    props.createNewFile()
-                  } else if (action === 'createNewFolder') {
-                    props.createNewFolder()
-                  } else if (action === 'publishToGist') {
-                    props.publishToGist()
-                  } else {
-                    state.actions[action]()
-                  }
-                }}
-                className={'newFile ' + icon + ' remixui_newFile'}
-                title={title}
-                key={index}
               >
-              </span>
+                <span
+                  id={action}
+                  data-id={'fileExplorerNewFile' + action}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                    if (action === 'createNewFile') {
+                      props.createNewFile()
+                    } else if (action === 'createNewFolder') {
+                      props.createNewFolder()
+                    } else if (action === 'publishToGist') {
+                      props.publishToGist()
+                    } else {
+                      state.actions[action]()
+                    }
+                  }}
+                  className={'newFile ' + icon + ' remixui_newFile'}
+                  key={`${action}-${title}-${index}`}
+                >
+                </span>
+              </OverlayTrigger>
             )
           }
         })}

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -103,7 +103,7 @@ export interface FileExplorerProps {
     dispatchMoveFile: (src: string, dest: string) => Promise<void>,
     dispatchMoveFolder: (src: string, dest: string) => Promise<void>
 }
-
+type Placement = import('react-overlays/usePopper').Placement
 export interface FileExplorerMenuProps {
     title: string,
     menuItems: string[],
@@ -111,6 +111,7 @@ export interface FileExplorerMenuProps {
     createNewFolder: (parentFolder?: string) => void,
     publishToGist: (path?: string) => void,
     uploadFile: (target: EventTarget & HTMLInputElement) => void
+    tooltipPlacement?: Placement
 }
 export interface FileExplorerContextMenuProps {
     actions: action[],