status-im
/
MyCrypto
mirror of https://github.com/status-im/MyCrypto.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add tooltip to gas slider (#997)

This commit is contained in:
William O'Beirne 2018-02-05 18:03:00 -05:00 committed by Daniel Ternyak
parent 057a1095d3
commit 942eb6b341
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
common/components/TXMetaDataPanel/components/SimpleGas.tsx
View File

@ -9,6 +9,7 @@ import { getGasLimitEstimationTimedOut } from 'selectors/transaction';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { GasLimitField } from 'components/GasLimitField'; import { GasLimitField } from 'components/GasLimitField';
import { getIsWeb3Node } from 'selectors/config'; import { getIsWeb3Node } from 'selectors/config';
const SliderWithTooltip = Slider.createSliderWithTooltip(Slider);
interface OwnProps { interface OwnProps {
gasPrice: AppState['transaction']['fields']['gasPrice']; gasPrice: AppState['transaction']['fields']['gasPrice'];
@ -48,11 +49,12 @@ class SimpleGas extends React.Component<Props> {
<div className="SimpleGas-input-group"> <div className="SimpleGas-input-group">
<div className="SimpleGas-slider"> <div className="SimpleGas-slider">
<Slider <SliderWithTooltip
onChange={this.handleSlider} onChange={this.handleSlider}
min={gasPriceDefaults.gasPriceMinGwei} min={gasPriceDefaults.gasPriceMinGwei}
max={gasPriceDefaults.gasPriceMaxGwei} max={gasPriceDefaults.gasPriceMaxGwei}
value={parseFloat(gasPrice.raw)} value={parseFloat(gasPrice.raw)}
tipFormatter={gas => `${gas} Gwei`}
/> />
<div className="SimpleGas-slider-labels"> <div className="SimpleGas-slider-labels">
<span>{translate('Cheap')}</span> <span>{translate('Cheap')}</span>

17
common/sass/styles/overrides/rc-slider.scss
View File

@ -3,6 +3,7 @@
$rail-height: 4px; $rail-height: 4px;
$handle-size: 22px; $handle-size: 22px;
$speed: 70ms; $speed: 70ms;
$tooltip-bg: rgba(#222, 0.95);
.rc-slider { .rc-slider {
&-rail { &-rail {
@ -22,4 +23,20 @@ $speed: 70ms;
border: none; border: none;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
&-tooltip {
&-arrow {
.rc-slider-tooltip-placement-top & {
border-top-color: $tooltip-bg;
}
}
&-inner {
background: $tooltip-bg;
padding: 7px 8px;
height: 26px;
box-shadow: none;
border-radius: 3px;
}
}
} }