From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:46:38 -0700 Subject: [PATCH] Hook up actions to EditAccountNameModal --- .../dropdowns/components/account-dropdowns.js | 10 ++- .../modals/account-details-modal.js | 28 +++--- ui/app/components/modals/buy-options-modal.js | 28 +++--- .../modals/edit-account-name-modal.js | 85 +++++++++---------- ui/app/components/modals/new-account-modal.js | 28 +++--- ui/app/css/itcss/components/buttons.scss | 10 +-- ui/app/css/itcss/components/modal.scss | 70 +++++++++++---- ui/app/css/itcss/trumps/index.scss | 2 +- 8 files changed, 150 insertions(+), 111 deletions(-) diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index 043789b6c..2854ec95d 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -115,7 +115,7 @@ class AccountDropdowns extends Component { fontSize: '16px', }, onClick: () => { - actions.showNewAccountModal() + actions.showEditAccountModal(identity) }, }, [ 'Edit', @@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => { showAccountDetailModal: () => { dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) }, + showEditAccountModal: (identity) => { + dispatch(actions.showModal({ + name: 'EDIT_ACCOUNT_NAME', + identity, + })) + }, showNewAccountModal: () => { - dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' })) + dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) }, addNewAccount: () => dispatch(actions.addNewAccount()), showImportPage: () => dispatch(actions.showImportPage()), diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 45f54908f..38d08314b 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa // It utilizes modal styles AccountDetailsModal.prototype.render = function () { return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.buy-modal-content.transfers-subview', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { + h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { style: {}, }, [ - h('div.modal-content-title', { + h('div.buy-modal-content-title', { style: {}, }, 'Account Details Modal'), h('div', {}, 'How would you like to buy Ether?'), ]), - h('div.modal-content-options.flex-column.flex-center', {}, [ + h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - h('div.modal-content-option', { + h('div.buy-modal-content-option', { onClick: () => {}, }, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-title', {}, 'Coinbase'), + h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Shapeshift'), + h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), @@ -67,7 +67,7 @@ AccountDetailsModal.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), ]) ]) } diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js index 170ac96b8..76e0da4f1 100644 --- a/ui/app/components/modals/buy-options-modal.js +++ b/ui/app/components/modals/buy-options-modal.js @@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) // It utilizes modal styles BuyOptions.prototype.render = function () { return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.buy-modal-content.transfers-subview', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { + h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { style: {}, }, [ - h('div.modal-content-title', { + h('div.buy-modal-content-title', { style: {}, }, 'Transfers'), h('div', {}, 'How would you like to buy Ether?'), ]), - h('div.modal-content-options.flex-column.flex-center', {}, [ + h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - h('div.modal-content-option', { + h('div.buy-modal-content-option', { onClick: () => { const { toCoinbase, address } = this.props toCoinbase(address) }, }, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-title', {}, 'Coinbase'), + h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Shapeshift'), + h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), @@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), ]) ]) } diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js index 5d2d2e120..0128fe412 100644 --- a/ui/app/components/modals/edit-account-name-modal.js +++ b/ui/app/components/modals/edit-account-name-modal.js @@ -3,78 +3,73 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../actions') +const { getSelectedAccount } = require('../../selectors') function mapStateToProps (state) { return { - network: state.metamask.network, - address: state.metamask.selectedAddress, + selectedAccount: getSelectedAccount(state), + identity: state.appState.modal.modalState.identity, } } function mapDispatchToProps (dispatch) { return { - toCoinbase: (address) => { - dispatch(actions.buyEth({ network: '1', address, amount: 0 })) - }, hideModal: () => { dispatch(actions.hideModal()) - } + }, + saveAccountLabel: (account, label) => { + dispatch(actions.saveAccountLabel(account, label)) + }, } } -inherits(BuyOptions, Component) -function BuyOptions () { +inherits(EditAccountNameModal, Component) +function EditAccountNameModal () { Component.call(this) + this.state = { + inputText: '', + } } -module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) +module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal) -// BuyOptions is currently meant to be rendered inside +// EditAccountNameModal is currently meant to be rendered inside // It is the only component in this codebase that does so // It utilizes modal styles -BuyOptions.prototype.render = function () { +EditAccountNameModal.prototype.render = function () { + const { hideModal, saveAccountLabel, identity } = this.props + return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.flex-column.edit-account-name-modal-content', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.modal-content-title', { - style: {}, - }, 'Edit Account Name Modal'), - h('div', {}, 'How would you like to buy Ether?'), - ]), - h('div.modal-content-options.flex-column.flex-center', {}, [ - - h('div.modal-content-option', { - onClick: () => { - const { toCoinbase, address } = this.props - toCoinbase(address) - }, - }, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), - ]), + h('div.edit-account-name-modal-cancel', {}, [ + h('i.fa.fa-times'), + ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), - ]), + h('div.edit-account-name-modal-title', { + }, ['Edit Account Name']), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), + h('input.edit-account-name-modal-input', { + placeholder: identity.name, + onChange: (event) => { + this.setState({ inputText: event.target.value }) + }, + value: this.state.inputText, + }, []), + h('button.btn-clear.edit-account-name-modal-save-button', { + onClick: () => { + if (this.state.inputText.length !== 0) { + saveAccountLabel(identity.address, this.state.inputText) + hideModal() + } + }, + disabled: this.state.inputText.length === 0, + }, [ + 'SAVE', ]), - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), ]) ]) } diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index e4b3ca328..c55d69964 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) // It utilizes modal styles BuyOptions.prototype.render = function () { return h('div', {}, [ - h('div.modal-content.transfers-subview', { + h('div.buy-modal-content.transfers-subview', { }, [ - h('div.modal-content-title-wrapper.flex-column.flex-center', { + h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { style: {}, }, [ - h('div.modal-content-title', { + h('div.buy-modal-content-title', { style: {}, }, 'New Account Modal'), h('div', {}, 'How would you like to buy Ether?'), ]), - h('div.modal-content-options.flex-column.flex-center', {}, [ + h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - h('div.modal-content-option', { + h('div.buy-modal-content-option', { onClick: () => { const { toCoinbase, address } = this.props toCoinbase(address) }, }, [ - h('div.modal-content-option-title', {}, 'Coinbase'), - h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div.buy-modal-content-option-title', {}, 'Coinbase'), + h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Shapeshift'), - h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Shapeshift'), + h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'), ]), - h('div.modal-content-option', {}, [ - h('div.modal-content-option-title', {}, 'Direct Deposit'), - h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), + h('div.buy-modal-content-option', {}, [ + h('div.buy-modal-content-option-title', {}, 'Direct Deposit'), + h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), @@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () { background: 'white', }, onClick: () => { this.props.hideModal() }, - }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')), + }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), ]) ]) } diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 9916db488..c304e07ab 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -27,11 +27,11 @@ button.btn-clear { // 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[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; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 8bf7cd44f..c8bd1fb85 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,4 +1,5 @@ -.modal-content { +// Buy Modal +.buy-modal-content { flex-direction: column; align-items: center; justify-content: center; @@ -7,29 +8,29 @@ } @media screen and (max-width: 575px) { - .modal-content-title-wrapper { + .buy-modal-content-title-wrapper { justify-content: space-around; width: 100%; height: 100px; } - .modal-content-title { + .buy-modal-content-title { font-size: 26px; margin-top: 15px; } - .modal-content-options { + .buy-modal-content-options { flex-direction: column; padding: 5% 33%; } - .modal-content-footer { + .buy-modal-content-footer { text-transform: uppercase; width: 100%; height: 50px; } - div.modal-content-option { + div.buy-modal-content-option { display: flex; flex-direction: column; width: 80vw; @@ -41,40 +42,40 @@ padding: 0% 7%; justify-content: space-around; - div.modal-content-option-title { + div.buy-modal-content-option-title { font-size: 20px; } - div.modal-content-option-subtitle { + div.buy-modal-content-option-subtitle { font-size: 16px; } } } @media screen and (min-width: 576px) { - .modal-content-title-wrapper { + .buy-modal-content-title-wrapper { justify-content: space-around; width: 100%; height: 110px; } - .modal-content-title { + .buy-modal-content-title { font-size: 26px; margin-top: 15px; } - .modal-content-footer { + .buy-modal-content-footer { text-transform: uppercase; width: 100%; height: 50px; } - .modal-content-options { + .buy-modal-content-options { flex-direction: row; margin: 20px 0; } - div.modal-content-option { + div.buy-modal-content-option { display: flex; flex-direction: column; width: 20vw; @@ -85,7 +86,7 @@ margin: 0 .5vw; justify-content: space-around; - div.modal-content-option-title { + div.buy-modal-content-option-title { font-size: 20px; @media screen and (max-width: 679px) { @@ -97,7 +98,7 @@ } } - div.modal-content-option-subtitle { + div.buy-modal-content-option-subtitle { font-size: 16px; padding: 0 10px; height: 25%; @@ -121,8 +122,45 @@ } } - div.modal-content-footer { + div.buy-modal-content-footer { margin-top: 8vh; } } } + +// Edit Account Name Modal +.edit-account-name-modal-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; +} + +.edit-account-name-modal-cancel { + position: absolute; + top: 12px; + right: 20px; + font-size: 25px; +} + +.edit-account-name-modal-title { + margin: 15px; +} + +.edit-account-name-modal-save-button { + width: 33%; + height: 45px; + margin: 15px; + font-weight: bold; + margin-top: 25px; +} + +.edit-account-name-modal-input { + width: 90%; + height: 50px; + text-align: left; + margin: 10px; + padding: 10px; + font-size: 18px; +} diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss index e09642aa8..d9a4202a4 100644 --- a/ui/app/css/itcss/trumps/index.scss +++ b/ui/app/css/itcss/trumps/index.scss @@ -65,7 +65,7 @@ i.fa.fa-question-circle.fa-lg.menu-icon { // See components/modal.scss /* stylelint-disable */ -#modal-content-footer-text { +#buy-modal-content-footer-text { font-family: 'DIN OT'; font-size: 16px; }