mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

add more custom tioltips

Browse Source
pull/2949/head
Joseph Izang 2 years ago
parent ad24727ce7
commit 6f96bc26c6
2 changed files with 95 additions and 76 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

130
libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
Unescape View File

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

41
libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save