diff options
Diffstat (limited to 'ui/app/components')
| -rw-r--r-- | ui/app/components/buy-button-subview.js | 2 | ||||
| -rw-r--r-- | ui/app/components/dropdowns/simple-dropdown.js | 91 | ||||
| -rw-r--r-- | ui/app/components/modals/buy-options-modal.js | 4 | ||||
| -rw-r--r-- | ui/app/components/tab-bar.js | 63 | ||||
| -rw-r--r-- | ui/app/components/tx-view.js | 2 |
5 files changed, 128 insertions, 34 deletions
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index a36f41df5..d5958787b 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -76,7 +76,7 @@ BuyButtonSubview.prototype.headerSubview = function () { paddingTop: '4px', paddingBottom: '4px', }, - }, 'Buy Eth'), + }, 'Deposit Eth'), ]), // loading indication diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js new file mode 100644 index 000000000..8cea78518 --- /dev/null +++ b/ui/app/components/dropdowns/simple-dropdown.js @@ -0,0 +1,91 @@ +const { Component, PropTypes } = require('react') +const h = require('react-hyperscript') +const classnames = require('classnames') +const R = require('ramda') + +class SimpleDropdown extends Component { + constructor (props) { + super(props) + this.state = { + isOpen: false, + } + } + + getDisplayValue () { + const { selectedOption, options } = this.props + const matchesOption = option => option.value === selectedOption + const matchingOption = R.find(matchesOption)(options) + return matchingOption + ? matchingOption.displayValue || matchingOption.value + : selectedOption + } + + handleClose () { + this.setState({ isOpen: false }) + } + + toggleOpen () { + const { isOpen } = this.state + this.setState({ isOpen: !isOpen }) + } + + renderOptions () { + const { options, onSelect, selectedOption } = this.props + + return h('div', [ + h('div.simple-dropdown__close-area', { + onClick: event => { + event.stopPropagation() + this.handleClose() + }, + }), + h('div.simple-dropdown__options', [ + ...options.map(option => { + return h( + 'div.simple-dropdown__option', + { + className: classnames({ + 'simple-dropdown__option--selected': option.value === selectedOption, + }), + key: option.value, + onClick: () => { + if (option.value !== selectedOption) { + onSelect(option.value) + } + + this.handleClose() + }, + }, + option.displayValue || option.value, + ) + }), + ]), + ]) + } + + render () { + const { placeholder } = this.props + const { isOpen } = this.state + + return h( + 'div.simple-dropdown', + { + onClick: () => this.toggleOpen(), + }, + [ + h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'), + h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'), + isOpen && this.renderOptions(), + ] + ) + } +} + +SimpleDropdown.propTypes = { + options: PropTypes.array.isRequired, + placeholder: PropTypes.string, + onSelect: PropTypes.func, + selectedOption: PropTypes.string, +} + +module.exports = SimpleDropdown diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index f1a5aa9fd..33615c483 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -42,7 +42,7 @@ BuyOptions.prototype.render = function () { h('div.buy-modal-content-title', { style: {}, }, 'Transfers'), - h('div', {}, 'How would you like to buy Ether?'), + h('div', {}, 'How would you like to deposit Ether?'), ]), h('div.buy-modal-content-options.flex-column.flex-center', {}, [ @@ -54,7 +54,7 @@ BuyOptions.prototype.render = function () { }, }, [ h('div.buy-modal-content-option-title', {}, 'Coinbase'), - h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit with Fiat'), ]), // h('div.buy-modal-content-option', {}, [ diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js index bef444a48..fe4076ed0 100644 --- a/ui/app/components/tab-bar.js +++ b/ui/app/components/tab-bar.js @@ -1,37 +1,40 @@ -const Component = require('react').Component +const { Component } = require('react') const h = require('react-hyperscript') -const inherits = require('util').inherits +const classnames = require('classnames') -module.exports = TabBar +class TabBar extends Component { + constructor (props) { + super(props) + const { defaultTab, tabs } = props -inherits(TabBar, Component) -function TabBar () { - Component.call(this) -} + this.state = { + subview: defaultTab || tabs[0].key, + } + } -TabBar.prototype.render = function () { - const props = this.props - const state = this.state || {} - const { tabs = [], defaultTab, tabSelected } = props - const { subview = defaultTab } = state + render () { + const { tabs = [], tabSelected } = this.props + const { subview } = this.state - return ( - h('.flex-row.space-around.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - paddingTop: '4px', - minHeight: '30px', - }, - }, tabs.map((tab) => { - const { key, content } = tab - return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', { - onClick: () => { - this.setState({ subview: key }) - tabSelected(key) - }, - }, content) - })) - ) + return ( + h('.tab-bar', {}, [ + tabs.map((tab) => { + const { key, content } = tab + return h('div', { + className: classnames('tab-bar__tab pointer', { + 'tab-bar__tab--active': subview === key, + }), + onClick: () => { + this.setState({ subview: key }) + tabSelected(key) + }, + key, + }, content) + }), + h('div.tab-bar__tab.tab-bar__grow-tab'), + ]) + ) + } } +module.exports = TabBar diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 59f55d485..d903998c0 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -73,7 +73,7 @@ TxView.prototype.renderButtons = function () { onClick: () => showModal({ name: 'BUY', }), - }, 'BUY'), + }, 'DEPOSIT'), h('button.btn-clear', { style: { |