add custom tooltips to debugger-ui and home-tab. modify custom tooltip further

2 years ago · ecb6558218
parent f6ded4ec9c
commit ecb6558218
6 changed files with 91 additions and 77 deletions
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@ -6,7 +6,7 @@ import VmDebuggerHead from './vm-debugger/vm-debugger-head' // eslint-disable-li
 import { TransactionDebugger as Debugger } from '@remix-project/remix-debug' // eslint-disable-line
 import { DebuggerUIProps } from './idebugger-api' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
-import { isValidHash } from '@remix-ui/helper'
+import { CustomTooltip, isValidHash } from '@remix-ui/helper'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
@ -346,19 +346,8 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
    triggerEvent: state.debugger && state.debugger.vmDebuggerLogic ? state.debugger.vmDebuggerLogic.event.trigger.bind(state.debugger.vmDebuggerLogic.event) : null
  }

-  return (
-    <div>
-      <Toaster message={state.toastMessage} />
-      <div className="px-2" ref={debuggerTopRef}>
-        <div>
-          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
-          <OverlayTrigger overlay={
-            <Tooltip id="debuggerGenSourceCheckbox">
-              <span>{"Debug with generated sources"}</span>
-            </Tooltip>
-          } placement="top-start"
-          >
-            <span className="p-0 m-0">
+  const customJSX = (
+    <span className="p-0 m-0">
              <input className="custom-control-input" id="debugGeneratedSourcesInput" onChange={({ target: { checked } }) => {
              setState(prevState => {
                return { ...prevState, opt: { ...prevState.opt, debugWithGeneratedSources: checked } }
@ -366,7 +355,20 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
            }} type="checkbox" />
            <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">Use generated sources (Solidity {'>='} v0.7.2)</label>
            </span>
-          </OverlayTrigger>
+  )
+  return (
+    <div>
+      <Toaster message={state.toastMessage} />
+      <div className="px-2" ref={debuggerTopRef}>
+        <div>
+          <div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
+          <CustomTooltip
+            tooltipId="debuggerGenSourceCheckbox"
+            tooltipText={"Debug with generated sources"}
+            placement="top-start"
+          >
+            {customJSX}
+          </CustomTooltip>
          </div>
          { state.isLocalNodeUsed && <div className="mb-2 debuggerConfig custom-control custom-checkbox">
            <input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
--- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
@ -1,3 +1,4 @@
+import { CustomTooltip } from '@remix-ui/helper'
 import React, { useState, useEffect, useRef } from 'react'  //eslint-disable-line
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import './tx-browser.css'
@ -46,7 +47,20 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
  const txInputOnInput = () => {
    updateTxNumberFlag(!inputValue.current.value)
  }
-
+  const customJSX = (
+    <div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit} className="btn btn-primary btn-sm btn-block text-decoration-none">
+              <button
+                className='btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none'
+                id='load'
+                onClick={handleSubmit}
+                data-id='debuggerTransactionStartButton'
+                disabled={!state.txNumber }
+                style={{ pointerEvents: 'none', color: 'white' }}
+              >
+                  <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
+              </button>
+            </div>
+  )
  return (
    <div className='pb-2 container px-0'>
      <div className='txContainer'>
@ -65,29 +79,14 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
          />
        </div>
        <div className='d-flex justify-content-center w-100 btn-group py-1'>
-          <OverlayTrigger
-            placement={'bottom'}
-            overlay={
-              <Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
-                <span>
-                  {debugging ? 'Stop debugging' : 'Start debugging'}
-                </span>
-              </Tooltip>
-            }
+          <CustomTooltip
+            placement="bottom"
+            tooltipText={debugging ? 'Stop debugging' : 'Start debugging'}
+            tooltipId={'debuggingButtontooltip'}
+            tooltipClasses="text-nowrap"
          >
-            <div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit} className="btn btn-primary btn-sm btn-block text-decoration-none">
-              <button
-                className='btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none'
-                id='load'
-                onClick={handleSubmit}
-                data-id='debuggerTransactionStartButton'
-                disabled={!state.txNumber }
-                style={{ pointerEvents: 'none', color: 'white' }}
-              >
-                  <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
-              </button>
-            </div>
-          </OverlayTrigger>
+            {customJSX}
+          </CustomTooltip>
        </div>
      </div>
      <span id='error' />
--- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
@ -4,7 +4,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'


-export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText }: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses }: CustomTooltipType) {

  return (
    <Fragment>
@ -12,7 +12,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
        placement={placement}
        overlay={
          <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
-            <span>{tooltipText}</span>
+            <span className={tooltipTextClasses}>{tooltipText}</span>
          </Tooltip>
        }
      >
--- a/libs/remix-ui/helper/src/types/customtooltip.ts
+++ b/libs/remix-ui/helper/src/types/customtooltip.ts
@ -6,5 +6,6 @@ export type CustomTooltipType = {
  placement?: Placement,
  tooltipId?: string,
  tooltipClasses?:string,
-  tooltipText: string
+  tooltipText: string,
+  tooltipTextClasses?: string
 }
--- a/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx
@ -4,6 +4,7 @@ import BasicLogo from 'libs/remix-ui/vertical-icons-panel/src/lib/components/Bas
 import { ThemeContext } from '../themeContext'
 import React, { useEffect, useState, useRef, useContext } from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'// eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'

 function HomeTabTitle() {
  useEffect(() => {
@ -61,60 +62,70 @@ function HomeTabTitle() {
      <div className="d-flex justify-content-between">
        <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
        <span>
-          <OverlayTrigger placement={'top'} overlay={
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
-              <span className="border bg-light text-dark p-1 pr-3">Remix Youtube Playlist</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText="Remix Youtube Playlist"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
            <button
              onClick={() => openLink("https://www.youtube.com/channel/UCjTUPyFEr2xDGN6Cg8nKDaA")}
              className="border-0 h-100 btn fab fa-youtube">
            </button>
-          </OverlayTrigger>
+          </CustomTooltip>

-          <OverlayTrigger placement={'top'} overlay={
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
-              <span className="border bg-light text-dark p-1 pr-3">Remix Twitter Profile</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText="Remix Twitter Profile"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
            <button
              onClick={() => openLink("https://twitter.com/EthereumRemix")}
              className="border-0 h-100 pl-2 btn fab fa-twitter">
            </button>
-          </OverlayTrigger>
+          </CustomTooltip>

-          <OverlayTrigger placement={'top'} overlay={
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
-              <span className="border bg-light text-dark p-1 pr-3">Remix Linkedin Profile</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText="Remix Linkedin Profile"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
            <button
              onClick={() => openLink("https://www.linkedin.com/company/ethereum-remix/")}
              className="border-0 h-100 pl-2 btn fa fa-linkedin">
            </button>
-          </OverlayTrigger>
+          </CustomTooltip>

-          <OverlayTrigger placement={'top'} overlay={
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
-              <span className="border bg-light text-dark p-1 pr-3">Remix Medium Posts</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText="Remix Medium Posts"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
            <button
              onClick={() => openLink("https://medium.com/remix-ide")}
              className="border-0 h-100 pl-2 btn fab fa-medium">
            </button>
-          </OverlayTrigger>
+          </CustomTooltip>

-          <OverlayTrigger placement={'top'} overlay={
-            <Tooltip className="text-nowrap" id="overlay-tooltip">
-              <span className="border bg-light text-dark p-1 pr-3">Remix Gitter channel</span>
-            </Tooltip>
-          }>
+          <CustomTooltip
+            placement={'top'}
+            tooltipId="overlay-tooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText="Remix Gitter Channel"
+            tooltipTextClasses="border bg-light text-dark p-1 pr-3"
+          >
            <button
              onClick={() => openLink("https://gitter.im/ethereum/remix")}
              className="border-0 h-100 pl-2 btn fab fa-gitter">
            </button>
-          </OverlayTrigger>
+          </CustomTooltip>
        </span>
      </div>
      <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>The Native IDE for Web3 Development.</b>
--- a/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
+++ b/libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
@ -2,6 +2,7 @@
 import React, { useContext } from 'react'
 import { ThemeContext } from '../themeContext'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
 interface PluginButtonProps {
  imgPath: string,
  envID: string,
@ -30,13 +31,13 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
      </button>
      { l2 && <label className="bg-light mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_l2Label">L2</label> }
      { remixMaintained &&
-        <OverlayTrigger placement="bottom" overlay={
-          <Tooltip id="overlay-tooltip-run-script">
-            <span>Maintained by Remix</span>
-          </Tooltip>
-        }>
+        <CustomTooltip
+          placement="bottom"
+          tooltipId="overlay-tooltip-run-script"
+          tooltipText={'Maintained by Remix'}
+        >
          <i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>
-        </OverlayTrigger>
+        </CustomTooltip>
      }

    </div>