From 1bbe0ed9e8fb9f9944c27453cb9791686c4d8d9d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 4 Nov 2016 12:00:56 -0700 Subject: Scaffold new account view --- ui/app/components/tab-bar.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 ui/app/components/tab-bar.js (limited to 'ui/app/components') diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js new file mode 100644 index 000000000..65078e0a4 --- /dev/null +++ b/ui/app/components/tab-bar.js @@ -0,0 +1,35 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = TabBar + +inherits(TabBar, Component) +function TabBar () { + Component.call(this) +} + +TabBar.prototype.render = function () { + const props = this.props + const state = this.state || {} + const { tabs = [], defaultTab, tabSelected } = props + const { subview = defaultTab } = state + + return ( + h('.flex-row.space-around.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + paddingTop: '4px', + }, + }, tabs.map((tab) => { + const { key, content } = tab + return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', { + onClick: () => { + this.setState({ subview: key }) + tabSelected(key) + }, + }, content) + })) + ) +} -- cgit v1.2.3 From 1af0d609bd5ac2a06b8f0b92cd78c224b136889e Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 4 Nov 2016 12:02:00 -0700 Subject: Convert buy subview to new tab bar component --- ui/app/components/buy-button-subview.js | 83 +++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 36 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index b564733b1..4e2d3739c 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -7,6 +7,7 @@ const CoinbaseForm = require('./coinbase-form') const ShapeshiftForm = require('./shapeshift-form') const extension = require('../../../app/scripts/lib/extension') const Loading = require('./loading') +const TabBar = require('./tab-bar') module.exports = connect(mapStateToProps)(BuyButtonSubview) @@ -53,43 +54,53 @@ BuyButtonSubview.prototype.render = function () { h(Loading, { isLoading }), - h('h3.flex-row.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - paddingTop: '4px', - justifyContent: 'space-around', - }, - }, [ - h(currentForm.coinbase ? '.activeForm' : '.inactiveForm.pointer', { - onClick: () => props.dispatch(actions.coinBaseSubview()), - }, 'Coinbase'), - h('a', { - onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'), - }, [ - h('i.fa.fa-question-circle', { - style: { - position: 'relative', - right: '33px', - }, - }), - ]), - h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm.pointer', { - onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)), - }, 'Shapeshift'), + h(TabBar, { + tabs: [ + { + content: [ + 'Coinbase', + h('a', { + onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'), + }, [ + h('i.fa.fa-question-circle', { + style: { + margin: '0px 5px', + }, + }), + ]), + ], + key: 'coinbase' + }, + { + content: [ + 'Shapeshift', + h('a', { + href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md', + onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'), + }, [ + h('i.fa.fa-question-circle', { + style: { + margin: '0px 5px', + }, + }), + ]) + ], + key: 'shapeshift' + }, + ], + defaultTab: 'coinbase', + tabSelected: (key) => { + switch (key) { + case 'coinbase': + props.dispatch(actions.coinBaseSubview()) + break + case 'shapeshift': + props.dispatch(actions.shapeShiftSubview(props.provider.type)) + break + } + } + }), - h('a', { - href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md', - onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'), - }, [ - h('i.fa.fa-question-circle', { - style: { - position: 'relative', - right: '28px', - }, - }), - ]), - ]), this.formVersionSubview(), ]) ) -- cgit v1.2.3 From bc623bbe345a9528f9fe19af2e2440540d8e70a7 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 4 Nov 2016 12:31:03 -0700 Subject: Linted --- ui/app/components/buy-button-subview.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'ui/app/components') diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 4e2d3739c..4678168bb 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -30,7 +30,6 @@ function BuyButtonSubview () { BuyButtonSubview.prototype.render = function () { const props = this.props - const currentForm = props.buyView.formView const isLoading = props.isSubLoading return ( @@ -69,7 +68,7 @@ BuyButtonSubview.prototype.render = function () { }), ]), ], - key: 'coinbase' + key: 'coinbase', }, { content: [ @@ -83,9 +82,9 @@ BuyButtonSubview.prototype.render = function () { margin: '0px 5px', }, }), - ]) + ]), ], - key: 'shapeshift' + key: 'shapeshift', }, ], defaultTab: 'coinbase', @@ -98,7 +97,7 @@ BuyButtonSubview.prototype.render = function () { props.dispatch(actions.shapeShiftSubview(props.provider.type)) break } - } + }, }), this.formVersionSubview(), -- cgit v1.2.3