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

Merge pull request #1858 from sdtsui/NewUI

Browse Source 
UI Tweaks, Minor Bugfixes, and Dropdown Resizing
This commit is contained in:
kumavis 2017-08-03 20:59:47 -07:00 committed by GitHub
commit 17c9fd450f
7 changed files with 120 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/account-detail.js
View File

@ -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',
},

57
ui/app/app.js
View File

@ -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,
{

74
ui/app/components/account-dropdowns.js
View File

@ -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,

5
ui/app/components/dropdown.js
View File

@ -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

2
ui/app/components/notice.js
View File

@ -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', {

2
ui/app/css/index.css
View File

@ -201,7 +201,7 @@ textarea.twelve-word-phrase {
}
.check {
margin-left: 7px;
margin-left: 12px;
color: #F7861C;
flex: 1 0 auto;
display: flex;

9
ui/app/css/lib.css
View File

@ -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;