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

updated account list based on new designs

Browse Source
This commit is contained in:
brunobar79 2018-07-17 18:53:37 -04:00
parent e89350b19f
commit cb97517b26
5 changed files with 91 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json
View File

@ -877,6 +877,12 @@
"selectAnAddress": {
"message": "Select an Address"
},
"selectAnAccount": {
"message": "Select an Account"
},
"selectAnAccountHelp": {
"message": "These are the accounts available in your hardware wallet. Select the one you’d like to use in MetaMask."
},
"sendTokensAnywhere": {
"message": "Send Tokens to anyone with an Ethereum account"
},

38
ui/app/components/pages/create-account/connect-hardware/account-list.js
View File

@ -8,16 +8,20 @@ class AccountList extends Component {
super(props)
}
renderHeader () {
return (
h('div.hw-connect', [
h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
])
)
}
renderAccounts () {
return h('div.hw-account-list', [
h('div.hw-account-list__title_wrapper', [
h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
h('div.hw-account-list__device', {}, ['Trezor - ETH']),
]),
this.props.accounts.map((a, i) => {
return h('div.hw-account-list__item', { key: a.address }, [
h('span.hw-account-list__item__index', a.index + 1),
h('div.hw-account-list__item__radio', [
h('input', {
type: 'radio',
@ -32,10 +36,12 @@ class AccountList extends Component {
{
htmlFor: `address-${i}`,
},
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`
),
[
h('span.hw-account-list__item__index', a.index + 1),
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
h('span.hw-account-list__item__balance', `${a.balance}`),
]),
]),
h('span.hw-account-list__item__balance', `${a.balance}`),
h(
'a.hw-account-list__item__link',
{
@ -71,9 +77,15 @@ class AccountList extends Component {
}
renderButtons () {
return h('div.new-account-create-form__buttons', {}, [
const disabled = this.props.selectedAccount === null
const buttonProps = {}
if (disabled) {
buttonProps.disabled = true
}
return h('div.new-account-connect-form__buttons', {}, [
h(
'button.btn-default.btn--large.new-account-create-form__button',
'button.btn-default.btn--large.new-account-connect-form__button',
{
onClick: this.props.onCancel.bind(this),
},
@ -81,9 +93,10 @@ class AccountList extends Component {
),
h(
`button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
`button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
{
onClick: this.props.onUnlockAccount.bind(this),
...buttonProps,
},
[this.context.t('unlock')]
),
@ -99,7 +112,8 @@ class AccountList extends Component {
}
render () {
return h('div', {}, [
return h('div.new-account-connect-form', {}, [
this.renderHeader(),
this.renderAccounts(),
this.renderPagination(),
this.renderButtons(),

2
ui/app/components/pages/create-account/connect-hardware/connect-screen.js
View File

@ -29,7 +29,7 @@ class ConnectScreen extends Component {
renderConnectScreen () {
return (
h('div', {}, [
h('div.new-account-connect-form', {}, [
h('div.hw-connect', [
h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),

2
ui/app/components/pages/create-account/connect-hardware/index.js
View File

@ -150,7 +150,7 @@ class ConnectHardwareForm extends Component {
}
render () {
return h('div.new-account-create-form', [
return h('div', [
this.renderError(),
this.renderContent(),
])

68
ui/app/css/itcss/components/new-account.scss
View File

@ -157,13 +157,14 @@
&__title {
padding-top: 10px;
font-weight: 500;
font-size: 18px;
}
&__msg {
font-size: 14px;
color: #9b9b9b;
margin-top: 15px;
margin-bottom: 15px;
margin-top: 10px;
margin-bottom: 20px;
}
&__link {
@ -242,12 +243,16 @@
&__item__index {
display: flex;
width: 28px;
width: 24px;
}
&__item__radio {
display: flex;
flex: 1;
input {
margin-right: 9px;
}
}
&__item__label {
@ -264,6 +269,7 @@
&__item__link {
display: flex;
margin-top: 3px;
}
&__item__link img {
@ -278,11 +284,55 @@
margin-top: 10px;
&__button {
height: 25px;
flex: initial;
min-width: 90px;
font-size: 12px;
height: 19px;
display: flex;
width: 47px;
color: #33a4e7;
font-size: 14px;
line-height: 19px;
border: none;
min-width: 46px;
margin-right: 0px;
margin-left: 16px;
padding: 0px;
}
}
.new-account-connect-form {
display: flex;
flex-flow: column;
align-items: center;
padding: 15px 30px 0;
&__buttons {
margin-top: 39px;
display: flex;
width: 100%;
justify-content: space-between;
}
&__button {
width: 150px;
min-width: initial;
}
&__button.btn-primary {
background-color: #259DE5;
}
&__button.btn-primary {
background-color: #259DE5;
color: #FFFFFF;
}
&__button.btn-primary--disabled {
cursor: not-allowed;
opacity: .5;
}
}
.hw-forget-device-container {
@ -337,8 +387,4 @@
width: 150px;
min-width: initial;
}
&__button.btn-primary--disabled {
cursor: 'not-allowed';
}
}