Merge pull request #1858 from sdtsui/NewUI

UI Tweaks, Minor Bugfixes, and Dropdown Resizing

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

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) => {
+            onClick: () => {
-              event.preventDefault()
               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 classList = event.target.classList
-      const isNotToggleElement = !classList.contains('sandwich-expando')
+      const parentClassList = event.target.parentElement.classList
-      if (isNotToggleElement) {
+
+      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,
         {

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: '20px', fontSize: '24px' } }, identity.name || ''),
-          h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null),
+          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(
+        enableAccountsSelector && h(
-          'i.fa.fa-angle-down',
+          // '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,

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

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;

ui/app/css/lib.css

@@ -238,10 +238,15 @@ hr.horizontal-line {
 
 .menu-icon {
   display: inline-block;
-  height: 9px;
+  height: 12px;
-  min-width: 9px;
+  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;