Merge branch 'NewUI' into feat/mm-ui-5-merged

6 files changed, 216 insertions, 27 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 2813f4752..b23600e9b 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.optionsMenuToggleClassName = 'fa-ellipsis-h';
+    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),
         ]
       )
     })
@@ -58,11 +65,17 @@ class AccountDropdowns extends Component {
     return h(
       Dropdown,
       {
+        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
         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 +98,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 +117,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 +144,7 @@ class AccountDropdowns extends Component {
       Dropdown,
       {
         style: {
-          marginLeft: '-162px',
+          marginLeft: '-215px',
           minWidth: '180px',
         },
         isOpen: optionsMenuActive,
@@ -149,6 +174,18 @@ class AccountDropdowns extends Component {
           {
             closeMenu: () => {},
             onClick: () => {
+              const { selected, identities } = this.props
+              var identity = identities[selected]
+              actions.showQrView(selected, identity ? identity.name : '')
+            },
+          },
+          'Show QR Code',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
               const { selected } = this.props
               const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
               copyToClipboard(checkSumAddress)
@@ -171,7 +208,7 @@ class AccountDropdowns extends Component {
   }
 
   render () {
-    const { style } = this.props
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
     const { optionsMenuActive, accountSelectorActive } = this.state
 
     return h(
@@ -180,10 +217,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({
@@ -194,10 +239,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({
@@ -213,6 +261,11 @@ class AccountDropdowns extends Component {
   }
 }
 
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
 AccountDropdowns.propTypes = {
   identities: PropTypes.objectOf(PropTypes.object),
   selected: PropTypes.string,
@@ -226,6 +279,7 @@ const mapDispatchToProps = (dispatch) => {
       showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
     },
   }
 }
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 394d878f7..330f73805 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -100,7 +100,7 @@ ExportAccountView.prototype.render = function () {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           webkitUserSelect: 'text',
-          width: '100%',
+          maxWidth: '275px',
         },
         onClick: function (event) {
           copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdown.js
index 759800fd6..34c7149ee 100644
--- a/ui/app/components/dropdown.js
+++ b/ui/app/components/dropdown.js
@@ -1,14 +1,14 @@
 const Component = require('react').Component
 const PropTypes = require('react').PropTypes
 const h = require('react-hyperscript')
-const MenuDroppo = require('menu-droppo')
+const MenuDroppo = require('./menu-droppo')
 const extend = require('xtend')
 
 const noop = () => {}
 
 class Dropdown extends Component {
   render () {
-    const { isOpen, onClickOutside, style, innerStyle, children } = this.props
+    const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
 
     const innerStyleDefaults = extend({
       borderRadius: '4px',
@@ -20,6 +20,7 @@ class Dropdown extends Component {
     return h(
       MenuDroppo,
       {
+        useCssTransition,
         isOpen,
         zIndex: 11,
         onClickOutside,
@@ -43,6 +44,7 @@ class Dropdown extends Component {
 Dropdown.defaultProps = {
   isOpen: false,
   onClick: noop,
+  useCssTransition: false,
 }
 
 Dropdown.propTypes = {
@@ -54,7 +56,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',
@@ -63,17 +65,17 @@ class DropdownMenuItem extends Component {
           onClick()
           closeMenu()
         },
-        style: {
+        style: Object.assign({
           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/menu-droppo.js b/ui/app/components/menu-droppo.js
new file mode 100644
index 000000000..66ab18954
--- /dev/null
+++ b/ui/app/components/menu-droppo.js
@@ -0,0 +1,130 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const findDOMNode = require('react-dom').findDOMNode
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+
+module.exports = MenuDroppoComponent
+
+
+inherits(MenuDroppoComponent, Component)
+function MenuDroppoComponent () {
+  Component.call(this)
+}
+
+MenuDroppoComponent.prototype.render = function () {
+  const speed = this.props.speed || '300ms'
+  const useCssTransition = this.props.useCssTransition
+  const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+  this.manageListeners()
+
+  let style = this.props.style || {}
+  if (!('position' in style)) {
+    style.position = 'fixed'
+  }
+  style.zIndex = zIndex
+
+  return (
+    h('.menu-droppo-container', {
+      style,
+    }, [
+      h('style', `
+        .menu-droppo-enter {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+
+        .menu-droppo-enter.menu-droppo-enter-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave.menu-droppo-leave-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+      `),
+
+      useCssTransition
+        ? h(ReactCSSTransitionGroup, {
+          className: 'css-transition-group',
+          transitionName: 'menu-droppo',
+          transitionEnterTimeout: parseInt(speed),
+          transitionLeaveTimeout: parseInt(speed),
+        }, this.renderPrimary())
+        : this.renderPrimary(),
+    ])
+  )
+}
+
+MenuDroppoComponent.prototype.renderPrimary = function () {
+  const isOpen = this.props.isOpen
+  if (!isOpen) {
+    return null
+  }
+
+  const innerStyle = this.props.innerStyle || {}
+
+  return (
+    h('.menu-droppo', {
+      key: 'menu-droppo-drawer',
+      style: innerStyle,
+    },
+    [ this.props.children ])
+  )
+}
+
+MenuDroppoComponent.prototype.manageListeners = function () {
+  const isOpen = this.props.isOpen
+  const onClickOutside = this.props.onClickOutside
+
+  if (isOpen) {
+    this.outsideClickHandler = onClickOutside
+  } else if (isOpen) {
+    this.outsideClickHandler = null
+  }
+}
+
+MenuDroppoComponent.prototype.componentDidMount = function () {
+  if (this && document.body) {
+    this.globalClickHandler = this.globalClickOccurred.bind(this)
+    document.body.addEventListener('click', this.globalClickHandler)
+    var container = findDOMNode(this)
+    this.container = container
+  }
+}
+
+MenuDroppoComponent.prototype.componentWillUnmount = function () {
+  if (this && document.body) {
+    document.body.removeEventListener('click', this.globalClickHandler)
+  }
+}
+
+MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
+  const target = event.target
+  const container = findDOMNode(this)
+
+  if (target !== container &&
+    !isDescendant(this.container, event.target) &&
+    this.outsideClickHandler) {
+    this.outsideClickHandler(event)
+  }
+}
+
+function isDescendant (parent, child) {
+  var node = child.parentNode
+  while (node !== null) {
+    if (node === parent) {
+      return true
+    }
+    node = node.parentNode
+  }
+
+  return false
+}
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index d9f0067cd..c26505193 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -19,7 +19,11 @@ Notice.prototype.render = function () {
   const disabled = state.disclaimerDisabled
 
   return (
-    h('.flex-column.flex-center.flex-grow', [
+    h('.flex-column.flex-center.flex-grow', {
+      style: {
+        width: '100%',
+      },
+    }, [
       h('h3.flex-center.text-transform-uppercase.terms-header', {
         style: {
           background: '#EBEBEB',
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 2bc6daae5..6b8e9e4dd 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -4,7 +4,6 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const actions = require('../actions')
 // slideout menu
-const SlideoutMenu = require('react-burger-menu').slide
 const WalletView = require('./wallet-view')
 
 const Identicon = require('./identicon')