From 8e1713e1e00be89988824c0666837187f96d073c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 12:07:46 -0700 Subject: [WIP] Propose more scaleable color management --- ui/app/css/colors.css | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 ui/app/css/colors.css (limited to 'ui/app') diff --git a/ui/app/css/colors.css b/ui/app/css/colors.css new file mode 100644 index 000000000..ec2287192 --- /dev/null +++ b/ui/app/css/colors.css @@ -0,0 +1,2 @@ +$gallery: #EFEFEF; +$alabaster: #F7F7F7; -- cgit From 4d7295b05fd3b4189bb2e4c604e53b349d5618a0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 12:20:19 -0700 Subject: Add for use in main header --- ui/app/css/colors.css | 1 + ui/app/css/index.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/css/colors.css b/ui/app/css/colors.css index ec2287192..7ac93595f 100644 --- a/ui/app/css/colors.css +++ b/ui/app/css/colors.css @@ -1,2 +1,3 @@ $gallery: #EFEFEF; $alabaster: #F7F7F7; +$shark: #22232C; \ No newline at end of file diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 05bdb33af..3cedb1d8e 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -151,12 +151,13 @@ button.btn-thin { .app-header { padding: 6px 8px; + // background: #EFEFEF; // $gallery } .app-header h1 { font-family: 'Montserrat Regular'; text-transform: uppercase; - color: #AEAEAE; + color: #22232C; // $shark } h2.page-subtitle { -- cgit From 8c5be547228c9801ab616beb5054b888509463f9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 12:21:10 -0700 Subject: Rearrange header components: closer to redesigned UI --- ui/app/app.js | 49 ++++++++++++++++++------------------------------- 1 file changed, 18 insertions(+), 31 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 8fad0f7d6..6537e2f56 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -82,7 +82,7 @@ App.prototype.render = function () { // app bar this.renderAppBar(), this.renderNetworkDropdown(), - this.renderDropdown(), + // this.renderDropdown(), h(Loading, { isLoading: isLoading || isLoadingNetwork, @@ -120,7 +120,7 @@ App.prototype.renderAppBar = function () { style: { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', - background: props.isUnlocked ? 'white' : 'none', + background: '#EFEFEF', // $gallery height: '38px', position: 'relative', zIndex: 12, @@ -134,7 +134,6 @@ App.prototype.renderAppBar = function () { alignItems: 'center', }, }, [ - // mini logo h('img', { height: 24, @@ -142,46 +141,34 @@ App.prototype.renderAppBar = function () { src: '/images/icon-128.png', }), - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) + // metamask name + h('h1', { + style: { + position: 'relative', + left: '9px', }, - }), - ]), + }, 'MetaMask'), - // metamask name - props.isUnlocked && h('h1', { - style: { - position: 'relative', - left: '9px', - }, - }, 'MetaMask'), + ]), - props.isUnlocked && h('div', { + h('div', { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', }, }, [ - - // hamburger - props.isUnlocked && h(SandwichExpando, { - width: 16, - barHeight: 2, - padding: 0, - isOpen: state.isMainMenuOpen, - color: 'rgb(247,146,30)', + // Network Indicator + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, onClick: (event) => { event.preventDefault() event.stopPropagation() - this.setState({ isMainMenuOpen: !state.isMainMenuOpen }) + this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen }) }, }), + ]), ]), ]) @@ -213,8 +200,8 @@ App.prototype.renderNetworkDropdown = function () { zIndex: 11, style: { position: 'absolute', - left: '2px', - top: '36px', + right: '2px', + top: '38px', }, innerStyle: { padding: '2px 16px 2px 0px', -- cgit From c0483fc230ec1893f15c6f8994f63e318474846e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 13:31:53 -0700 Subject: Add token logo to send screen --- ui/app/app.js | 10 ++++++++++ ui/app/send.js | 24 ++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 6537e2f56..2eb037460 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -171,6 +171,16 @@ App.prototype.renderAppBar = function () { ]), ]), + + h('.app-header', { + style: { + visibility: props.isUnlocked ? 'visible' : 'none', + background: '#EFEFEF', // $gallery + height: '38px', + position: 'relative', + zIndex: 12, + }, + }) ]) ) } diff --git a/ui/app/send.js b/ui/app/send.js index a21a219eb..1235da223 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -11,6 +11,9 @@ const isHex = require('./util').isHex const EthBalance = require('./components/eth-balance') const EnsInput = require('./components/ens-input') const ethUtil = require('ethereumjs-util') + +const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' + module.exports = connect(mapStateToProps)(SendTransactionScreen) function mapStateToProps (state) { @@ -58,16 +61,33 @@ SendTransactionScreen.prototype.render = function () { h('.send-screen.flex-column.flex-grow', [ + h('div', { + style: { + position: 'fixed', + zIndex: 15, // token-icon-z-index + marginTop: '-55px', + marginLeft: '20%', + } + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), + ]), + // // Sender Profile // - h('.account-data-subsection.flex-row.flex-grow', { style: { margin: '0 20px', + width: '335px', + background: 'white', // $white + marginTop: '-15px', + zIndex: 13, // $send-screen-z-index + display: 'flex', }, }, [ - // header - identicon + nav h('.flex-row.flex-space-between', { style: { -- cgit From 2a5f2c7f4041006daf5bda4d51117b4fe9544e98 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 17:38:29 -0700 Subject: Add responsive container; add send token copy --- ui/app/components/ens-input.js | 7 +++ ui/app/send.js | 139 ++++++++++++++--------------------------- 2 files changed, 53 insertions(+), 93 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index 3a33ebf74..93c07599d 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -44,6 +44,13 @@ EnsInput.prototype.render = function () { return h('div', { style: { width: '100%' }, }, [ + h('span', { + style: { + textAlign: 'left', + } + }, [ + 'To:' + ]), h('input.large-input', opts), // The address book functionality. h('datalist#addresses', diff --git a/ui/app/send.js b/ui/app/send.js index 1235da223..66ba21e3e 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -59,14 +59,17 @@ SendTransactionScreen.prototype.render = function () { return ( - h('.send-screen.flex-column.flex-grow', [ - - h('div', { + h('.send-screen.flex-column.flex-grow', { + style: { + background: '#FFFFFF', // $background-white + marginLeft: '3.5%', + marginRight: '3.5%', + } + }, [ + h('section.flex-center.flex-row', { style: { - position: 'fixed', - zIndex: 15, // token-icon-z-index - marginTop: '-55px', - marginLeft: '20%', + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', } }, [ h(Identicon, { @@ -76,102 +79,52 @@ SendTransactionScreen.prototype.render = function () { ]), // - // Sender Profile + // Required Fields // - h('.account-data-subsection.flex-row.flex-grow', { + + h('h3.flex-center', { style: { - margin: '0 20px', - width: '335px', - background: 'white', // $white marginTop: '-15px', - zIndex: 13, // $send-screen-z-index - display: 'flex', + fontSize: '20px', }, }, [ - // header - identicon + nav - h('.flex-row.flex-space-between', { - style: { - marginTop: '15px', - }, - }, [ - // back button - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: this.back.bind(this), - }), - - // large identicon - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - h(Identicon, { - diameter: 62, - address: address, - }), - ]), - - // invisible place holder - h('i.fa.fa-users.fa-lg.invisible', { - style: { - marginTop: '28px', - }, - }), - - ]), - - // account label - - h('.flex-column', { - style: { - marginTop: '10px', - alignItems: 'flex-start', - }, - }, [ - h('h2.font-medium.color-forest.flex-center', { - style: { - paddingTop: '8px', - marginBottom: '8px', - }, - }, identity && identity.name), - - // address and getter actions - h('.flex-row.flex-center', { - style: { - marginBottom: '8px', - }, - }, [ - - h('div', { - style: { - lineHeight: '16px', - }, - }, addressSummary(address)), - - ]), - - // balance - h('.flex-row.flex-center', [ - - h(EthBalance, { - value: account && account.balance, - conversionRate, - currentCurrency, - }), - - ]), - ]), + 'Send Tokens', ]), - // - // Required Fields - // + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '16px', + }, + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), - h('h3.flex-center.text-transform-uppercase', { + h('h3.flex-center', { style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginTop: '15px', - marginBottom: '16px', + textAlign: 'center', + fontSize: '16px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '43px', + }, + }, [ + '2.34', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '16px', }, }, [ - 'Send Transaction', + 'ANT', ]), // error message @@ -194,7 +147,7 @@ SendTransactionScreen.prototype.render = function () { h('input.large-input', { name: 'amount', - placeholder: 'Amount', + placeholder: '0', type: 'number', style: { marginRight: '6px', -- cgit From fec3e64d630d17d035df43203bbfbf061930cd61 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 18:07:58 -0700 Subject: Add high-level css layout for Send Token --- ui/app/send.js | 101 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 78 insertions(+), 23 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send.js b/ui/app/send.js index 66ba21e3e..bd4cf4ee1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -143,7 +143,17 @@ SendTransactionScreen.prototype.render = function () { ]), // 'amount' and send button - h('section.flex-row.flex-center', [ + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), h('input.large-input', { name: 'amount', @@ -157,43 +167,88 @@ SendTransactionScreen.prototype.render = function () { }, }), - h('button.primary', { - onClick: this.onSubmit.bind(this), + ]), + + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { style: { - textTransform: 'uppercase', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: {} }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', }, - }, 'Next'), + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), ]), // // Optional Fields // - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginTop: '16px', - marginBottom: '16px', - }, - }, [ - 'Transaction Data (optional)', - ]), - // 'data' field h('section.flex-column.flex-center', [ - h('input.large-input', { - name: 'txData', - placeholder: '0x01234', + + h('div.flex-row.flex-center', { style: { width: '100%', - resize: 'none', - }, - dataset: { - persistentFormId: 'tx-data', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + h('span', { style: {} }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', }, }), + ]), + + + + // h('h3.flex-center.text-transform-uppercase', { + // style: { + // background: '#EBEBEB', + // color: '#AEAEAE', + // marginTop: '16px', + // marginBottom: '16px', + // }, + // }, [ + // 'Transaction Data (optional)', + // ]), + + // // 'data' field + // h('section.flex-column.flex-center', [ + // h('input.large-input', { + // name: 'txData', + // placeholder: '0x01234', + // style: { + // width: '100%', + // resize: 'none', + // }, + // dataset: { + // persistentFormId: 'tx-data', + // }, + // }), + // ]), ]) ) } -- cgit From 970988167982a79c131331a7585512b5e53c9a95 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 18:54:21 -0700 Subject: Center send token content; hook up 'Next' and 'Cancel' buttons --- ui/app/app.js | 20 +-- ui/app/css/index.css | 6 +- ui/app/send.js | 350 ++++++++++++++++++++++++++++----------------------- 3 files changed, 203 insertions(+), 173 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 2eb037460..0f26f8add 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,15 +172,17 @@ App.prototype.renderAppBar = function () { ]), ]), - h('.app-header', { - style: { - visibility: props.isUnlocked ? 'visible' : 'none', - background: '#EFEFEF', // $gallery - height: '38px', - position: 'relative', - zIndex: 12, - }, - }) + // extra app-header space + + // h('.app-header', { + // style: { + // visibility: props.isUnlocked ? 'visible' : 'none', + // background: '#EFEFEF', // $gallery + // height: '38px', + // position: 'relative', + // zIndex: 12, + // }, + // }) ]) ) } diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 3cedb1d8e..d45966fc0 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -489,12 +489,8 @@ input.large-input { /* Send Screen */ -.send-screen { - -} - .send-screen section { - margin: 8px 16px; + margin: 4px 16px; } .send-screen input { diff --git a/ui/app/send.js b/ui/app/send.js index bd4cf4ee1..513c2462f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -59,197 +59,229 @@ SendTransactionScreen.prototype.render = function () { return ( - h('.send-screen.flex-column.flex-grow', { + h('div.flex-column.flex-grow', { style: { - background: '#FFFFFF', // $background-white - marginLeft: '3.5%', - marginRight: '3.5%', - } + // overflow: 'scroll', + minWidth: '355px', // TODO: maxWidth TBD, use home.html + }, }, [ - h('section.flex-center.flex-row', { - style: { - zIndex: 15, // $token-icon-z-index - marginTop: '-35px', - } - }, [ - h(Identicon, { - address: ARAGON, - diameter: 76, - }), - ]), - - // - // Required Fields - // - - h('h3.flex-center', { - style: { - marginTop: '-15px', - fontSize: '20px', - }, - }, [ - 'Send Tokens', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - 'Send Tokens to anyone with an Ethereum account', - ]), - h('h3.flex-center', { + // Main Send token Card + h('div.send-screen.flex-column.flex-grow', { style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - 'Your Aragon Token Balance is:', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '43px', - }, - }, [ - '2.34', - ]), - - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '16px', - }, + marginLeft: '3.5%', + marginRight: '3.5%', + background: '#FFFFFF', // $background-white + } }, [ - 'ANT', - ]), - - // error message - props.error && h('span.error.flex-center', props.error), - - // 'to' field - h('section.flex-row.flex-center', [ - h(EnsInput, { - name: 'address', - placeholder: 'Recipient Address', - onChange: this.recipientDidChange.bind(this), - network, - identities, - addressBook, - }), - ]), - - // 'amount' and send button - h('section.flex-column.flex-center', [ - - h('div.flex-row.flex-center', { + h('section.flex-center.flex-row', { style: { - width: '100%', - justifyContent: 'space-between', + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', } - },[ - h('span', { style: {} }, ['Amount']), - h('span', { style: {} }, ['Token <> USD']), + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), ]), - h('input.large-input', { - name: 'amount', - placeholder: '0', - type: 'number', + // + // Required Fields + // + + h('h3.flex-center', { style: { - marginRight: '6px', + marginTop: '-15px', + fontSize: '16px', }, - dataset: { - persistentFormId: 'tx-amount', + }, [ + 'Send Tokens', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', }, - }), + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), - ]), + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), - h('section.flex-column.flex-center', [ + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '36px', + }, + }, [ + '2.34', + ]), - h('div.flex-row.flex-center', { + h('h3.flex-center', { style: { - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Gas Fee:']), - h('span', { style: {} }, ['What\'s this?']), + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'ANT', ]), - h('input.large-input', { - name: 'Gas Fee', - placeholder: '0', - type: 'number', + // error message + props.error && h('span.error.flex-center', props.error), + + // 'to' field + h('section.flex-row.flex-center', { style: { - marginRight: '6px', + fontSize: '12px', }, - // dataset: { - // persistentFormId: 'tx-amount', - // }, - }), + }, [ + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + onChange: this.recipientDidChange.bind(this), + network, + identities, + addressBook, + }), + ]), - ]), + // 'amount' and send button + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), + + h('input.large-input', { + name: 'amount', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', + fontSize: '12px', + }, + dataset: { + persistentFormId: 'tx-amount', + }, + }), - // - // Optional Fields - // + ]), - h('section.flex-column.flex-center', [ + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + fontSize: '12px', + marginRight: '6px', + }, + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), - h('div.flex-row.flex-center', { - style: { - width: '100%', - justifyContent: 'flex-start', - } - },[ - h('span', { style: {} }, ['Transaction Memo (optional)']), - h('span', { style: {} }, ['What\'s this?']), ]), - h('input.large-input', { - name: 'memo', - placeholder: '', - type: 'string', - style: { - marginRight: '6px', - }, - }), + // + // Optional Fields + // + + h('section.flex-column.flex-center', [ + + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', + }, + }), + ]), + // h('h3.flex-center.text-transform-uppercase', { + // style: { + // background: '#EBEBEB', + // color: '#AEAEAE', + // marginTop: '16px', + // marginBottom: '16px', + // }, + // }, [ + // 'Transaction Data (optional)', + // ]), + + // // 'data' field + // h('section.flex-column.flex-center', [ + // h('input.large-input', { + // name: 'txData', + // placeholder: '0x01234', + // style: { + // width: '100%', + // resize: 'none', + // }, + // dataset: { + // persistentFormId: 'tx-data', + // }, + // }), + // ]), ]), + // Buttons underneath card + h('button.primary', { + onClick: this.onSubmit.bind(this), + style: { + textTransform: 'uppercase', + }, + }, 'Next'), - // h('h3.flex-center.text-transform-uppercase', { - // style: { - // background: '#EBEBEB', - // color: '#AEAEAE', - // marginTop: '16px', - // marginBottom: '16px', - // }, - // }, [ - // 'Transaction Data (optional)', - // ]), - - // // 'data' field - // h('section.flex-column.flex-center', [ - // h('input.large-input', { - // name: 'txData', - // placeholder: '0x01234', - // style: { - // width: '100%', - // resize: 'none', - // }, - // dataset: { - // persistentFormId: 'tx-data', - // }, - // }), - // ]), + h('button.primary', { + onClick: this.back.bind(this), + style: { + textTransform: 'uppercase', + }, + }, 'Cancel'), ]) + ) } -- cgit From 25259cc2cdadce71514d2e37cc9e0ea4bce21f40 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 19:37:08 -0700 Subject: Center action buttons, add minor style adjustments --- ui/app/css/index.css | 98 +++++++++++++++++++++++++++++++--------------------- ui/app/send.js | 48 +++++++++++++++---------- 2 files changed, 88 insertions(+), 58 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/index.css b/ui/app/css/index.css index d45966fc0..f4783a446 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -69,46 +69,48 @@ input:focus, textarea:focus { flex-direction: column; } -button, input[type="submit"] { - font-family: 'Montserrat Bold'; - outline: none; - cursor: pointer; - padding: 8px 12px; - border: none; - color: white; - transform-origin: center center; - transition: transform 50ms ease-in; - /* default orange */ - background: rgba(247, 134, 28, 1); - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); -} - -.btn-green, input[type="submit"].btn-green { - background: rgba(106, 195, 96, 1); - box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); -} - -.btn-red { - background: rgba(254, 35, 17, 1); - box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); -} - -button[disabled], input[type="submit"][disabled] { - cursor: not-allowed; - background: rgba(197, 197, 197, 1); - box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); -} - -button.spaced { - margin: 2px; -} - -button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { - transform: scale(1.1); -} -button:not([disabled]):active, input[type="submit"]:not([disabled]):active { - transform: scale(0.95); -} +// TODO: remove/refactor for new design + +// button, input[type="submit"] { +// font-family: 'Montserrat Bold'; +// outline: none; +// cursor: pointer; +// padding: 8px 12px; +// border: none; +// color: white; +// transform-origin: center center; +// transition: transform 50ms ease-in; +// /* default orange */ +// background: rgba(247, 134, 28, 1); +// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); +// } + +// .btn-green, input[type="submit"].btn-green { +// background: rgba(106, 195, 96, 1); +// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); +// } + +// .btn-red { +// background: rgba(254, 35, 17, 1); +// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); +// } + +// button[disabled], input[type="submit"][disabled] { +// cursor: not-allowed; +// background: rgba(197, 197, 197, 1); +// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); +// } + +// button.spaced { +// margin: 2px; +// } + +// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { +// transform: scale(1.1); +// } +// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { +// transform: scale(0.95); +// } a { text-decoration: none; @@ -137,6 +139,22 @@ button.primary { text-transform: uppercase; } +button.light { + padding: 8px 12px; + // background: #FFFFFF; // $bg-white + box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); + color: #585D67; // TODO: make reusable light button color + font-size: 1.1em; + font-family: 'Montserrat Regular'; + text-transform: uppercase; + text-align: center; + line-height: 20px; + border-radius: 2px; + border: 1px solid #979797; // #TODO: make reusable light border color + opacity: 0.5; +} + +// TODO: cleanup: not used anywhere button.btn-thin { border: 1px solid; border-color: #4D4D4D; diff --git a/ui/app/send.js b/ui/app/send.js index 513c2462f..a24989e56 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -72,6 +72,7 @@ SendTransactionScreen.prototype.render = function () { marginLeft: '3.5%', marginRight: '3.5%', background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', } }, [ h('section.flex-center.flex-row', { @@ -92,7 +93,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { - marginTop: '-15px', + marginTop: '-18px', fontSize: '16px', }, }, [ @@ -111,6 +112,7 @@ SendTransactionScreen.prototype.render = function () { h('h3.flex-center', { style: { textAlign: 'center', + marginTop: '2px', fontSize: '12px', }, }, [ @@ -121,6 +123,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '36px', + marginTop: '8px', }, }, [ '2.34', @@ -130,6 +133,7 @@ SendTransactionScreen.prototype.render = function () { style: { textAlign: 'center', fontSize: '12px', + marginTop: '4px', }, }, [ 'ANT', @@ -156,7 +160,6 @@ SendTransactionScreen.prototype.render = function () { // 'amount' and send button h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -184,7 +187,6 @@ SendTransactionScreen.prototype.render = function () { ]), h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -215,8 +217,11 @@ SendTransactionScreen.prototype.render = function () { // Optional Fields // - h('section.flex-column.flex-center', [ - + h('section.flex-column.flex-center', { + style: { + marginBottom: '10px', + }, + }, [ h('div.flex-row.flex-center', { style: { fontSize: '12px', @@ -225,7 +230,6 @@ SendTransactionScreen.prototype.render = function () { } },[ h('span', { style: {} }, ['Transaction Memo (optional)']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), ]), h('input.large-input', { @@ -266,20 +270,28 @@ SendTransactionScreen.prototype.render = function () { ]), // Buttons underneath card + h('section.flex-column.flex-center', [ - h('button.primary', { - onClick: this.onSubmit.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Next'), + h('button.light', { + onClick: this.onSubmit.bind(this), + style: { + marginTop: '8px', + width: '8em', + background: '#FFFFFF' + }, + }, 'Next'), - h('button.primary', { - onClick: this.back.bind(this), - style: { - textTransform: 'uppercase', - }, - }, 'Cancel'), + h('button.light', { + onClick: this.back.bind(this), + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + }, 'Cancel'), + + ]), ]) ) -- cgit From 8ace4710ffa1ca56e59e5888fd076fecfae8a911 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 19:46:59 -0700 Subject: Clean up send screen --- ui/app/send.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/send.js b/ui/app/send.js index a24989e56..873db8473 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -320,7 +320,11 @@ SendTransactionScreen.prototype.onSubmit = function () { const nickname = state.nickname || ' ' const input = document.querySelector('input[name="amount"]').value const value = util.normalizeEthStringToWei(input) - const txData = document.querySelector('input[name="txData"]').value + // TODO: check with team on whether txData is removed completely. + const txData = false; + // Must replace with memo data. + // const txData = document.querySelector('input[name="txData"]').value + const balance = this.props.balance let message @@ -339,7 +343,7 @@ SendTransactionScreen.prototype.onSubmit = function () { return this.props.dispatch(actions.displayWarning(message)) } - if (!isHex(ethUtil.stripHexPrefix(txData)) && txData) { + if (txData && !isHex(ethUtil.stripHexPrefix(txData))) { message = 'Transaction data must be hex string.' return this.props.dispatch(actions.displayWarning(message)) } -- cgit From 35ff4c195c4ff91a90b7572f07060b0213898f22 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 20:55:55 -0700 Subject: [WIP] Isolate form logic from rest of confirmation UI --- ui/app/components/pending-tx.js | 49 +++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 22 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 5324ccd64..2414a9759 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -75,11 +75,8 @@ PendingTx.prototype.render = function () { key: txMeta.id, }, [ - h('form#pending-tx-form', { - onSubmit: this.onSubmit.bind(this), - + h('div', { }, [ - // tx info h('div', [ @@ -305,24 +302,32 @@ PendingTx.prototype.render = function () { }, 'Buy Ether') : null, - h('button', { - onClick: (event) => { - this.resetGasFields() - event.preventDefault() - }, - }, 'Reset'), - - // Accept Button - h('input.confirm.btn-green', { - type: 'submit', - value: 'SUBMIT', - style: { marginLeft: '10px' }, - disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, - }), - - h('button.cancel.btn-red', { - onClick: props.cancelTransaction, - }, 'Reject'), + + h('form#pending-tx-form', { + onSubmit: this.onSubmit.bind(this), + }, [ + // Reset Button + h('button', { + onClick: (event) => { + this.resetGasFields() + event.preventDefault() + }, + }, 'Reset'), + + // Accept Button + h('input.confirm.btn-green', { + type: 'submit', + value: 'SUBMIT', + style: { marginLeft: '10px' }, + disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, + }), + + // Cancel Button + h('button.cancel.btn-red', { + onClick: props.cancelTransaction, + }, 'Reject'), + ]), + ]), ]), ]) -- cgit From 65327dd11f5c56ae8a60a4a8f399d1b4832285c1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 22:17:56 -0700 Subject: Cleanup unnecessary pending tx-switching logic --- ui/app/conf-tx.js | 79 +++++++++++++------------------------------------------ 1 file changed, 19 insertions(+), 60 deletions(-) (limited to 'ui/app') diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 34727ff78..4a8c616e2 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -52,66 +52,25 @@ ConfirmTxScreen.prototype.render = function () { log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) if (unconfTxList.length === 0) return h(Loading, { isLoading: true }) - return ( - - h('.flex-column.flex-grow', [ - - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.goHome.bind(this), - }) : null, - h('h2.page-subtitle', 'Confirm Transaction'), - isNotification ? h(NetworkIndicator, { - network: network, - provider: provider, - }) : null, - ]), - - h('h3', { - style: { - alignSelf: 'center', - display: unconfTxList.length > 1 ? 'block' : 'none', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - style: { - display: props.index === 0 ? 'none' : 'inline-block', - }, - onClick: () => props.dispatch(actions.previousTx()), - }), - ` ${props.index + 1} of ${unconfTxList.length} `, - h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', { - style: { - display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block', - }, - onClick: () => props.dispatch(actions.nextTx()), - }), - ]), - - warningIfExists(props.warning), - - currentTxView({ - // Properties - txData: txData, - key: txData.id, - selectedAddress: props.selectedAddress, - accounts: props.accounts, - identities: props.identities, - conversionRate, - currentCurrency, - blockGasLimit, - // Actions - buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), - sendTransaction: this.sendTransaction.bind(this), - cancelTransaction: this.cancelTransaction.bind(this, txData), - signMessage: this.signMessage.bind(this, txData), - signPersonalMessage: this.signPersonalMessage.bind(this, txData), - cancelMessage: this.cancelMessage.bind(this, txData), - cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData), - }), - ]) - ) + return currentTxView({ + // Properties + txData: txData, + key: txData.id, + selectedAddress: props.selectedAddress, + accounts: props.accounts, + identities: props.identities, + conversionRate, + currentCurrency, + blockGasLimit, + // Actions + buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress), + sendTransaction: this.sendTransaction.bind(this), + cancelTransaction: this.cancelTransaction.bind(this, txData), + signMessage: this.signMessage.bind(this, txData), + signPersonalMessage: this.signPersonalMessage.bind(this, txData), + cancelMessage: this.cancelMessage.bind(this, txData), + cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData), + }) } function currentTxView (opts) { -- cgit From abc78a1bf9b83d35bf1ac4453d8886f11675d41d Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 22:18:26 -0700 Subject: Add content boxes to pendingTx, prep for reusability --- ui/app/components/pending-tx.js | 509 ++++++++++++++-------------------------- 1 file changed, 179 insertions(+), 330 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 2414a9759..8031547d4 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -20,6 +20,11 @@ const GWEI_FACTOR = new BN(1e9) const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) const MIN_GAS_LIMIT_BN = new BN(21000) + +// Faked, for Icon +const Identicon = require('./identicon') +const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' + module.exports = PendingTx inherits(PendingTx, Component) function PendingTx () { @@ -31,6 +36,24 @@ function PendingTx () { } } +const sectionDivider = h('div', { + style: { + height:'1px', + background:'#E7E7E7', + }, +}), + +// Next: create separate react components +const contentDivider = h('div', { + style: { + marginLeft: '16px', + marginRight: '16px', + height:'1px', + background:'#E7E7E7', + }, +}) + + PendingTx.prototype.render = function () { const props = this.props const { currentCurrency, blockGasLimit } = props @@ -70,349 +93,187 @@ PendingTx.prototype.render = function () { this.inputs = [] return ( - - h('div', { - key: txMeta.id, + h('div.flex-column.flex-grow', { + style: { + // overflow: 'scroll', + minWidth: '355px', // TODO: maxWidth TBD, use home.html + }, }, [ - h('div', { + // Main Send token Card + h('div.send-screen.flex-column.flex-grow', { + style: { + marginLeft: '3.5%', + marginRight: '3.5%', + background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', + } }, [ - // tx info - h('div', [ - - h('.flex-row.flex-center', { - style: { - maxWidth: '100%', - }, - }, [ - - h(MiniAccountPanel, { - imageSeed: address, - picOrder: 'right', - }, [ - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, identity.name), - - h(Copyable, { - value: ethUtil.toChecksumAddress(address), - }, [ - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(address, 6, 4, false)), - ]), - - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, [ - h(EthBalance, { - value: balance, - conversionRate, - currentCurrency, - inline: true, - labelColor: '#F7861C', - }), - ]), - ]), - - forwardCarrat(), - - this.miniAccountPanelForRecipient(), - ]), - - h('style', ` - .table-box { - margin: 7px 0px 0px 0px; - width: 100%; - } - .table-box .row { - margin: 0px; - background: rgb(236,236,236); - display: flex; - justify-content: space-between; - font-family: Montserrat Light, sans-serif; - font-size: 13px; - padding: 5px 25px; - } - .table-box .row .value { - font-family: Montserrat Regular; - } - `), - - h('.table-box', [ - - // Ether Value - // Currently not customizable, but easily modified - // in the way that gas and gasLimit currently are. - h('.row', [ - h('.cell.label', 'Amount'), - h(EthBalance, { value: txParams.value, currentCurrency, conversionRate }), - ]), - - // Gas Limit (customizable) - h('.cell.row', [ - h('.cell.label', 'Gas Limit'), - h('.cell.value', { - }, [ - h(BNInput, { - name: 'Gas Limit', - value: gasBn, - precision: 0, - scale: 0, - // The hard lower limit for gas. - min: MIN_GAS_LIMIT_BN.toString(10), - max: safeGasLimit, - suffix: 'UNITS', - style: { - position: 'relative', - top: '5px', - }, - onChange: this.gasLimitChanged.bind(this), - - ref: (hexInput) => { this.inputs.push(hexInput) }, - }), - ]), - ]), - - // Gas Price (customizable) - h('.cell.row', [ - h('.cell.label', 'Gas Price'), - h('.cell.value', { - }, [ - h(BNInput, { - name: 'Gas Price', - value: gasPriceBn, - precision: 9, - scale: 9, - suffix: 'GWEI', - min: MIN_GAS_PRICE_GWEI_BN.toString(10), - style: { - position: 'relative', - top: '5px', - }, - onChange: this.gasPriceChanged.bind(this), - ref: (hexInput) => { this.inputs.push(hexInput) }, - }), - ]), - ]), - - // Max Transaction Fee (calculated) - h('.cell.row', [ - h('.cell.label', 'Max Transaction Fee'), - h(EthBalance, { value: txFeeBn.toString(16), currentCurrency, conversionRate }), - ]), - - h('.cell.row', { - style: { - fontFamily: 'Montserrat Regular', - background: 'white', - padding: '10px 25px', - }, - }, [ - h('.cell.label', 'Max Total'), - h('.cell.value', { - style: { - display: 'flex', - alignItems: 'center', - }, - }, [ - h(EthBalance, { - value: maxCost.toString(16), - currentCurrency, - conversionRate, - inline: true, - labelColor: 'black', - fontSize: '16px', - }), - ]), - ]), - - // Data size row: - h('.cell.row', { - style: { - background: '#f7f7f7', - paddingBottom: '0px', - }, - }, [ - h('.cell.label'), - h('.cell.value', { - style: { - fontFamily: 'Montserrat Light', - fontSize: '11px', - }, - }, `Data included: ${dataLength} bytes`), - ]), - ]), // End of Table - + h('section.flex-center.flex-row', { + style: { + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', + } + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), ]), - h('style', ` - .conf-buttons button { - margin-left: 10px; - text-transform: uppercase; - } - `), + // + // Required Fields + // - txMeta.simulationFails ? - h('.error', { - style: { - marginLeft: 50, - fontSize: '0.9em', - }, - }, 'Transaction Error. Exception thrown in contract code.') - : null, + h('h3.flex-center', { + style: { + marginTop: '-18px', + fontSize: '16px', + }, + }, [ + 'Confirm Transaction', + ]), - !isValidAddress ? - h('.error', { - style: { - marginLeft: 50, - fontSize: '0.9em', - }, - }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') - : null, + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'You\'re sending to Recipient ...5924', + ]), - insufficientBalance ? - h('span.error', { - style: { - marginLeft: 50, - fontSize: '0.9em', - }, - }, 'Insufficient balance for transaction') - : null, + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '36px', + marginTop: '8px', + }, + }, [ + '0.24', + ]), - // send + cancel - h('.flex-row.flex-space-around.conf-buttons', { + h('h3.flex-center', { style: { - display: 'flex', - justifyContent: 'flex-end', - margin: '14px 25px', + textAlign: 'center', + fontSize: '12px', + marginTop: '4px', }, }, [ + 'ANT', + ]), + // error message + props.error && h('span.error.flex-center', props.error), - insufficientBalance ? - h('button.btn-green', { - onClick: props.buyEth, - }, 'Buy Ether') - : null, + sectionDivider, + h('section.flex-row.flex-center', { - h('form#pending-tx-form', { - onSubmit: this.onSubmit.bind(this), + }, [ + h('div', { + style: { + width: '50%', + } }, [ - // Reset Button - h('button', { - onClick: (event) => { - this.resetGasFields() - event.preventDefault() - }, - }, 'Reset'), - - // Accept Button - h('input.confirm.btn-green', { - type: 'submit', - value: 'SUBMIT', - style: { marginLeft: '10px' }, - disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, - }), - - // Cancel Button - h('button.cancel.btn-red', { - onClick: props.cancelTransaction, - }, 'Reject'), + h('span', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'From' + ]) ]), - ]), - ]), - ]) - ) -} - -PendingTx.prototype.miniAccountPanelForRecipient = function () { - const props = this.props - const txData = props.txData - const txParams = txData.txParams || {} - const isContractDeploy = !('to' in txParams) - - // If it's not a contract deploy, send to the account - if (!isContractDeploy) { - return h(MiniAccountPanel, { - imageSeed: txParams.to, - picOrder: 'left', - }, [ - - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, nameForAddress(txParams.to, props.identities)), - - h(Copyable, { - value: ethUtil.toChecksumAddress(txParams.to), - }, [ - h('span.font-small', { - style: { - fontFamily: 'Montserrat Light, Montserrat, sans-serif', - }, - }, addressSummary(txParams.to, 6, 4, false)), - ]), - - ]) - } else { - return h(MiniAccountPanel, { - picOrder: 'left', - }, [ + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, 'Aragon Token'), - h('span.font-small', { - style: { - fontFamily: 'Montserrat Bold, Montserrat, sans-serif', - }, - }, 'New Contract'), + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, 'Your Balance 2.34 ANT') + ]) + ]), - ]) - } -} + contentDivider, -PendingTx.prototype.gasPriceChanged = function (newBN, valid) { - log.info(`Gas price changed to: ${newBN.toString(10)}`) - const txMeta = this.gatherTxMeta() - txMeta.txParams.gasPrice = '0x' + newBN.toString('hex') - this.setState({ - txData: clone(txMeta), - valid, - }) -} + h('form#pending-tx-form', { + onSubmit: this.onSubmit.bind(this), + }, [ + // Reset Button + h('button', { + onClick: (event) => { + this.resetGasFields() + event.preventDefault() + }, + }, 'Reset'), + + // Accept Button + h('input.confirm.btn-green', { + type: 'submit', + value: 'SUBMIT', + style: { marginLeft: '10px' }, + disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, + }), + + // Cancel Button + h('button.cancel.btn-red', { + onClick: props.cancelTransaction, + }, 'Reject'), + ]), -PendingTx.prototype.gasLimitChanged = function (newBN, valid) { - log.info(`Gas limit changed to ${newBN.toString(10)}`) - const txMeta = this.gatherTxMeta() - txMeta.txParams.gas = '0x' + newBN.toString('hex') - this.setState({ - txData: clone(txMeta), - valid, - }) + ]) // end of main container + ]) // end of minwidth wrapper + ) } -PendingTx.prototype.resetGasFields = function () { - log.debug(`pending-tx resetGasFields`) - - this.inputs.forEach((hexInput) => { - if (hexInput) { - hexInput.setValid() - } - }) - - this.setState({ - txData: null, - valid: true, - }) -} +// PendingTx.prototype.gasPriceChanged = function (newBN, valid) { +// log.info(`Gas price changed to: ${newBN.toString(10)}`) +// const txMeta = this.gatherTxMeta() +// txMeta.txParams.gasPrice = '0x' + newBN.toString('hex') +// this.setState({ +// txData: clone(txMeta), +// valid, +// }) +// } + +// PendingTx.prototype.gasLimitChanged = function (newBN, valid) { +// log.info(`Gas limit changed to ${newBN.toString(10)}`) +// const txMeta = this.gatherTxMeta() +// txMeta.txParams.gas = '0x' + newBN.toString('hex') +// this.setState({ +// txData: clone(txMeta), +// valid, +// }) +// } + +// PendingTx.prototype.resetGasFields = function () { +// log.debug(`pending-tx resetGasFields`) + +// this.inputs.forEach((hexInput) => { +// if (hexInput) { +// hexInput.setValid() +// } +// }) + +// this.setState({ +// txData: null, +// valid: true, +// }) +// } PendingTx.prototype.onSubmit = function (event) { event.preventDefault() @@ -471,15 +332,3 @@ PendingTx.prototype.bnMultiplyByFraction = function (targetBN, numerator, denomi const denomBN = new BN(denominator) return targetBN.mul(numBN).div(denomBN) } - -function forwardCarrat () { - return ( - h('img', { - src: 'images/forward-carrat.svg', - style: { - padding: '5px 6px 0px 10px', - height: '37px', - }, - }) - ) -} -- cgit From 4880ee26d589ea7bbb1f0d532646fa818d4eaae4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 22:20:29 -0700 Subject: Add note to self, for future code cleanup --- ui/app/components/pending-tx.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 8031547d4..f77374ef8 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -36,6 +36,13 @@ function PendingTx () { } } +// Next: create separate react components +// roughly 5 components: +// heroIcon +// numericDisplay (contains symbol + currency) +// divider +// contentBox +// actionButtons const sectionDivider = h('div', { style: { height:'1px', @@ -43,7 +50,6 @@ const sectionDivider = h('div', { }, }), -// Next: create separate react components const contentDivider = h('div', { style: { marginLeft: '16px', -- cgit From 689f60d1ce811f542e70da523bcb89b12242440d Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 22:44:39 -0700 Subject: Add rounded background to total token, with minor styling tweaks --- ui/app/components/pending-tx.js | 192 +++++++++++++++++++++++++++++++++++----- ui/app/css/colors.css | 3 +- ui/app/css/index.css | 10 +-- ui/app/send.js | 4 +- 4 files changed, 180 insertions(+), 29 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f77374ef8..4b06f71b0 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -25,17 +25,6 @@ const MIN_GAS_LIMIT_BN = new BN(21000) const Identicon = require('./identicon') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' -module.exports = PendingTx -inherits(PendingTx, Component) -function PendingTx () { - Component.call(this) - this.state = { - valid: true, - txData: null, - submitting: false, - } -} - // Next: create separate react components // roughly 5 components: // heroIcon @@ -48,7 +37,7 @@ const sectionDivider = h('div', { height:'1px', background:'#E7E7E7', }, -}), +}) const contentDivider = h('div', { style: { @@ -59,6 +48,16 @@ const contentDivider = h('div', { }, }) +module.exports = PendingTx +inherits(PendingTx, Component) +function PendingTx () { + Component.call(this) + this.state = { + valid: true, + txData: null, + submitting: false, + } +} PendingTx.prototype.render = function () { const props = this.props @@ -175,7 +174,6 @@ PendingTx.prototype.render = function () { sectionDivider, h('section.flex-row.flex-center', { - }, [ h('div', { style: { @@ -216,27 +214,179 @@ PendingTx.prototype.render = function () { contentDivider, + h('section.flex-row.flex-center', { + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('span', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'To' + ]) + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, 'Ethereum Address'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '...5924') + ]) + ]), + + contentDivider, + + h('section.flex-row.flex-center', { + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('span', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'Gas Fee' + ]) + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, '$0.04 USD'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '0.001575 ETH') + ]) + ]), + + contentDivider, + + h('section.flex-row.flex-center', { + style: { + backgroundColor: '#F6F6F6', // $wild-sand + borderRadius: '8px', + marginLeft: '10px', + marginRight: '10px', + paddingLeft: '6px', + paddingRight: '6px', + } + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('div', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'Total Tokens' + ]), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + } + }, [ + 'Total Gas' + ]) + + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, '0.24 ANT (127.00 USD)'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '0.249 ETH') + ]) + ]), + + sectionDivider, + h('form#pending-tx-form', { onSubmit: this.onSubmit.bind(this), }, [ // Reset Button - h('button', { - onClick: (event) => { - this.resetGasFields() - event.preventDefault() - }, - }, 'Reset'), + // h('button', { + // onClick: (event) => { + // this.resetGasFields() + // event.preventDefault() + // }, + // }, 'Reset'), // Accept Button h('input.confirm.btn-green', { type: 'submit', value: 'SUBMIT', - style: { marginLeft: '10px' }, + style: { + color: '#FFFFFF', + fontSize: '12px', + lineHeight: '20px', + textAlign: 'center', + }, disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, }), // Cancel Button - h('button.cancel.btn-red', { + h('button.cancel.btn-light', { + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, onClick: props.cancelTransaction, }, 'Reject'), ]), diff --git a/ui/app/css/colors.css b/ui/app/css/colors.css index 7ac93595f..650c81120 100644 --- a/ui/app/css/colors.css +++ b/ui/app/css/colors.css @@ -1,3 +1,4 @@ $gallery: #EFEFEF; $alabaster: #F7F7F7; -$shark: #22232C; \ No newline at end of file +$shark: #22232C; +$wild-sand: #F6F6F6; \ No newline at end of file diff --git a/ui/app/css/index.css b/ui/app/css/index.css index f4783a446..dc8cea695 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -85,10 +85,10 @@ input:focus, textarea:focus { // box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); // } -// .btn-green, input[type="submit"].btn-green { -// background: rgba(106, 195, 96, 1); -// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); -// } +.btn-green, input[type="submit"].btn-green { + border-radius: 2px; + background-color: #02C9B1; +} // .btn-red { // background: rgba(254, 35, 17, 1); @@ -139,7 +139,7 @@ button.primary { text-transform: uppercase; } -button.light { +.btn-light { padding: 8px 12px; // background: #FFFFFF; // $bg-white box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); diff --git a/ui/app/send.js b/ui/app/send.js index 873db8473..de9e64ad1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () { // Buttons underneath card h('section.flex-column.flex-center', [ - h('button.light', { + h('button.btn-light', { onClick: this.onSubmit.bind(this), style: { marginTop: '8px', @@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () { }, }, 'Next'), - h('button.light', { + h('button.btn-light', { onClick: this.back.bind(this), style: { background: '#F7F7F7', // $alabaster -- cgit From 6a5e73e67386b063786eb36efe1ee6544f8017bb Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 23:00:44 -0700 Subject: Enhance button and input css reset to protect from user agent stylesheet --- ui/app/css/reset.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app') diff --git a/ui/app/css/reset.css b/ui/app/css/reset.css index 9ce89e8bc..da94e6212 100644 --- a/ui/app/css/reset.css +++ b/ui/app/css/reset.css @@ -45,4 +45,8 @@ q:before, q:after { table { border-collapse: collapse; border-spacing: 0; +} + +input, button { + border-style: none; } \ No newline at end of file -- cgit From f368f371c29699f277b8c91ad8a6284a3b451223 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 23:02:04 -0700 Subject: Simplify btn-green colors --- ui/app/components/pending-tx.js | 1 + ui/app/css/index.css | 5 ++--- ui/app/css/reset.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 4b06f71b0..eae9046a8 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -372,6 +372,7 @@ PendingTx.prototype.render = function () { value: 'SUBMIT', style: { color: '#FFFFFF', + borderRadius: '2px'; fontSize: '12px', lineHeight: '20px', textAlign: 'center', diff --git a/ui/app/css/index.css b/ui/app/css/index.css index dc8cea695..3c397dcff 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -85,9 +85,8 @@ input:focus, textarea:focus { // box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); // } -.btn-green, input[type="submit"].btn-green { - border-radius: 2px; - background-color: #02C9B1; +.btn-green { + background-color: #02C9B1; // TODO: reusable color in colors.css } // .btn-red { diff --git a/ui/app/css/reset.css b/ui/app/css/reset.css index da94e6212..146be1e15 100644 --- a/ui/app/css/reset.css +++ b/ui/app/css/reset.css @@ -49,4 +49,4 @@ table { input, button { border-style: none; -} \ No newline at end of file +} -- cgit From 9373ba9f381f390be7e8d88057c0c6f1a97a27f8 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 23:09:49 -0700 Subject: Move action buttons out of send token container, tweak styles --- ui/app/components/pending-tx.js | 78 +++++++++++++++++++++-------------------- 1 file changed, 40 insertions(+), 38 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index eae9046a8..ede561bd2 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -304,6 +304,7 @@ PendingTx.prototype.render = function () { marginRight: '10px', paddingLeft: '6px', paddingRight: '6px', + marginBottom: '10px', } }, [ h('div', { @@ -315,6 +316,7 @@ PendingTx.prototype.render = function () { style: { textAlign: 'left', fontSize: '12px', + marginBottom: '-10px', } }, [ 'Total Tokens' @@ -353,46 +355,46 @@ PendingTx.prototype.render = function () { ]) ]), - sectionDivider, - - h('form#pending-tx-form', { - onSubmit: this.onSubmit.bind(this), - }, [ - // Reset Button - // h('button', { - // onClick: (event) => { - // this.resetGasFields() - // event.preventDefault() - // }, - // }, 'Reset'), - - // Accept Button - h('input.confirm.btn-green', { - type: 'submit', - value: 'SUBMIT', - style: { - color: '#FFFFFF', - borderRadius: '2px'; - fontSize: '12px', - lineHeight: '20px', - textAlign: 'center', - }, - disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, - }), + ]), // end of container - // Cancel Button - h('button.cancel.btn-light', { - style: { - background: '#F7F7F7', // $alabaster - border: 'none', - opacity: 1, - width: '8em', - }, - onClick: props.cancelTransaction, - }, 'Reject'), - ]), + h('form#pending-tx-form.flex-column.flex-center', { + onSubmit: this.onSubmit.bind(this), + }, [ + // Reset Button + // h('button', { + // onClick: (event) => { + // this.resetGasFields() + // event.preventDefault() + // }, + // }, 'Reset'), + + // Accept Button + h('input.confirm.btn-green', { + type: 'submit', + value: 'SUBMIT', + style: { + marginTop: '8px', + width: '8em', + color: '#FFFFFF', + borderRadius: '2px', + fontSize: '12px', + lineHeight: '20px', + textAlign: 'center', + }, + disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, + }), - ]) // end of main container + // Cancel Button + h('button.cancel.btn-light', { + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + onClick: props.cancelTransaction, + }, 'Reject'), + ]), ]) // end of minwidth wrapper ) } -- cgit From 97cb25c9f17b5cbf66f4e9a769bcdbdd39b4c9b5 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sat, 29 Jul 2017 23:11:11 -0700 Subject: Adjust copy in send token confirmation screen --- ui/app/components/pending-tx.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index ede561bd2..1fa9db4ef 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -371,7 +371,7 @@ PendingTx.prototype.render = function () { // Accept Button h('input.confirm.btn-green', { type: 'submit', - value: 'SUBMIT', + value: 'CONFIRM', style: { marginTop: '8px', width: '8em', @@ -393,7 +393,7 @@ PendingTx.prototype.render = function () { width: '8em', }, onClick: props.cancelTransaction, - }, 'Reject'), + }, 'CANCEL'), ]), ]) // end of minwidth wrapper ) -- cgit From a7ab69b940e91aea4362c3c0bf9e9f3efb7c76c9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 16:47:47 -0700 Subject: Adjust button styles for Send Token screen --- ui/app/components/pending-tx.js | 1 + ui/app/css/reset.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1fa9db4ef..1c47440f2 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -380,6 +380,7 @@ PendingTx.prototype.render = function () { fontSize: '12px', lineHeight: '20px', textAlign: 'center', + borderStyle: 'none', }, disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, }), diff --git a/ui/app/css/reset.css b/ui/app/css/reset.css index 146be1e15..fef74825d 100644 --- a/ui/app/css/reset.css +++ b/ui/app/css/reset.css @@ -47,6 +47,6 @@ table { border-spacing: 0; } -input, button { +button { border-style: none; } -- cgit From dd3766242dcdfd334f79367793d2b27bfcc36eb6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 19:52:27 -0700 Subject: Adjust dimensions of popup.html and app bar to match --- ui/app/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 0f26f8add..7f844560c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -121,7 +121,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '38px', + height: '11%', position: 'relative', zIndex: 12, }, -- cgit From b15575b4530d4c1830af0471e9fb5bc1ee689ee3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 20:02:42 -0700 Subject: Remove old header space --- ui/app/app.js | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7f844560c..4d70f9df9 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,17 +172,6 @@ App.prototype.renderAppBar = function () { ]), ]), - // extra app-header space - - // h('.app-header', { - // style: { - // visibility: props.isUnlocked ? 'visible' : 'none', - // background: '#EFEFEF', // $gallery - // height: '38px', - // position: 'relative', - // zIndex: 12, - // }, - // }) ]) ) } -- cgit From ca1a4b309676c3d10473acf4869b398d4ed50fb7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 20:42:12 -0700 Subject: Add layout for main container elements --- ui/app/app.js | 20 ++++++++------------ ui/app/main-container.js | 41 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 ui/app/main-container.js (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 4d70f9df9..4f877bc51 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,7 @@ const NewKeyChainScreen = require('./new-keychain') // unlock const UnlockScreen = require('./unlock') // accounts -const AccountDetailScreen = require('./account-detail') +const MainContainer = require('./main-container') const SendTransactionScreen = require('./send') const ConfirmTxScreen = require('./conf-tx') // notice @@ -90,13 +90,7 @@ App.prototype.render = function () { }), // panel content - h('.app-primary' + (transForward ? '.from-right' : '.from-left'), { - style: { - maxWidth: '850px', - }, - }, [ - this.renderPrimary(), - ]), + this.renderPrimary(), ]) ) } @@ -121,7 +115,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '11%', + height: '11vh', position: 'relative', zIndex: 12, }, @@ -132,6 +126,7 @@ App.prototype.renderAppBar = function () { display: 'flex', flexDirection: 'row', alignItems: 'center', + marginBottom: '1.8em', }, }, [ // mini logo @@ -156,6 +151,7 @@ App.prototype.renderAppBar = function () { display: 'flex', flexDirection: 'row', alignItems: 'center', + marginBottom: '1.8em', }, }, [ // Network Indicator @@ -419,8 +415,8 @@ App.prototype.renderPrimary = function () { switch (props.currentView.name) { case 'accountDetail': - log.debug('rendering account detail screen') - return h(AccountDetailScreen, {key: 'account-detail'}) + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) case 'sendTransaction': log.debug('rendering send tx screen') @@ -488,7 +484,7 @@ App.prototype.renderPrimary = function () { default: log.debug('rendering default, account detail screen') - return h(AccountDetailScreen, {key: 'account-detail'}) + return h(MainContainer, {key: 'account-detail'}) } } diff --git a/ui/app/main-container.js b/ui/app/main-container.js new file mode 100644 index 000000000..ca68ba6b0 --- /dev/null +++ b/ui/app/main-container.js @@ -0,0 +1,41 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = MainContainer + +inherits(MainContainer, Component) +function MainContainer () { + Component.call(this) +} + +MainContainer.prototype.render = function () { + console.log("rendering MainContainer..."); + return h('div.flex-row', { + style: { + position: 'absolute', + marginTop: '6vh', + width: '98%', + zIndex: 20, + } + }, [ + h('div.wallet-view', { + style: { + flexGrow: 1, + height: '82vh', + background: 'blue', + } + }, [ + ]), + + h('div.tx-view', { + style: { + flexGrow: 2, + height: '82vh', + background: 'green', + } + }, [ + ]), + ]) +} + -- cgit From cbd53d4601f1af5aa4337e86ea8875606406e803 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:25:32 -0700 Subject: Add containers for wallet view and dropdown UI --- ui/app/components/wallet-view.js | 81 ++++++++++++++++++++++++++++++++++++++++ ui/app/main-container.js | 6 +-- 2 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/wallet-view.js (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js new file mode 100644 index 000000000..fed227d6b --- /dev/null +++ b/ui/app/components/wallet-view.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('./identicon') +const AccountDropdowns = require('./account-dropdowns').AccountDropdowns + +module.exports = connect(mapStateToProps)(WalletView) + +function mapStateToProps (state) { + return { + network: state.metamask.network, + } +} + + +inherits(WalletView, Component) +function WalletView () { + Component.call(this) +} + +const noop = () => {} + +WalletView.prototype.render = function () { + const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' + const { network } = this.props + + return h('div.wallet-view.flex-column', { + style: { + flexGrow: 1, + height: '82vh', + background: '#FAFAFA', + } + }, [ + + h('div.flex-row.flex-center', { + style: { + // marginLeft: '5px', + // marginRight: '5px', + // marginTop: '10px', + // alignItems: 'center', + } + }, [ + + h('.identicon-wrapper.select-none', [ + h(Identicon, { + diameter: 24, + address: selected, + }), + ]), + + h('span', { + style: { + fontSize: '1.5em', + marginLeft: '5px', + } + }, [ + 'Account 1' + ]), + + h( + AccountDropdowns, + { + style: { + marginRight: '8px', + marginLeft: 'auto', + cursor: 'pointer', + }, + selected, + network, + identities: {}, + }, + ), + + ]) + + // wallet display 1 + // token display 1 + + ]) +} diff --git a/ui/app/main-container.js b/ui/app/main-container.js index ca68ba6b0..c1f7db0d8 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const WalletView = require('./components/wallet-view') module.exports = MainContainer @@ -19,11 +20,10 @@ MainContainer.prototype.render = function () { zIndex: 20, } }, [ - h('div.wallet-view', { + h(WalletView, { style: { flexGrow: 1, height: '82vh', - background: 'blue', } }, [ ]), @@ -32,7 +32,7 @@ MainContainer.prototype.render = function () { style: { flexGrow: 2, height: '82vh', - background: 'green', + background: '#FFFFFF', } }, [ ]), -- cgit From 4cdfd00f58082a26b8835a7c17ed4c964ec24c9e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:35:27 -0700 Subject: Add box shadow to main container --- ui/app/main-container.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app') diff --git a/ui/app/main-container.js b/ui/app/main-container.js index c1f7db0d8..f64009539 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -18,6 +18,7 @@ MainContainer.prototype.render = function () { marginTop: '6vh', width: '98%', zIndex: 20, + boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', } }, [ h(WalletView, { -- cgit From ddbf5613b3b7cf7b7b637f33cac87f5bbe69e7a7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:35:41 -0700 Subject: Add note for later on isolating components --- ui/app/components/wallet-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index fed227d6b..3a08705be 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -67,7 +67,7 @@ WalletView.prototype.render = function () { cursor: 'pointer', }, selected, - network, + network, // TODO: this prop could be in the account dropdown container identities: {}, }, ), -- cgit From 0ca50dfb1b990dadc702b178fad7e6434b71167a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 21:53:13 -0700 Subject: Center account name and dropdowns --- ui/app/components/wallet-view.js | 9 ++++----- ui/app/main-container.js | 6 +++--- 2 files changed, 7 insertions(+), 8 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3a08705be..f425ec3d1 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -35,10 +35,9 @@ WalletView.prototype.render = function () { h('div.flex-row.flex-center', { style: { - // marginLeft: '5px', - // marginRight: '5px', - // marginTop: '10px', - // alignItems: 'center', + marginLeft: '35px', + marginRight: '35px', + marginTop: '35px', } }, [ @@ -52,7 +51,7 @@ WalletView.prototype.render = function () { h('span', { style: { fontSize: '1.5em', - marginLeft: '5px', + marginLeft: '10px', // TODO: switch all units for this component to em } }, [ 'Account 1' diff --git a/ui/app/main-container.js b/ui/app/main-container.js index f64009539..f891402ac 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -23,15 +23,15 @@ MainContainer.prototype.render = function () { }, [ h(WalletView, { style: { - flexGrow: 1, - height: '82vh', + // width: '33.33%', + // height: '82vh', } }, [ ]), h('div.tx-view', { style: { - flexGrow: 2, + width: '66.66%', height: '82vh', background: '#FFFFFF', } -- cgit From 610d6da8aee2c32bb142b1ff93f6a0a685adf46c Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:10:59 -0700 Subject: Add hyperscript for wallet display component --- ui/app/components/wallet-view.js | 52 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 48 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index f425ec3d1..c06c4133b 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -29,10 +29,11 @@ WalletView.prototype.render = function () { style: { flexGrow: 1, height: '82vh', - background: '#FAFAFA', + background: '#FAFAFA', // TODO: add to reusable colors } }, [ + // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { marginLeft: '35px', @@ -71,10 +72,53 @@ WalletView.prototype.render = function () { }, ), - ]) + ]), - // wallet display 1 - // token display 1 + // TODO: Separate component: wallet contents + h('div.flex-column', { + style: { + marginLeft: '35px', + marginTop: '15px', + alignItems: 'flex-start', + } + }, [ + + h('span', { + style: { + fontSize: '1.1em', + }, + }, 'Wallet'), + + h('span', { + style: { + fontSize: '1.8em', + margin: '10px 0px', + }, + }, '1001.124 ETH'), + + h('span', { + style: { + fontSize: '1.3em', + }, + }, '$300,000.00 USD'), + + h('div', { + style: { + position: 'absolute', + marginLeft: '-35px', + height: '6em', + width: '4px', + background: '#D8D8D8', // TODO: add to resuable colors + } + }, [ + ]) + ]), + + // Buy Buttons + + + + // Wallet contents ]) } -- cgit From 7d4927c975554b091d72f6c24e7dd9e824f32548 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:25:20 -0700 Subject: Add layout for Buy and Send buttons --- ui/app/components/wallet-view.js | 45 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index c06c4133b..b61b53447 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -115,7 +115,50 @@ WalletView.prototype.render = function () { ]), // Buy Buttons - + // for index.css + // + // TODO: move into a class + // div.wallet-btn { + // border: 1px solid rgb(91, 93, 103); + // border-radius: 2px; + // height: 30px; + // width: 75px; + // font-size: 0.8em; + // text-align: center; + // line-height: 25px; + // } + + h('div.flex-row', { + style: { + marginLeft: '35px', + marginTop: '10px', + } + }, [ + h('div', { + style: { + border: '1px solid rgb(91, 93, 103)', + borderRadius: '2px', + height: '30px', + width: '75px', + fontSize: '0.8em', + textAlign: 'center', + lineHeight: '25px', + } + }, 'BUY'), + h('div.wallet-btn', { + style: { + border: '1px solid rgb(91, 93, 103)', + borderRadius: '2px', + height: '30px', + width: '75px', + fontSize: '0.8em', + textAlign: 'center', + lineHeight: '25px', + // spacing... + marginLeft: '15px', + } + }, 'SEND'), + ]), // Wallet contents -- cgit From 0c1aea97c74e6ac0c263a654510faca73a2dc949 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 30 Jul 2017 22:30:55 -0700 Subject: Isolate wallet-content-display component --- ui/app/components/wallet-content-display.js | 54 +++++++++++++++++++++++++++++ ui/app/components/wallet-view.js | 10 ++++-- 2 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 ui/app/components/wallet-content-display.js (limited to 'ui/app') diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js new file mode 100644 index 000000000..f1db09ec8 --- /dev/null +++ b/ui/app/components/wallet-content-display.js @@ -0,0 +1,54 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = WalletContentDisplay + +inherits(WalletContentDisplay, Component) +function WalletContentDisplay () { + Component.call(this) +} + +WalletContentDisplay.prototype.render = function () { + const { title, amount, fiatValue, active } = this.props + + return h('div.flex-column', { + style: { + marginLeft: '35px', + marginTop: '15px', + alignItems: 'flex-start', + } + }, [ + + h('span', { + style: { + fontSize: '1.1em', + }, + }, title), + + h('span', { + style: { + fontSize: '1.8em', + margin: '10px 0px', + }, + }, amount), + + h('span', { + style: { + fontSize: '1.3em', + }, + }, fiatValue), + + active && h('div', { + style: { + position: 'absolute', + marginLeft: '-35px', + height: '6em', + width: '4px', + background: '#D8D8D8', // TODO: add to resuable colors + } + }, [ + ]) + ]) +} + diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b61b53447..1c3f3b7f9 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns +const Content = require('./wallet-content-display') module.exports = connect(mapStateToProps)(WalletView) @@ -74,7 +75,7 @@ WalletView.prototype.render = function () { ]), - // TODO: Separate component: wallet contents + // TODO: Separate component: wallet-content-account h('div.flex-column', { style: { marginLeft: '35px', @@ -160,8 +161,13 @@ WalletView.prototype.render = function () { }, 'SEND'), ]), - // Wallet contents + h(Content, { + title: "Total Token Balance", + amount: "45.439 ETH", + fiatValue: "$13,000.00 USD", + active: false, + }) ]) } -- cgit From 3797b9921fc227c1bcf9681cffa73588cc7afb44 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 20:22:15 -0700 Subject: Adjust popup size to 545x450; refactor wallet view to fit --- ui/app/components/wallet-content-display.js | 14 +++--- ui/app/components/wallet-view.js | 74 ++++++++--------------------- 2 files changed, 28 insertions(+), 60 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js index f1db09ec8..3baffad69 100644 --- a/ui/app/components/wallet-content-display.js +++ b/ui/app/components/wallet-content-display.js @@ -10,13 +10,14 @@ function WalletContentDisplay () { } WalletContentDisplay.prototype.render = function () { - const { title, amount, fiatValue, active } = this.props + const { title, amount, fiatValue, active, style } = this.props + // TODO: Separate component: wallet-content-account return h('div.flex-column', { style: { - marginLeft: '35px', - marginTop: '15px', + marginLeft: '1.3em', alignItems: 'flex-start', + ...style, } }, [ @@ -29,7 +30,7 @@ WalletContentDisplay.prototype.render = function () { h('span', { style: { fontSize: '1.8em', - margin: '10px 0px', + margin: '0.4em 0em', }, }, amount), @@ -42,13 +43,14 @@ WalletContentDisplay.prototype.render = function () { active && h('div', { style: { position: 'absolute', - marginLeft: '-35px', + marginLeft: '-1.3em', height: '6em', - width: '4px', + width: '0.3em', background: '#D8D8D8', // TODO: add to resuable colors } }, [ ]) ]) + } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 1c3f3b7f9..0c5bd5c4f 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -37,9 +37,7 @@ WalletView.prototype.render = function () { // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { - marginLeft: '35px', - marginRight: '35px', - marginTop: '35px', + margin: '1.8em 1.3em', } }, [ @@ -52,8 +50,8 @@ WalletView.prototype.render = function () { h('span', { style: { - fontSize: '1.5em', - marginLeft: '10px', // TODO: switch all units for this component to em + fontSize: '1.2em', + marginLeft: '0.6em', // TODO: switch all units for this component to em } }, [ 'Account 1' @@ -63,7 +61,6 @@ WalletView.prototype.render = function () { AccountDropdowns, { style: { - marginRight: '8px', marginLeft: 'auto', cursor: 'pointer', }, @@ -75,49 +72,15 @@ WalletView.prototype.render = function () { ]), - // TODO: Separate component: wallet-content-account - h('div.flex-column', { - style: { - marginLeft: '35px', - marginTop: '15px', - alignItems: 'flex-start', - } - }, [ - - h('span', { - style: { - fontSize: '1.1em', - }, - }, 'Wallet'), - - h('span', { - style: { - fontSize: '1.8em', - margin: '10px 0px', - }, - }, '1001.124 ETH'), - - h('span', { - style: { - fontSize: '1.3em', - }, - }, '$300,000.00 USD'), - - h('div', { - style: { - position: 'absolute', - marginLeft: '-35px', - height: '6em', - width: '4px', - background: '#D8D8D8', // TODO: add to resuable colors - } - }, [ - ]) - ]), + h(Content, { + title: 'Wallet', + amount: '1001.124 ETH', + fiatValue: '$300,000.00 USD', + active: true, + }), // Buy Buttons // for index.css - // // TODO: move into a class // div.wallet-btn { // border: 1px solid rgb(91, 93, 103); @@ -131,32 +94,32 @@ WalletView.prototype.render = function () { h('div.flex-row', { style: { - marginLeft: '35px', - marginTop: '10px', + marginLeft: '1.3em', + marginTop: '0.8em', } }, [ h('div', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '30px', - width: '75px', + height: '28px', + width: '70px', fontSize: '0.8em', textAlign: 'center', lineHeight: '25px', + marginLeft: '.6em', } }, 'BUY'), h('div.wallet-btn', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '30px', - width: '75px', + height: '28px', + width: '70px', fontSize: '0.8em', textAlign: 'center', lineHeight: '25px', - // spacing... - marginLeft: '15px', + marginLeft: '.6em', } }, 'SEND'), ]), @@ -167,6 +130,9 @@ WalletView.prototype.render = function () { amount: "45.439 ETH", fiatValue: "$13,000.00 USD", active: false, + style: { + marginTop: '1.3em', + } }) ]) -- cgit From 2d5c3394f493868a2eb5706e8b42127252c9b746 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 20:46:56 -0700 Subject: Use DIN OT in wallet view --- ui/app/css/fonts.css | 16 +++++++++++----- ui/app/main-container.js | 3 ++- 2 files changed, 13 insertions(+), 6 deletions(-) (limited to 'ui/app') diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css index 3b9f581b9..2afaa26e1 100644 --- a/ui/app/css/fonts.css +++ b/ui/app/css/fonts.css @@ -8,7 +8,6 @@ font-weight: normal; font-style: normal; font-size: 'small'; - } @font-face { @@ -23,14 +22,21 @@ font-family: 'Montserrat Light'; src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); - font-weight: normal; - font-style: normal; + font-weight: normal; + font-style: normal; } @font-face { font-family: 'Montserrat UltraLight'; src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); - font-weight: normal; - font-style: normal; + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'DIN OT'; + src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype'); + font-weight: normal; + font-style: normal; } diff --git a/ui/app/main-container.js b/ui/app/main-container.js index f891402ac..cc61860b6 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -11,7 +11,7 @@ function MainContainer () { } MainContainer.prototype.render = function () { - console.log("rendering MainContainer..."); + return h('div.flex-row', { style: { position: 'absolute', @@ -19,6 +19,7 @@ MainContainer.prototype.render = function () { width: '98%', zIndex: 20, boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', + fontFamily: 'DIN OT', } }, [ h(WalletView, { -- cgit From 92bd783e0c61e05772cc494a386bb5f21e9dbbb3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 20:54:04 -0700 Subject: Adjust button styles to left align with wallet text --- ui/app/components/wallet-view.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 0c5bd5c4f..e61346290 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -102,23 +102,20 @@ WalletView.prototype.render = function () { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '28px', - width: '70px', + height: '20px', + width: '50px', fontSize: '0.8em', textAlign: 'center', - lineHeight: '25px', - marginLeft: '.6em', } }, 'BUY'), h('div.wallet-btn', { style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', - height: '28px', - width: '70px', + height: '20px', + width: '50px', fontSize: '0.8em', textAlign: 'center', - lineHeight: '25px', marginLeft: '.6em', } }, 'SEND'), -- cgit From c876428044c8e6eec300ceeb0d7ab0c44e68f8d3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:16:07 -0700 Subject: Add TxView, use width percentages instead of flex-grow for layout --- ui/app/components/tx-view.js | 53 ++++++++++++++++++++++++++++++++++++++++ ui/app/components/wallet-view.js | 2 +- ui/app/main-container.js | 11 ++++++--- 3 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 ui/app/components/tx-view.js (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js new file mode 100644 index 000000000..b10589035 --- /dev/null +++ b/ui/app/components/tx-view.js @@ -0,0 +1,53 @@ +const Component = require('react').Component +const connect = require('react-redux').connect +const h = require('react-hyperscript') +const inherits = require('util').inherits +// const Identicon = require('./identicon') +// const AccountDropdowns = require('./account-dropdowns').AccountDropdowns +// const Content = require('./wallet-content-display') + +module.exports = connect()(TxView) + +// function mapStateToProps (state) { +// return { +// network: state.metamask.network, +// } +// } + +inherits(TxView, Component) +function TxView () { + Component.call(this) +} + +TxView.prototype.render = function () { + return h('div.tx-view.flex-column', { + style: { + width: '66.666%', + height: '82vh', + background: '#FFFFFF', + } + }, [ + h('div.flex-row', { + }, [ + // tab + h('div.flex-column', { + + }, [ + h('div', {}, 'Transactions'), + h('div', { + style: { + height: '0.5em', + color: 'black', + width: '100%', + } + }) + ]), + + // tab2 + ]) + ]) + // column + // tab row + // divider + // item +} diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index e61346290..b8ea633db 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -28,7 +28,7 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column', { style: { - flexGrow: 1, + width: '33.333%', height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors } diff --git a/ui/app/main-container.js b/ui/app/main-container.js index cc61860b6..88028f8eb 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -2,6 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const WalletView = require('./components/wallet-view') +const TxView = require('./components/tx-view') module.exports = MainContainer @@ -20,6 +21,7 @@ MainContainer.prototype.render = function () { zIndex: 20, boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', fontFamily: 'DIN OT', + display: 'flex', } }, [ h(WalletView, { @@ -30,11 +32,12 @@ MainContainer.prototype.render = function () { }, [ ]), - h('div.tx-view', { + h(TxView, { style: { - width: '66.66%', - height: '82vh', - background: '#FFFFFF', + // flexGrow: 2 + // width: '66.66%', + // height: '82vh', + // background: '#FFFFFF', } }, [ ]), -- cgit From c7ace5b23d911512495edbd4f0ecb8e0190bc537 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:27:37 -0700 Subject: Add hyperscript for tx-view tabs --- ui/app/components/tx-view.js | 36 +++++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b10589035..06ee3bfc6 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -13,6 +13,15 @@ module.exports = connect()(TxView) // network: state.metamask.network, // } // } +// +const contentDivider = h('div', { + style: { + marginLeft: '1.3em', + marginRight: '1.3em', + height:'1px', + background:'#E7E7E7', // TODO: make custom color + }, +}) inherits(TxView, Component) function TxView () { @@ -28,23 +37,32 @@ TxView.prototype.render = function () { } }, [ h('div.flex-row', { + style: { + margin: '1.8em 1.3em', + } }, [ - // tab - h('div.flex-column', { + // tx-view-tab.js + h('div.flex-row', { }, [ - h('div', {}, 'Transactions'), + h('div', { style: { - height: '0.5em', - color: 'black', - width: '100%', + borderBottom: '0.07em solid black', + paddingBottom: '0.015em', } - }) - ]), + }, 'TRANSACTIONS'), + + h('div', { + style: { + marginLeft: '2em', + } + }, 'TOKENS'), - // tab2 + ]), ]) + + h('') ]) // column // tab row -- cgit From ce06fbd36debac144b4f4bf1d3948b35332e9c41 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 21:34:37 -0700 Subject: Add tx-view content divider component --- ui/app/components/tx-view.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 06ee3bfc6..1bc828c20 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -13,7 +13,7 @@ module.exports = connect()(TxView) // network: state.metamask.network, // } // } -// + const contentDivider = h('div', { style: { marginLeft: '1.3em', @@ -38,7 +38,7 @@ TxView.prototype.render = function () { }, [ h('div.flex-row', { style: { - margin: '1.8em 1.3em', + margin: '1.8em 1.3em 0.8em 1.3em', } }, [ @@ -55,14 +55,15 @@ TxView.prototype.render = function () { h('div', { style: { - marginLeft: '2em', + marginLeft: '1.25em', } }, 'TOKENS'), ]), - ]) + ]), + + contentDivider, - h('') ]) // column // tab row -- cgit From caab0b61ccb20a19fd97d4177698e9675d0b5451 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 22:00:18 -0700 Subject: Add rough layout for tx list items --- ui/app/components/tx-view.js | 60 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 1bc828c20..c32e9edcb 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -64,9 +64,69 @@ TxView.prototype.render = function () { contentDivider, + this.renderTransactionListItem(), + + contentDivider, + + this.renderTransactionListItem(), + + contentDivider, + ]) // column // tab row // divider // item } + +TxView.prototype.renderTransactionListItem = function () { + return h('div.flex-column', { + style: { + alignItems: 'stretch', + margin: '0.6em 1.3em 0.6em 1.3em', + } + }, [ + + h('div', { + style: { + flexGrow: 1, + marginTop: '0.3em', + } + }, 'Jul 01, 2017'), + + h('div.flex-row', { + style: { + alignItems: 'stretch', + } + }, [ + + h('div', { + style: { + flexGrow: 1, + } + }, 'icon'), + + h('div', { + style: { + flexGrow: 3, + } + }, 'Hash'), + + h('div', { + style: { + flexGrow: 5, + } + }, 'Status'), + + h('div', { + style: { + flexGrow: 2, + } + }, 'Details'), + + ]) + + ]) +} + + -- cgit From a7fc5126502a9c69aaa727178997ea4ed703c2d6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 23:07:58 -0700 Subject: Implement mobile-friendly responsive layout with flex wrap --- ui/app/app.js | 4 +++- ui/app/components/tx-view.js | 6 +++++- ui/app/components/wallet-view.js | 5 ++++- ui/app/main-container.js | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 4f877bc51..021ef5f27 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -73,7 +73,9 @@ App.prototype.render = function () { h('.flex-column.full-height', { style: { // Windows was showing a vertical scroll bar: - overflow: 'hidden', + overflowX: 'hidden', + // TODO: check with dev who committed L75, see if this still happens, and whether auto is enough + // overflowY: 'auto', position: 'relative', alignItems: 'center', }, diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c32e9edcb..bcd30e6d8 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -31,7 +31,11 @@ function TxView () { TxView.prototype.render = function () { return h('div.tx-view.flex-column', { style: { - width: '66.666%', + // width: '66.666%', + flexGrow: 2, + flexShrink: 0, + flexBasis: '230px', // .666*345 + // flexBasis: '400px', height: '82vh', background: '#FFFFFF', } diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index b8ea633db..60c2cb5c6 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -28,7 +28,10 @@ WalletView.prototype.render = function () { return h('div.wallet-view.flex-column', { style: { - width: '33.333%', + // width: '33.333%', + flexGrow: 1, + flexShrink: 0, + flexBasis: '230px', // .333*345 height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors } diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 88028f8eb..ae62a0e0c 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -13,7 +13,7 @@ function MainContainer () { MainContainer.prototype.render = function () { - return h('div.flex-row', { + return h('div', { style: { position: 'absolute', marginTop: '6vh', @@ -22,6 +22,9 @@ MainContainer.prototype.render = function () { boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', fontFamily: 'DIN OT', display: 'flex', + flexWrap: 'wrap', + alignItems: 'stretch', + overflowY: 'scroll', } }, [ h(WalletView, { -- cgit From 6f4bee45997862b3ca52785b9d62489969f070f5 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 31 Jul 2017 23:21:11 -0700 Subject: Hook up send button to Send Token screen --- ui/app/components/wallet-view.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 60c2cb5c6..091a5cd7c 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -5,8 +5,9 @@ const inherits = require('util').inherits const Identicon = require('./identicon') const AccountDropdowns = require('./account-dropdowns').AccountDropdowns const Content = require('./wallet-content-display') +const actions = require('../actions') -module.exports = connect(mapStateToProps)(WalletView) +module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { return { @@ -14,6 +15,12 @@ function mapStateToProps (state) { } } +function mapDispatchToProps (dispatch) { + return { + showSendPage: () => {dispatch(actions.showSendPage())}, + } +} + inherits(WalletView, Component) function WalletView () { @@ -112,6 +119,10 @@ WalletView.prototype.render = function () { } }, 'BUY'), h('div.wallet-btn', { + onClick: () => { + console.log("SHOW"); + this.props.showSendPage(); + }, style: { border: '1px solid rgb(91, 93, 103)', borderRadius: '2px', -- cgit From 41c585c796a9049c2413036e7b23bf07330daa82 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 12:18:29 -0700 Subject: Make wallet view visible iff vw above 575px --- ui/app/components/wallet-view.js | 2 +- ui/app/css/index.css | 24 +++++++++++++++++++++++- ui/app/css/lib.css | 1 - ui/app/main-container.js | 3 +-- 4 files changed, 25 insertions(+), 5 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 091a5cd7c..97c881483 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -33,7 +33,7 @@ WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' const { network } = this.props - return h('div.wallet-view.flex-column', { + return h('div.wallet-view.flex-column.lap-visible', { style: { // width: '33.333%', flexGrow: 1, diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 3c397dcff..b027792fb 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -718,5 +718,27 @@ div.message-container > div:first-child { } .pop-hover:hover { - transform: scale(1.1); + transform: scale(1.1); +} + +@media screen and (min-width: 576px) { + .lap-visible { + display: none; + } + + .phone-visible { + display: flex; + } + +} + +@media screen and (max-width: 575px) { + .lap-visible { + display: flex; + } + + .phone-visible { + display: none; + } + } diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 98570859a..b0ca958a2 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -270,4 +270,3 @@ hr.horizontal-line { margin-top: 20px; color: red; } - diff --git a/ui/app/main-container.js b/ui/app/main-container.js index ae62a0e0c..592f331b5 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -27,10 +27,9 @@ MainContainer.prototype.render = function () { overflowY: 'scroll', } }, [ + h(WalletView, { style: { - // width: '33.33%', - // height: '82vh', } }, [ ]), -- cgit From 22b03c62e650182951dce25a5ce9de982782a7fa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 12:29:07 -0700 Subject: Add burger icon and phone-visible media queries --- ui/app/components/tx-view.js | 5 +++++ ui/app/css/index.css | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index bcd30e6d8..c5c6484cc 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -40,6 +40,11 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ + + h('div.phone-visible.fa.fa-bars', { + + }, []), + h('div.flex-row', { style: { margin: '1.8em 1.3em 0.8em 1.3em', diff --git a/ui/app/css/index.css b/ui/app/css/index.css index b027792fb..9e63c9e55 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -723,22 +723,22 @@ div.message-container > div:first-child { @media screen and (min-width: 576px) { .lap-visible { - display: none; + display: flex; } .phone-visible { - display: flex; + display: none; } } @media screen and (max-width: 575px) { .lap-visible { - display: flex; + display: none; } .phone-visible { - display: none; + display: flex; } } -- cgit From 7767f9f7ad7321d88a0b738d2c272961cc1ce286 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 13:03:36 -0700 Subject: Hook up responsive sidebar --- ui/app/actions.js | 3 +++ ui/app/components/wallet-view.js | 4 ++-- ui/app/main-container.js | 12 +++++++++++- ui/app/reducers/app.js | 11 +++++++++++ 4 files changed, 27 insertions(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 0a9d347aa..0083543b4 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -5,6 +5,9 @@ var actions = { GO_HOME: 'GO_HOME', goHome: goHome, + // sidebar state + SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN', + SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE', // menu state getNetworkStatus: 'getNetworkStatus', // transition state diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 97c881483..63335dd93 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -31,9 +31,9 @@ const noop = () => {} WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' - const { network } = this.props + const { network, responsiveDisplayClassname } = this.props - return h('div.wallet-view.flex-column.lap-visible', { + return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { // width: '33.333%', flexGrow: 1, diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 592f331b5..fb768c386 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -3,6 +3,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const WalletView = require('./components/wallet-view') const TxView = require('./components/tx-view') +const SlideoutMenu = require('react-burger-menu').slide module.exports = MainContainer @@ -28,9 +29,18 @@ MainContainer.prototype.render = function () { } }, [ + h(SlideoutMenu, { + isOpen: true, + }, [ + h(WalletView, { + responsiveDisplayClassname: '.phone-visible' + }), + ]), + h(WalletView, { style: { - } + }, + responsiveDisplayClassname: '.lap-visible', }, [ ]), diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 2fcc9bfe0..bf1de4577 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -36,6 +36,7 @@ function reduceApp (state, action) { var appState = extend({ shouldClose: false, menuOpen: false, + sidebarOpen: false, currentView: seedWords ? seedConfView : defaultView, accountDetail: { subview: 'transactions', @@ -46,6 +47,16 @@ function reduceApp (state, action) { }, state.appState) switch (action.type) { + // sidebar methods + case actions.SIDEBAR_OPEN: + return extend(appState, { + sidebarOpen: true, + }) + + case actions.SIDEBAR_CLOSE: + return extend(appState, { + sidebarOpen: false, + }) // transition methods -- cgit From dfa10763e36f745d82fb62adc4ac42773d266da4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 13:32:02 -0700 Subject: Integrate slideout menu with tx view --- ui/app/actions.js | 15 +++++++++++++++ ui/app/app.js | 1 + ui/app/components/tx-view.js | 36 +++++++++++++++++++++++++++++------- ui/app/main-container.js | 10 +--------- 4 files changed, 46 insertions(+), 16 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 0083543b4..d3d6c165e 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -8,6 +8,8 @@ var actions = { // sidebar state SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN', SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE', + showSidebar: showSidebar, + hideSidebar: hideSidebar, // menu state getNetworkStatus: 'getNetworkStatus', // transition state @@ -763,6 +765,19 @@ function useEtherscanProvider () { } } +function showSidebar () { + return { + type: actions.SIDEBAR_OPEN, + } +} + +function hideSidebar () { + return { + type: actions.SIDEBAR_CLOSE, + } +} + + function showLoadingIndication (message) { return { type: actions.SHOW_LOADING, diff --git a/ui/app/app.js b/ui/app/app.js index 021ef5f27..2a07b57d3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -39,6 +39,7 @@ function App () { Component.call(this) } function mapStateToProps (state) { return { // state from plugin + sidebarOpen: state.appState.sidebarOpen, isLoading: state.appState.isLoading, loadingMessage: state.appState.loadingMessage, noActiveNotices: state.metamask.noActiveNotices, diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index c5c6484cc..b72abb084 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -2,17 +2,29 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits +const actions = require('../actions') +// slideout menu +const SlideoutMenu = require('react-burger-menu').slide +const WalletView = require('./wallet-view') + // const Identicon = require('./identicon') // const AccountDropdowns = require('./account-dropdowns').AccountDropdowns // const Content = require('./wallet-content-display') -module.exports = connect()(TxView) +module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) + +function mapStateToProps (state) { + return { + sidebarOpen: state.appState.sidebarOpen, + } +} -// function mapStateToProps (state) { -// return { -// network: state.metamask.network, -// } -// } +function mapDispatchToProps (dispatch) { + return { + showSidebar: () => {dispatch(actions.showSidebar())}, + hideSidebar: () => {dispatch(actions.hideSidebar())}, + } +} const contentDivider = h('div', { style: { @@ -40,9 +52,19 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ + // slideout - move to separate render func + h(SlideoutMenu, { + isOpen: this.props.sidebarOpen, + }, [ + h(WalletView, { + responsiveDisplayClassname: '.phone-visible' + }), + ]), h('div.phone-visible.fa.fa-bars', { - + onClick: () => { + this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() + } }, []), h('div.flex-row', { diff --git a/ui/app/main-container.js b/ui/app/main-container.js index fb768c386..870b3e7f0 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -1,8 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const WalletView = require('./components/wallet-view') const TxView = require('./components/tx-view') +const WalletView = require('./components/wallet-view') const SlideoutMenu = require('react-burger-menu').slide module.exports = MainContainer @@ -29,14 +29,6 @@ MainContainer.prototype.render = function () { } }, [ - h(SlideoutMenu, { - isOpen: true, - }, [ - h(WalletView, { - responsiveDisplayClassname: '.phone-visible' - }), - ]), - h(WalletView, { style: { }, -- cgit From 9ebdc343aa32c36bdff9debcecc3c75485939e2a Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 14:17:58 -0700 Subject: Implement custom sidebar, with close button --- ui/app/app.js | 68 +++++++++++++++++++++++++++++++++++++++- ui/app/components/tx-view.js | 13 ++------ ui/app/components/wallet-view.js | 14 +++++++-- 3 files changed, 82 insertions(+), 13 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 2a07b57d3..7cf000d76 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -15,6 +15,11 @@ const ConfirmTxScreen = require('./conf-tx') // notice const NoticeScreen = require('./components/notice') const generateLostAccountsNotice = require('../lib/lost-accounts-notice') + +// slideout menu +const WalletView = require('./components/wallet-view') +const SlideoutMenu = require('react-burger-menu').slide + // other views const ConfigScreen = require('./config') const AddTokenScreen = require('./add-token') @@ -63,7 +68,7 @@ function mapStateToProps (state) { App.prototype.render = function () { var props = this.props - const { isLoading, loadingMessage, transForward, network } = props + const { isLoading, loadingMessage, transForward, network, sidebarOpen } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null @@ -82,8 +87,23 @@ App.prototype.render = function () { }, }, [ + // app bar this.renderAppBar(), + + // slideout - move to separate render func + this.renderSidebar(), + // h('div.phone-visible', {} ,[ + // h(SlideoutMenu, { + // isOpen: false, + // }, [ + // h(WalletView, { + // responsiveDisplayClassname: '.phone-visible', + // }), + // ]), + // ]) + + // network dropdown this.renderNetworkDropdown(), // this.renderDropdown(), @@ -98,6 +118,52 @@ App.prototype.render = function () { ) } +App.prototype.renderSidebar = function() { + if (!this.props.sidebarOpen) { + return null; + } + + return h('div.phone-visible', {}, [ + // content + h(WalletView, { + responsiveDisplayClassname: '.phone-visible', + style: { + zIndex: 26, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + transition: 'transform 0.3s ease-out', + willChange: 'transform', + transform: 'translateX(0%)', + overflowY: 'auto', + boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', + width: '85%', + height: '100%', + }, + }), + + // overlay + h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) + ]) +} + App.prototype.renderAppBar = function () { if (window.METAMASK_UI_TYPE === 'notification') { return null diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index b72abb084..2aaa32395 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -52,20 +52,13 @@ TxView.prototype.render = function () { background: '#FFFFFF', } }, [ - // slideout - move to separate render func - h(SlideoutMenu, { - isOpen: this.props.sidebarOpen, - }, [ - h(WalletView, { - responsiveDisplayClassname: '.phone-visible' - }), - ]), - h('div.phone-visible.fa.fa-bars', { onClick: () => { + console.log("click received") this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar() } - }, []), + }, [ + ]), h('div.flex-row', { style: { diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 63335dd93..2a626a930 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -12,16 +12,17 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) function mapStateToProps (state) { return { network: state.metamask.network, + sidebarOpen: state.appState.sidebarOpen, } } function mapDispatchToProps (dispatch) { return { showSendPage: () => {dispatch(actions.showSendPage())}, + hideSidebar: () => {dispatch(actions.hideSidebar())}, } } - inherits(WalletView, Component) function WalletView () { Component.call(this) @@ -31,7 +32,7 @@ const noop = () => {} WalletView.prototype.render = function () { const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' - const { network, responsiveDisplayClassname } = this.props + const { network, responsiveDisplayClassname, style } = this.props return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { style: { @@ -41,9 +42,18 @@ WalletView.prototype.render = function () { flexBasis: '230px', // .333*345 height: '82vh', background: '#FAFAFA', // TODO: add to reusable colors + ...style, } }, [ + h('div.phone-visible.fa.fa-bars', { + onClick: () => { + console.log("click received-inwalletview") + this.props.hideSidebar() + } + }, [ + ]), + // TODO: Separate component: wallet account details h('div.flex-row.flex-center', { style: { -- cgit From 84aba21ae9f00d5d82d8087de6938fa9526bd3d4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 14:19:13 -0700 Subject: Add notes for overlay click action --- ui/app/app.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7cf000d76..3279e0333 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -147,6 +147,7 @@ App.prototype.renderSidebar = function() { }), // overlay + // TODO: add onClick for overlay to close sidebar h('div', { style: { zIndex: 25, -- cgit From 8a39ef03c298f846171173c38912d3386d688af2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 17:49:04 -0700 Subject: Hook up css animation --- ui/app/app.js | 109 ++++++++++++++++++++++++++++----------------- ui/app/css/transitions.css | 5 +++ 2 files changed, 73 insertions(+), 41 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 3279e0333..9bda4966d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -35,6 +35,7 @@ const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') +const ReactCSSTransitionGroup = require('react-addons-css-transition-group') module.exports = connect(mapStateToProps)(App) @@ -119,49 +120,75 @@ App.prototype.render = function () { } App.prototype.renderSidebar = function() { - if (!this.props.sidebarOpen) { - return null; - } + // if (!this.props.sidebarOpen) { + // return null; + // } - return h('div.phone-visible', {}, [ - // content - h(WalletView, { - responsiveDisplayClassname: '.phone-visible', - style: { - zIndex: 26, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'transform 0.3s ease-out', - willChange: 'transform', - transform: 'translateX(0%)', - overflowY: 'auto', - boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', - width: '85%', - height: '100%', - }, - }), - - // overlay - // TODO: add onClick for overlay to close sidebar - h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', - backgroundColor: 'rgba(0, 0, 0, 0.3)', + return h('div', { + }, [ + h('style', ` + .sidebar-enter { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 500ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 500ms ease-in-out; + transform: translateX(0%); } - }, []) + .sidebar-leave.sidebar-leave-active { + transition: transform 500ms ease-in-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 500, + transitionLeaveTimeout: 500, + }, [ + // content + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: { + zIndex: 26, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'transform 1s ease-in', + willChange: 'transform', + // transform: 'translateX(300px)', + overflowY: 'auto', + boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', + width: '85%', + height: '100%', + }, + }) : undefined, + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) : undefined, + ]) ]) } diff --git a/ui/app/css/transitions.css b/ui/app/css/transitions.css index 393a944f9..5f9f31ed7 100644 --- a/ui/app/css/transitions.css +++ b/ui/app/css/transitions.css @@ -22,6 +22,11 @@ transition: transform 300ms ease-in; } +.sidebar.from-left { + transform: translateX(-320px); + transition: transform 300ms ease-in; +} + /* loader transitions */ .loader-enter, .loader-leave-active { opacity: 0.0; -- cgit From c312f341199b8d05e7e78c4203d7953bdf5a184e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 17:50:27 -0700 Subject: Move overlay out of transition area --- ui/app/app.js | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 9bda4966d..8552282ad 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -172,23 +172,24 @@ App.prototype.renderSidebar = function() { }, }) : undefined, - // overlay - // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div', { - style: { - zIndex: 25, - position: 'fixed', - top: '6%', - left: '0px', - right: '0px', - bottom: '0px', - opacity: '1', - visibility: 'visible', - // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', - backgroundColor: 'rgba(0, 0, 0, 0.3)', - } - }, []) : undefined, - ]) + ]), + + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div', { + style: { + zIndex: 25, + position: 'fixed', + top: '6%', + left: '0px', + right: '0px', + bottom: '0px', + opacity: '1', + visibility: 'visible', + // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', + backgroundColor: 'rgba(0, 0, 0, 0.3)', + } + }, []) : undefined, ]) } -- cgit From 49e37137042ba2f23dd48db92365f468f9d59e13 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 18:24:48 -0700 Subject: Cleanup send, move send token into separate func to make room for send ETH --- ui/app/app.js | 1 + ui/app/send.js | 254 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 220 insertions(+), 35 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 8552282ad..53801ed52 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -202,6 +202,7 @@ App.prototype.renderAppBar = function () { const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false + console.log("___rendering app header;;;") return ( h('.full-width', { diff --git a/ui/app/send.js b/ui/app/send.js index de9e64ad1..ab527019f 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -61,7 +61,6 @@ SendTransactionScreen.prototype.render = function () { h('div.flex-column.flex-grow', { style: { - // overflow: 'scroll', minWidth: '355px', // TODO: maxWidth TBD, use home.html }, }, [ @@ -87,10 +86,6 @@ SendTransactionScreen.prototype.render = function () { }), ]), - // - // Required Fields - // - h('h3.flex-center', { style: { marginTop: '-18px', @@ -213,10 +208,6 @@ SendTransactionScreen.prototype.render = function () { ]), - // - // Optional Fields - // - h('section.flex-column.flex-center', { style: { marginBottom: '10px', @@ -241,32 +232,6 @@ SendTransactionScreen.prototype.render = function () { }, }), ]), - - // h('h3.flex-center.text-transform-uppercase', { - // style: { - // background: '#EBEBEB', - // color: '#AEAEAE', - // marginTop: '16px', - // marginBottom: '16px', - // }, - // }, [ - // 'Transaction Data (optional)', - // ]), - - // // 'data' field - // h('section.flex-column.flex-center', [ - // h('input.large-input', { - // name: 'txData', - // placeholder: '0x01234', - // style: { - // width: '100%', - // resize: 'none', - // }, - // dataset: { - // persistentFormId: 'tx-data', - // }, - // }), - // ]), ]), // Buttons underneath card @@ -290,7 +255,226 @@ SendTransactionScreen.prototype.render = function () { width: '8em', }, }, 'Cancel'), + ]), + ]) + + ) +} + +// WIP - hyperscript for renderSendToken - hook up later +SendTransactionScreen.prototype.renderSendToken = function () { + this.persistentFormParentId = 'send-tx-form' + + const props = this.props + const { + address, + account, + identity, + network, + identities, + addressBook, + conversionRate, + currentCurrency, + } = props + + return ( + + h('div.flex-column.flex-grow', { + style: { + minWidth: '355px', // TODO: maxWidth TBD, use home.html + }, + }, [ + + // Main Send token Card + h('div.send-screen.flex-column.flex-grow', { + style: { + marginLeft: '3.5%', + marginRight: '3.5%', + background: '#FFFFFF', // $background-white + boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)', + } + }, [ + h('section.flex-center.flex-row', { + style: { + zIndex: 15, // $token-icon-z-index + marginTop: '-35px', + } + }, [ + h(Identicon, { + address: ARAGON, + diameter: 76, + }), + ]), + + h('h3.flex-center', { + style: { + marginTop: '-18px', + fontSize: '16px', + }, + }, [ + 'Send Tokens', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + }, + }, [ + 'Send Tokens to anyone with an Ethereum account', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + marginTop: '2px', + fontSize: '12px', + }, + }, [ + 'Your Aragon Token Balance is:', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '36px', + marginTop: '8px', + }, + }, [ + '2.34', + ]), + + h('h3.flex-center', { + style: { + textAlign: 'center', + fontSize: '12px', + marginTop: '4px', + }, + }, [ + 'ANT', + ]), + + // error message + props.error && h('span.error.flex-center', props.error), + + // 'to' field + h('section.flex-row.flex-center', { + style: { + fontSize: '12px', + }, + }, [ + h(EnsInput, { + name: 'address', + placeholder: 'Recipient Address', + onChange: this.recipientDidChange.bind(this), + network, + identities, + addressBook, + }), + ]), + + // 'amount' and send button + h('section.flex-column.flex-center', [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Amount']), + h('span', { style: {} }, ['Token <> USD']), + ]), + + h('input.large-input', { + name: 'amount', + placeholder: '0', + type: 'number', + style: { + marginRight: '6px', + fontSize: '12px', + }, + dataset: { + persistentFormId: 'tx-amount', + }, + }), + + ]), + + h('section.flex-column.flex-center', [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'space-between', + } + },[ + h('span', { style: {} }, ['Gas Fee:']), + h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), + ]), + + h('input.large-input', { + name: 'Gas Fee', + placeholder: '0', + type: 'number', + style: { + fontSize: '12px', + marginRight: '6px', + }, + // dataset: { + // persistentFormId: 'tx-amount', + // }, + }), + + ]), + + h('section.flex-column.flex-center', { + style: { + marginBottom: '10px', + }, + }, [ + h('div.flex-row.flex-center', { + style: { + fontSize: '12px', + width: '100%', + justifyContent: 'flex-start', + } + },[ + h('span', { style: {} }, ['Transaction Memo (optional)']), + ]), + h('input.large-input', { + name: 'memo', + placeholder: '', + type: 'string', + style: { + marginRight: '6px', + }, + }), + ]), + ]), + + // Buttons underneath card + h('section.flex-column.flex-center', [ + + h('button.btn-light', { + onClick: this.onSubmit.bind(this), + style: { + marginTop: '8px', + width: '8em', + background: '#FFFFFF' + }, + }, 'Next'), + + h('button.btn-light', { + onClick: this.back.bind(this), + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, + }, 'Cancel'), ]), ]) -- cgit From 61b4b1f947230a8d5157fab27ee8ec82e0826e02 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:13:17 -0700 Subject: Ensure app-header is rendered in responsive layout --- ui/app/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 53801ed52..7a855813f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery - height: '11vh', + height: '12vh', + maxHeight: '60px', position: 'relative', zIndex: 12, }, -- cgit From dd4586ee84ea0e6a74ad4cd6b6f058169ddd9129 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:26:46 -0700 Subject: Adjust sidebar transition using @cjeria\'s feedback --- ui/app/app.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 7a855813f..21eb44b8b 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -128,27 +128,27 @@ App.prototype.renderSidebar = function() { }, [ h('style', ` .sidebar-enter { - transition: transform 500ms ease-in-out; + transition: transform 300ms ease-in-out; transform: translateX(-100%); } .sidebar-enter.sidebar-enter-active { - transition: transform 500ms ease-in-out; + transition: transform 300ms ease-in-out; transform: translateX(0%); } .sidebar-leave { - transition: transform 500ms ease-in-out; + transition: transform 200ms ease-out; transform: translateX(0%); } .sidebar-leave.sidebar-leave-active { - transition: transform 500ms ease-in-out; + transition: transform 200ms ease-out; transform: translateX(-100%); } `), h(ReactCSSTransitionGroup, { transitionName: 'sidebar', - transitionEnterTimeout: 500, - transitionLeaveTimeout: 500, + transitionEnterTimeout: 300, + transitionLeaveTimeout: 200, }, [ // content this.props.sidebarOpen ? h(WalletView, { @@ -162,9 +162,7 @@ App.prototype.renderSidebar = function() { bottom: '0px', opacity: '1', visibility: 'visible', - // transition: 'transform 1s ease-in', willChange: 'transform', - // transform: 'translateX(300px)', overflowY: 'auto', boxShadow: 'rgba(0, 0, 0, 0.15) 2px 2px 4px', width: '85%', @@ -186,7 +184,6 @@ App.prototype.renderSidebar = function() { bottom: '0px', opacity: '1', visibility: 'visible', - // transition: 'opacity 0.3s ease-out, visibility 0.3s ease-out', backgroundColor: 'rgba(0, 0, 0, 0.3)', } }, []) : undefined, @@ -202,7 +199,6 @@ App.prototype.renderAppBar = function () { const state = this.state || {} const isNetworkMenuOpen = state.isNetworkMenuOpen || false - console.log("___rendering app header;;;") return ( h('.full-width', { -- cgit From 41250f9769d3224e0b42821058cd6445fa7efaca Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 19:48:33 -0700 Subject: Adjust header spacing for 500px and 900px heights --- ui/app/app.js | 17 ++++------------- ui/app/main-container.js | 2 +- 2 files changed, 5 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/app.js b/ui/app/app.js index 21eb44b8b..19d80a728 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -88,21 +88,11 @@ App.prototype.render = function () { }, }, [ - // app bar this.renderAppBar(), - // slideout - move to separate render func + // sidebar this.renderSidebar(), - // h('div.phone-visible', {} ,[ - // h(SlideoutMenu, { - // isOpen: false, - // }, [ - // h(WalletView, { - // responsiveDisplayClassname: '.phone-visible', - // }), - // ]), - // ]) // network dropdown this.renderNetworkDropdown(), @@ -113,7 +103,7 @@ App.prototype.render = function () { loadingMessage: loadMessage, }), - // panel content + // content this.renderPrimary(), ]) ) @@ -202,7 +192,7 @@ App.prototype.renderAppBar = function () { return ( h('.full-width', { - height: '38px', + style: {} }, [ h('.app-header.flex-row.flex-space-between', { @@ -210,6 +200,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: '#EFEFEF', // $gallery + paddingTop: '1.5vh', height: '12vh', maxHeight: '60px', position: 'relative', diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 870b3e7f0..62a8bdb7b 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -17,7 +17,7 @@ MainContainer.prototype.render = function () { return h('div', { style: { position: 'absolute', - marginTop: '6vh', + marginTop: '35px', width: '98%', zIndex: 20, boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)', -- cgit From b70a399faa30c478ffffb5607cfe36001745adc7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 21:53:40 -0700 Subject: Isolate container component, add refactor notes --- ui/app/account-and-transaction-details.js | 39 +++++++++++++++++++++++++++++++ ui/app/main-container.js | 37 ++++++++++++++--------------- 2 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 ui/app/account-and-transaction-details.js (limited to 'ui/app') diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js new file mode 100644 index 000000000..9386b2314 --- /dev/null +++ b/ui/app/account-and-transaction-details.js @@ -0,0 +1,39 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +// Main Views +const TxView = require('./components/tx-view') +const WalletView = require('./components/wallet-view') + +module.exports = AccountAndTransactionDetails + +inherits(AccountAndTransactionDetails, Component) +function AccountAndTransactionDetails () { + Component.call(this) +} + +AccountAndTransactionDetails.prototype.render = function () { + console.log('atdR') + return h('div', { + style: { + display: 'flex', + flex: '1 0 auto', + }, + }, [ + // wallet + h(WalletView, { + style: { + }, + responsiveDisplayClassname: '.lap-visible', + }, [ + ]), + + // transaction + h(TxView, { + style: { + } + }, [ + ]), + ]) +} + diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 62a8bdb7b..5194c2343 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const TxView = require('./components/tx-view') const WalletView = require('./components/wallet-view') const SlideoutMenu = require('react-burger-menu').slide +const AccountAndTransactionDetails = require('./account-and-transaction-details') module.exports = MainContainer @@ -14,6 +15,22 @@ function MainContainer () { MainContainer.prototype.render = function () { + // 1. Fixing Mobile View: flush container + // media query for mobile view: + // position: absolute; + // margin-top: 35px; + // width: 100%; + // + // 2. Fix responsive sizing - smaller + // https://puu.sh/x0gDA/5ff3b734eb.png + // + // 3. summarize: + // switch statement goes inside MainContainer, + // or a method in renderPrimary + // - pass resulting h() to MainContainer + // - error checking in separate func + // - router in separate func + return h('div', { style: { position: 'absolute', @@ -27,24 +44,6 @@ MainContainer.prototype.render = function () { alignItems: 'stretch', overflowY: 'scroll', } - }, [ - - h(WalletView, { - style: { - }, - responsiveDisplayClassname: '.lap-visible', - }, [ - ]), - - h(TxView, { - style: { - // flexGrow: 2 - // width: '66.66%', - // height: '82vh', - // background: '#FFFFFF', - } - }, [ - ]), - ]) + }, [h(AccountAndTransactionDetails, {}, [])]) } -- cgit From ff7ba83a6c62abb42c0141d4cd5a53a7870a9199 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 2 Aug 2017 22:09:12 -0700 Subject: Add note for styling buttons --- ui/app/main-container.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app') diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 5194c2343..84d8c5435 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -30,6 +30,8 @@ MainContainer.prototype.render = function () { // - pass resulting h() to MainContainer // - error checking in separate func // - router in separate func + // + // 4. style all buttons as