TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1858 from sdtsui/NewUI

Browse Source 
UI Tweaks, Minor Bugfixes, and Dropdown Resizing
feature/default_network_editable
kumavis 7 years ago committed by GitHub
parent 24a13d116c 777eb865df
commit 17c9fd450f
7 changed files with 120 additions and 31 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ui/app/account-detail.js
  2. 57
      ui/app/app.js
  3. 74
      ui/app/components/account-dropdowns.js
  4. 5
      ui/app/components/dropdown.js
  5. 2
      ui/app/css/index.css
  6. 9
      ui/app/css/lib.css

2
ui/app/account-detail.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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/css/index.css
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save