aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorFrankie <frankie.pangilinan@consensys.net>2016-07-01 02:15:32 +0800
committerFrankie <frankie.pangilinan@consensys.net>2016-07-01 02:15:32 +0800
commit5252504e3f1b8437d6152861f06ee490f723276e (patch)
tree2556f1423c147ff98143b910782eca484f192513 /ui/app
parent4433618e95b8d5638bf890e746a6bc7c3793ba80 (diff)
downloadtangerine-wallet-browser-5252504e3f1b8437d6152861f06ee490f723276e.tar.gz
tangerine-wallet-browser-5252504e3f1b8437d6152861f06ee490f723276e.tar.zst
tangerine-wallet-browser-5252504e3f1b8437d6152861f06ee490f723276e.zip
WIP: Working on new layout
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/account-detail.js170
-rw-r--r--ui/app/components/eth-balance.js18
-rw-r--r--ui/app/css/index.css2
-rw-r--r--ui/app/util.js6
4 files changed, 114 insertions, 82 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 02a807dbb..da9fc47fe 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -44,115 +44,132 @@ AccountDetailScreen.prototype.render = function () {
return (
- h('.account-detail-section.flex-column.flex-grow', [
+ h('.account-detail-section', [
// identicon, label, balance, etc
- h('.account-data-subsection.flex-column.flex-grow', {
+ h('.account-data-subsection', {
style: {
margin: '0 20px',
},
}, [
// header - identicon + nav
- h('.flex-row.flex-center', {
+ h('div', {
style: {
marginTop: 28,
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'flex-start',
},
}, [
- // large identicon
- h('.identicon-wrapper.flex-column.flex-center.select-none', [
+ // large identicon and addresses
+ h('.identicon-wrapper.select-none', [
h(Identicon, {
diameter: 62,
address: selected,
}),
]),
- ]),
-
- h('.flex-center', {
- style: {
- height: '62px',
- paddingTop: '8px',
- },
- }, [
- h(EditableLabel, {
- textValue: identity ? identity.name : '',
- state: {
- isEditingLabel: false,
- },
- saveText: (text) => {
- props.dispatch(actions.saveAccountLabel(selected, text))
+ h('flex-column', {
+ style: {
+ lineHeight: '10px',
+ marginLeft: '15px',
},
}, [
+ h(EditableLabel, {
+ textValue: identity ? identity.name : '',
+ state: {
+ isEditingLabel: false,
+ },
+ saveText: (text) => {
+ props.dispatch(actions.saveAccountLabel(selected, text))
+ },
+ }, [
- // What is shown when not editing + edit text:
- h('label.editing-label', [h('.edit-text', 'edit')]),
- h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
- ]),
- ]),
-
- // address and getter actions
- h('.flex-row', {
- style: {
- marginBottom: 16,
- },
- }, [
-
- h('div', {
- style: {
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingTop: '3px',
- },
- }, ethUtil.toChecksumAddress(selected)),
+ // What is shown when not editing + edit text:
+ h('label.editing-label', [h('.edit-text', 'edit')]),
+ h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
+ ]),
+ h('.flex-row',{
+ style:{
+ width: '15em',
+ justifyContent: 'space-between',
+ alignItems: 'baseline',
+ }
+ },[
+ h('div', {
+ style: {
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ paddingTop: '3px',
+ width: '5em',
+ fontSize: 'smaller',
+ },
+ }, ethUtil.toChecksumAddress(selected)),
- h(CopyButton, {
- value: ethUtil.toChecksumAddress(selected),
- }),
- h(Tooltip, {
- title: 'Export Private Key',
- }, [
- h('div', {
+ h('.flex-row', {
+ style: {
+ justifyContent: 'flex-end',
+ },
+ }, [
+ h(CopyButton, {
+ value: ethUtil.toChecksumAddress(selected),
+ }),
+
+ h(Tooltip, {
+ title: 'Export Private Key',
+ }, [
+ h('div', {
+ style: {
+ margin: '5px',
+ },
+ }, [
+ h('img.cursor-pointer.color-orange', {
+ src: 'images/key-32.png',
+ onClick: () => this.requestAccountExport(selected),
+ style: {
+ margin: '0px 5px',
+ width: '20px',
+ height: '20px',
+ position: 'relative',
+ top: '3px',
+ right: '4px',
+ },
+ }),
+ ]),
+ ]),
+ ]),
+ ]),
+ h('.flex-row', {
style: {
- margin: '5px',
- },
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ }
}, [
- h('img.cursor-pointer.color-orange', {
- src: 'images/key-32.png',
- onClick: () => this.requestAccountExport(selected),
+
+ h(EtherBalance, {
+ value: account && account.balance,
style: {
- margin: '0px 5px',
- width: '20px',
- height: '20px',
- position: 'relative',
- top: '3px',
- right: '4px',
+ lineHeight: '7px',
},
}),
- ]),
- ]),
- ]),
+ h('button', {
+ onClick: () => props.dispatch(actions.showSendPage()),
+ style: {
+ margin: 10,
+ },
+ }, 'SEND'),
- // balance + send
- h('.flex-row.flex-space-between', [
+ ]),
- h(EtherBalance, {
- value: account && account.balance,
- style: {
- lineHeight: '50px',
- },
- }),
+ ]),
+ ]),
- h('button', {
- onClick: () => props.dispatch(actions.showSendPage()),
- style: {
- margin: 10,
- },
- }, 'SEND'),
+ // address and getter actions
- ]),
+ // balance + send
]),
@@ -214,4 +231,3 @@ AccountDetailScreen.prototype.transactionList = function () {
AccountDetailScreen.prototype.requestAccountExport = function () {
this.props.dispatch(actions.requestExportAccount())
}
-
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 710d4fc8b..279feba35 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -24,8 +24,24 @@ EthBalanceComponent.prototype.render = function () {
style: {
display: 'inline',
},
- }, value),
+ }, this.renderBalance(value)),
])
)
}
+
+EthBalanceComponent.prototype.renderBalance = function (value) {
+
+ if (value === 'None') return value
+
+ var balance = value[0]
+ var label = value[1]
+
+ return (
+ h('.flex-column',[
+ h('div', balance),
+ h('div', label)
+ ])
+ )
+
+}
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index fc10e56b6..27444ab6f 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -387,7 +387,7 @@ input.large-input {
}
.name-label{
- margin-bottom: 14px;
+
}
.edit-text {
height: 100%;
diff --git a/ui/app/util.js b/ui/app/util.js
index db12a1282..a88e659b4 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -105,14 +105,14 @@ function formatBalance (balance, decimalsToKeep) {
if (afterDecimal !== '0') {
var sigFigs = afterDecimal.match(/^0*(.{2})/) // default: grabs 2 most significant digits
if (sigFigs) { afterDecimal = sigFigs[0] }
- formatted = '0.' + afterDecimal + ' ETH'
+ formatted = ['0.' + afterDecimal, ' ETH']
}
} else {
- formatted = beforeDecimal + '.' + afterDecimal.slice(0, 3) + ' ETH'
+ formatted = [beforeDecimal + '.' + afterDecimal.slice(0, 3), ' ETH']
}
} else {
afterDecimal += Array(decimalsToKeep).join('0')
- formatted = beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep) + ' ETH'
+ formatted = [beforeDecimal + '.' + afterDecimal.slice(0, decimalsToKeep), ' ETH']
}
return formatted
}