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

fix css issues

Browse Source
pull/2949/head
Joseph Izang 2 years ago
parent 67bc220421
commit 6f4e69ba0c
3 changed files with 48 additions and 22 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. 24
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
  2. 38
      libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
  3. 8
      libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx

24
libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
Unescape View File

@ -7,17 +7,41 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff;
} }
.stepButton { .stepButton {
} }
.stepButtonDisabled {
background-color: #005573;
border-color: #005573;
}
.stepButton:hover {
color: #fff;
background-color: #005573;
border-color: #005573;
}
.jumpButtons { .jumpButtons {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff;
} }
.jumpButton { .jumpButton {
} }
.jumpButtonDisabled {
background-color: #005573;
border-color: #005573;
}
.jumButton:hover {
color: #fff;
background-color: #005573;
border-color: #005573;
}
.navigator { .navigator {
} }
.navigator:hover { .navigator:hover {

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

@ -51,6 +51,11 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
}) })
} }
const stepBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1'
const disableStepBtnStyle = 'stepButtonDisabled'
const jumpBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1'
const disableJumpBtnStyle = 'jumpButtonDisabled'
return ( return (
<div className="buttons"> <div className="buttons">
<div className="stepButtons btn-group py-1"> <div className="stepButtons btn-group py-1">
@ -62,10 +67,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverBack && stepOverBack() }} <div className={state.overBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverBack && stepOverBack() }}>
style={{ backgroundColor: state.overBackDisabled ? '#005e80' : '#007aa6', borderColor: state.overBackDisabled ? '#005e80' : '#007aa6', opacity: state.overBackDisabled && 0.65 }} <button id='overback' className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
>
<button id='overback' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
<span className="fas fa-reply"></span> <span className="fas fa-reply"></span>
</button> </button>
</div> </div>
@ -78,8 +81,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer" style={{ backgroundColor: state.intoBackDisabled ? '#005e80' : '#007aa6', borderColor: state.intoBackDisabled ? '#005e80' : '#007aa6', opacity: state.intoBackDisabled && 0.65 }}> <div className={state.intoBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer">
<button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}> <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
<span className="fas fa-level-up-alt"></span> <span className="fas fa-level-up-alt"></span>
</button> </button>
</div> </div>
@ -92,9 +95,9 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer" style={{ backgroundColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', opacity: state.intoForwardDisabled && 0.65}}> <div className={state.intoForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer">
<button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled} <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none', color: 'white' }}
> >
<span className="fas fa-level-down-alt"></span> <span className="fas fa-level-down-alt"></span>
</button> </button>
@ -108,8 +111,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer" style={{ backgroundColor: state.overForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.overForwardDisabled ? '#005e80' : '#007aa6', opacity: state.overForwardDisabled && 0.65}}> <div className={state.overForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer">
<button id='overforward' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}> <button id='overforward' className='btn btn-link btn-sm stepButton m-0 p-0' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
<span className="fas fa-share"></span> <span className="fas fa-share"></span>
</button> </button>
</div> </div>
@ -125,8 +128,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint" style={{ backgroundColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpPreviousBreakpointDisabled && 0.65}}> <div className={state.jumpPreviousBreakpointDisabled ? `${stepBtnStyle} ${disableJumpBtnStyle}`: `${stepBtnStyle}`} id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint">
<button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}> <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none', backgroundColor: 'inherit', color: 'white' }}>
<span className="fas fa-step-backward"></span> <span className="fas fa-step-backward"></span>
</button> </button>
</div> </div>
@ -139,9 +142,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer" style={{ backgroundColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', opacity: state.jumpOutDisabled && 0.65 <div className={state.jumpOutDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer">
}}> <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none', backgroundColor: 'inherit', color: 'white' }} data-id="buttonNavigatorJumpOut">
<button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }} data-id="buttonNavigatorJumpOut">
<span className="fas fa-eject"></span> <span className="fas fa-eject"></span>
</button> </button>
</div> </div>
@ -154,8 +156,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
</Tooltip> </Tooltip>
} }
> >
<div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer" style={{ backgroundColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpNextBreakpointDisabled && 0.65}}> <div className={state.jumpNextBreakpointDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}`: `${stepBtnStyle}`} onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer">
<button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}> <button className='btn btn-link btn-sm jumpButton m-0 p-0' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none', color: 'white' }}>
<span className="fas fa-step-forward"></span> <span className="fas fa-step-forward"></span>
</button> </button>
</div> </div>

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

@ -66,7 +66,7 @@ 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'>
<OverlayTrigger <OverlayTrigger
placement={'bottom-start'} placement={'bottom'}
overlay={ overlay={
<Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}> <Tooltip className={'text-nowrap'} id={'debuggingButtontooltip'}>
<span> <span>
@ -75,14 +75,14 @@ export const TxBrowser = ({ requestDebug, updateTxNumberFlag, unloadRequested, t
</Tooltip> </Tooltip>
} }
> >
<div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit}> <div id="debuggerTransactionStartButtonContainer" data-id="debuggerTransactionStartButton" onClick={handleSubmit} className="btn btn-primary btn-sm btn-block text-decoration-none">
<button <button
className='btn btn-primary btn-sm txbutton' className='btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none'
id='load' id='load'
onClick={handleSubmit} onClick={handleSubmit}
data-id='debuggerTransactionStartButton' data-id='debuggerTransactionStartButton'
disabled={!state.txNumber } disabled={!state.txNumber }
style={{ pointerEvents: 'none' }} style={{ pointerEvents: 'none', color: 'white' }}
> >
<span>{ debugging ? 'Stop' : 'Start' } debugging</span> <span>{ debugging ? 'Stop' : 'Start' } debugging</span>
</button> </button>

Write Preview
Loading…
Cancel
Save