add more custom tioltips

pull/2949/head
Joseph Izang 2 years ago
parent ad24727ce7
commit 6f96bc26c6
  1. 130
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
  2. 41
      libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx

@ -54,58 +54,67 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
return (
<div className="buttons">
<div className="stepButtons btn-group py-1">
<button id='overback' className='btn btn-primary btn-sm navigator stepButton' title='Step over back' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} >
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="overbackTooltip">
<span>Step over back</span>
</Tooltip>
}
>
<span className="fas fa-reply"></span>
</OverlayTrigger>
</button>
<button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' title='Step back' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled}>
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="intobackTooltip">
<span>Step back</span>
</Tooltip>
}
>
<span className="fas fa-level-up-alt"></span>
</OverlayTrigger>
</button>
<button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' title='Step into' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}>
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="intoforwardTooltip">
<span>Step into</span>
</Tooltip>
}
>
<span className="fas fa-level-down-alt"></span>
</OverlayTrigger>
</button>
<button id='overforward' className='btn btn-primary btn-sm navigator stepButton' title='Step over forward' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled}>
<OverlayTrigger
placement="top-end"
overlay={
<Tooltip className="text-nowrap" id="overforwardTooltip">
<span>Step into</span>
</Tooltip>
}
>
<span className="fas fa-share"></span>
</OverlayTrigger>
</button>
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="overbackTooltip">
<span>Step over back</span>
</Tooltip>
}
>
<div onClick={() => { stepOverBack && stepOverBack() }}>
<button id='overback' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-reply"></span>
</button>
</div>
</OverlayTrigger>
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="intobackTooltip">
<span>Step back</span>
</Tooltip>
}
>
<div onClick={() => { stepIntoBack && stepIntoBack() }}>
<button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-level-up-alt"></span>
</button>
</div>
</OverlayTrigger>
<OverlayTrigger
placement="top-start"
overlay={
<Tooltip className="text-nowrap" id="intoforwardTooltip">
<span>Step into</span>
</Tooltip>
}
>
<div onClick={() => { stepIntoForward && stepIntoForward() }}>
<button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
style={{ pointerEvents: 'none' }}
>
<span className="fas fa-level-down-alt"></span>
</button>
</div>
</OverlayTrigger>
<OverlayTrigger
placement="top-end"
overlay={
<Tooltip className="text-nowrap" id="overforwardTooltip">
<span>Step into</span>
</Tooltip>
}
>
<div onClick={() => { stepOverForward && stepOverForward() }}>
<button id='overforward' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-share"></span>
</button>
</div>
</OverlayTrigger>
</div>
<div className="jumpButtons btn-group py-1">
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled}>
<OverlayTrigger
placement="top-start"
overlay={
@ -114,10 +123,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip>
}
>
<span className="fas fa-step-backward"></span>
<div onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }}>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-step-backward"></span>
</button>
</div>
</OverlayTrigger>
</button>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled}>
<OverlayTrigger
placement="top-end"
overlay={
@ -126,10 +137,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip>
}
>
<span className="fas fa-eject"></span>
<div onClick={() => { jumpOut && jumpOut() }}>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-eject"></span>
</button>
</div>
</OverlayTrigger>
</button>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled}>
<OverlayTrigger
placement="top-end"
overlay={
@ -138,9 +151,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip>
}
>
<span className="fas fa-step-forward"></span>
<div onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }}>
<button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-step-forward"></span>
</button>
</div>
</OverlayTrigger>
</button>
</div>
<div id='reverted' style={{ display: revertedReason === '' ? 'none' : 'block' }}>
<span className='text-warning'>This call has reverted, state changes made during the call will be reverted.</span>

@ -65,26 +65,29 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
/>
</div>
<div className='d-flex justify-content-center w-100 btn-group py-1'>
<button
className='btn btn-primary btn-sm txbutton'
id='load'
onClick={handleSubmit}
data-id='debuggerTransactionStartButton'
disabled={!state.txNumber }
<OverlayTrigger
placement={'bottom-start'}
overlay={
<Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
<span>
{debugging ? 'Stop debugging' : 'Start debugging'}
</span>
</Tooltip>
}
>
<OverlayTrigger
placement={'bottom-start'}
overlay={
<Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
<span>
{debugging ? 'Stop debugging' : 'Start debugging'}
</span>
</Tooltip>
}
>
<span>{ debugging ? 'Stop' : 'Start' } debugging</span>
</OverlayTrigger>
</button>
<div onClick={handleSubmit}>
<button
className='btn btn-primary btn-sm txbutton'
id='load'
onClick={handleSubmit}
data-id='debuggerTransactionStartButton'
disabled={!state.txNumber }
style={{ pointerEvents: 'none' }}
>
<span>{ debugging ? 'Stop' : 'Start' } debugging</span>
</button>
</div>
</OverlayTrigger>
</div>
</div>
<span id='error' />

Loading…
Cancel
Save