m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add control arrows to advanced gas tab inputs.

Browse Source
This commit is contained in:
Dan Miller 2018-10-10 17:07:40 -02:30
parent cd32c58fb4
commit aa798cc545
3 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
View File

@ -29,6 +29,10 @@ export default class AdvancedTabContent extends Component {
precision={precision}
onChange={event => onChange(Number(event.target.value))}
/>
<div className="advanced-tab__gas-edit-row__input-arrows">
<div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
<div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div>
</div>
</div>
)
}

37
ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
View File

@ -119,6 +119,43 @@
margin-top: 7px;
}
&__input-arrows {
position: absolute;
top: 7px;
right: 0px;
width: 17px;
height: 24px;
border: 1px solid #dadada;
border-top-right-radius: 4px;
display: flex;
flex-direction: column;
color: #9b9b9b;
font-size: .8em;
border-bottom-right-radius: 4px;
cursor: pointer;
&__i-wrap {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
&__i-wrap:hover {
background: #4EADE7;
color: $white;
}
i:hover {
background: #4EADE7;
}
i {
font-size: 10px;
}
}
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
-moz-appearance: none;

23
ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
View File

@ -205,7 +205,7 @@ describe('AdvancedTabContent Component', function () {
})
it('should render an input, but not a GWEI symbol', () => {
assert.equal(gasInput.children().length, 1)
assert.equal(gasInput.children().length, 2)
assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
})
@ -220,6 +220,27 @@ describe('AdvancedTabContent Component', function () {
const inputOnChange = gasInput.find('input').props().onChange
assert.equal(inputOnChange({ target: { value: 8} }), 15)
})
it('should have two input arrows', () => {
const upArrow = gasInput.find('.fa-angle-up')
assert.equal(upArrow.length, 1)
const downArrow = gasInput.find('.fa-angle-down')
assert.equal(downArrow.length, 1)
})
it('should call onChange with the value incremented decremented when its onchange method is called', () => {
gasInput = shallow(wrapper.instance().gasInput(
321,
value => value + 7,
0,
8,
false
))
const upArrow = gasInput.find('.fa-angle-up')
assert.equal(upArrow.props().onClick(), 329)
const downArrow = gasInput.find('.fa-angle-down')
assert.equal(downArrow.props().onClick(), 327)
})
})
})