aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorkumavis <kumavis@users.noreply.github.com>2017-08-04 11:59:47 +0800
committerGitHub <noreply@github.com>2017-08-04 11:59:47 +0800
commit17c9fd450f4c05ae39457abc8459d0353c07973b (patch)
tree31774d89b652aa6332f0c3fc6ba750af1592a1cf /ui
parent24a13d116ce484a834eea641a75bc4aa626c52c0 (diff)
parent777eb865df2d8dae15eb34589bdd47817aab8486 (diff)
downloadtangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar.gz
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar.bz2
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar.lz
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar.xz
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.tar.zst
tangerine-wallet-browser-17c9fd450f4c05ae39457abc8459d0353c07973b.zip
Merge pull request #1858 from sdtsui/NewUI
UI Tweaks, Minor Bugfixes, and Dropdown Resizing
Diffstat (limited to 'ui')
-rw-r--r--ui/app/account-detail.js2
-rw-r--r--ui/app/app.js57
-rw-r--r--ui/app/components/account-dropdowns.js74
-rw-r--r--ui/app/components/dropdown.js5
-rw-r--r--ui/app/components/notice.js2
-rw-r--r--ui/app/css/index.css2
-rw-r--r--ui/app/css/lib.css9
7 files changed, 120 insertions, 31 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 24561c32e..22a883096 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -128,6 +128,7 @@ AccountDetailScreen.prototype.render = function () {
selected,
network,
identities: props.identities,
+ enableAccountOptions: true,
},
),
]
@@ -152,7 +153,6 @@ AccountDetailScreen.prototype.render = function () {
fontSize: '13px',
fontFamily: 'Montserrat Light',
textRendering: 'geometricPrecision',
- marginTop: '10px',
marginBottom: '15px',
color: '#AEAEAE',
},
diff --git a/ui/app/app.js b/ui/app/app.js
index e23caa72b..0592496fc 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -30,6 +30,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 AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
module.exports = connect(mapStateToProps)(App)
@@ -37,6 +38,13 @@ inherits(App, Component)
function App () { Component.call(this) }
function mapStateToProps (state) {
+ const {
+ identities,
+ accounts,
+ address,
+ } = state.metamask
+ const selected = address || Object.keys(accounts)[0]
+
return {
// state from plugin
isLoading: state.appState.isLoading,
@@ -57,6 +65,10 @@ function mapStateToProps (state) {
lastUnreadNotice: state.metamask.lastUnreadNotice,
lostAccounts: state.metamask.lostAccounts,
frequentRpcList: state.metamask.frequentRpcList || [],
+
+ // state needed to get account dropdown temporarily rendering from app bar
+ identities,
+ selected,
}
}
@@ -169,17 +181,27 @@ App.prototype.renderAppBar = function () {
},
}, [
+ props.isUnlocked && h(AccountDropdowns, {
+ style: {},
+ enableAccountsSelector: true,
+ identities: this.props.identities,
+ selected: this.props.selected,
+ network: this.props.network,
+ }, []),
+
// hamburger
props.isUnlocked && h(SandwichExpando, {
+ className: 'sandwich-expando',
width: 16,
barHeight: 2,
padding: 0,
isOpen: state.isMainMenuOpen,
color: 'rgb(247,146,30)',
- onClick: (event) => {
- event.preventDefault()
+ onClick: () => {
event.stopPropagation()
- this.setState({ isMainMenuOpen: !state.isMainMenuOpen })
+ this.setState({
+ isMainMenuOpen: !state.isMainMenuOpen,
+ })
},
}),
]),
@@ -227,6 +249,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'main',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('mainnet')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.diamond'),
@@ -241,6 +266,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'ropsten',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('ropsten')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.red-dot'),
@@ -255,6 +283,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'kovan',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('kovan')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.hollow-diamond'),
@@ -269,6 +300,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'rinkeby',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setProviderType('rinkeby')),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('.menu-icon.golden-square'),
@@ -283,6 +317,9 @@ App.prototype.renderNetworkDropdown = function () {
key: 'default',
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => props.dispatch(actions.setDefaultRpcTarget()),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -299,6 +336,9 @@ App.prototype.renderNetworkDropdown = function () {
{
closeMenu: () => this.setState({ isNetworkMenuOpen: !isOpen }),
onClick: () => this.props.dispatch(actions.showConfigPage()),
+ style: {
+ fontSize: '18px',
+ },
},
[
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
@@ -318,9 +358,13 @@ App.prototype.renderDropdown = function () {
isOpen: isOpen,
zIndex: 11,
onClickOutside: (event) => {
- const { classList } = event.target
- const isNotToggleElement = !classList.contains('sandwich-expando')
- if (isNotToggleElement) {
+ const classList = event.target.classList
+ const parentClassList = event.target.parentElement.classList
+
+ const isToggleElement = classList.contains('sandwich-expando') ||
+ parentClassList.contains('sandwich-expando')
+
+ if (isOpen && !isToggleElement) {
this.setState({ isMainMenuOpen: false })
}
},
@@ -579,7 +623,6 @@ App.prototype.renderCommonRpc = function (rpcList, provider) {
if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
return null
} else {
-
return h(
DropdownMenuItem,
{
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 79e6cff59..da92619e1 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -17,14 +17,14 @@ class AccountDropdowns extends Component {
accountSelectorActive: false,
optionsMenuActive: false,
}
- this.accountSelectorToggleClassName = 'fa-angle-down'
+ this.accountSelectorToggleClassName = 'accounts-selector'
this.optionsMenuToggleClassName = 'fa-ellipsis-h'
}
renderAccounts () {
const { identities, selected } = this.props
- return Object.keys(identities).map((key) => {
+ return Object.keys(identities).map((key, index) => {
const identity = identities[key]
const isSelected = identity.address === selected
@@ -35,17 +35,24 @@ class AccountDropdowns extends Component {
onClick: () => {
this.props.actions.showAccountDetail(identity.address)
},
+ style: {
+ marginTop: index === 0 ? '5px' : '',
+ fontSize: '24px',
+ },
},
[
h(
Identicon,
{
address: identity.address,
- diameter: 16,
+ diameter: 32,
+ style: {
+ marginLeft: '10px',
+ },
},
),
- h('span', { style: { marginLeft: '10px' } }, identity.name || ''),
- h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, identity.name || ''),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
]
)
})
@@ -59,10 +66,15 @@ class AccountDropdowns extends Component {
Dropdown,
{
style: {
- marginLeft: '-125px',
+ marginLeft: '-238px',
+ marginTop: '38px',
minWidth: '180px',
overflowY: 'auto',
maxHeight: '300px',
+ width: '300px',
+ },
+ innerStyle: {
+ padding: '8px 25px',
},
isOpen: accountSelectorActive,
onClickOutside: (event) => {
@@ -85,10 +97,13 @@ class AccountDropdowns extends Component {
h(
Identicon,
{
- diameter: 16,
+ style: {
+ marginLeft: '10px',
+ },
+ diameter: 32,
},
),
- h('span', { style: { marginLeft: '10px' } }, 'Create Account'),
+ h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
],
),
h(
@@ -101,10 +116,19 @@ class AccountDropdowns extends Component {
h(
Identicon,
{
- diameter: 16,
+ style: {
+ marginLeft: '10px',
+ },
+ diameter: 32,
},
),
- h('span', { style: { marginLeft: '10px' } }, 'Import Account'),
+ h('span', {
+ style: {
+ marginLeft: '20px',
+ fontSize: '24px',
+ marginBottom: '5px',
+ },
+ }, 'Import Account'),
]
),
]
@@ -119,7 +143,7 @@ class AccountDropdowns extends Component {
Dropdown,
{
style: {
- marginLeft: '-162px',
+ marginLeft: '-215px',
minWidth: '180px',
},
isOpen: optionsMenuActive,
@@ -183,7 +207,7 @@ class AccountDropdowns extends Component {
}
render () {
- const { style } = this.props
+ const { style, enableAccountsSelector, enableAccountOptions } = this.props
const { optionsMenuActive, accountSelectorActive } = this.state
return h(
@@ -192,10 +216,18 @@ class AccountDropdowns extends Component {
style: style,
},
[
- h(
- 'i.fa.fa-angle-down',
+ enableAccountsSelector && h(
+ // 'i.fa.fa-angle-down',
+ 'div.cursor-pointer.color-orange.accounts-selector',
{
- style: {},
+ style: {
+ // fontSize: '1.8em',
+ background: 'url(images/switch_acc.svg) white center center no-repeat',
+ height: '25px',
+ width: '25px',
+ transform: 'scale(0.75)',
+ marginRight: '3px',
+ },
onClick: (event) => {
event.stopPropagation()
this.setState({
@@ -206,10 +238,13 @@ class AccountDropdowns extends Component {
},
this.renderAccountSelector(),
),
- h(
+ enableAccountOptions && h(
'i.fa.fa-ellipsis-h',
{
- style: { 'marginLeft': '10px'},
+ style: {
+ marginRight: '0.5em',
+ fontSize: '1.8em',
+ },
onClick: (event) => {
event.stopPropagation()
this.setState({
@@ -225,6 +260,11 @@ class AccountDropdowns extends Component {
}
}
+AccountDropdowns.defaultProps = {
+ enableAccountsSelector: false,
+ enableAccountOptions: false,
+}
+
AccountDropdowns.propTypes = {
identities: PropTypes.objectOf(PropTypes.object),
selected: PropTypes.string,
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 759800fd6..b99e0aa9a 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -54,7 +54,7 @@ Dropdown.propTypes = {
class DropdownMenuItem extends Component {
render () {
- const { onClick, closeMenu, children } = this.props
+ const { onClick, closeMenu, children, style } = this.props
return h(
'li.dropdown-menu-item',
@@ -66,13 +66,14 @@ class DropdownMenuItem extends Component {
style: {
listStyle: 'none',
padding: '8px 0px 8px 0px',
- fontSize: '12px',
+ fontSize: '18px',
fontStyle: 'normal',
fontFamily: 'Montserrat Regular',
cursor: 'pointer',
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
+ ...style,
},
},
children
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 636e82ba1..c26505193 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -21,7 +21,7 @@ Notice.prototype.render = function () {
return (
h('.flex-column.flex-center.flex-grow', {
style: {
- width: '100%',
+ width: '100%',
},
}, [
h('h3.flex-center.text-transform-uppercase.terms-header', {
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index e9a70b3a2..49b432a1f 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -201,7 +201,7 @@ textarea.twelve-word-phrase {
}
.check {
- margin-left: 7px;
+ margin-left: 12px;
color: #F7861C;
flex: 1 0 auto;
display: flex;
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 98570859a..6fff4f56a 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -238,10 +238,15 @@ hr.horizontal-line {
.menu-icon {
display: inline-block;
- height: 9px;
- min-width: 9px;
+ height: 12px;
+ min-width: 12px;
margin: 13px;
}
+
+i.fa.fa-question-circle.fa-lg.menu-icon {
+ font-size: 18px;
+}
+
.ether-icon {
background: rgb(0, 163, 68);
border-radius: 20px;