Merge pull request #312 from MetaMask/svg-notif

initial svg notifications

6 files changed, 67 insertions, 81 deletions

diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-list-item.js
index af3d0d347..b42de182e 100644
--- a/ui/app/accounts/account-panel.js
+++ b/ui/app/accounts/account-list-item.js
@@ -33,6 +33,7 @@ NewComponent.prototype.render = function () {
         this.pendingOrNot(),
         h(Identicon, {
           address: identity.address,
+          imageify: true,
         }),
       ]),
 
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
index 775df400b..f7ae5c53e 100644
--- a/ui/app/accounts/index.js
+++ b/ui/app/accounts/index.js
@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../actions')
 const valuesFor = require('../util').valuesFor
 const findDOMNode = require('react-dom').findDOMNode
-const AccountPanel = require('./account-panel')
+const AccountListItem = require('./account-list-item')
 
 module.exports = connect(mapStateToProps)(AccountsScreen)
 
@@ -74,7 +74,7 @@ AccountsScreen.prototype.render = function () {
               }
             })
 
-            return h(AccountPanel, {
+            return h(AccountListItem, {
               key: `acct-panel-${identity.address}`,
               identity,
               selectedAddress: this.props.selectedAddress,
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js
index 112b897d5..b98a8cb45 100644
--- a/ui/app/components/account-panel.js
+++ b/ui/app/components/account-panel.js
@@ -1,13 +1,13 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const Identicon = require('./identicon')
 const formatBalance = require('../util').formatBalance
 const addressSummary = require('../util').addressSummary
 
-const Panel = require('./panel')
-
 module.exports = AccountPanel
 
+
 inherits(AccountPanel, Component)
 function AccountPanel () {
   Component.call(this)
@@ -19,13 +19,8 @@ AccountPanel.prototype.render = function () {
   var account = state.account || {}
   var isFauceting = state.isFauceting
 
-  var panelOpts = {
+  var panelState = {
     key: `accountPanel${identity.address}`,
-    onClick: (event) => {
-      if (state.onShowDetail) {
-        state.onShowDetail(identity.address, event)
-      }
-    },
     identiconKey: identity.address,
     identiconLabel: identity.name,
     attributes: [
@@ -37,10 +32,41 @@ AccountPanel.prototype.render = function () {
     ],
   }
 
-  return h(Panel, panelOpts,
-  !state.onShowDetail ? null : h('.arrow-right.cursor-pointer', [
-    h('i.fa.fa-chevron-right.fa-lg'),
-  ]))
+  return (
+
+    h('.identity-panel.flex-row.flex-space-between', {
+      style: {
+        flex: '1 0 auto',
+        cursor: panelState.onClick ? 'pointer' : undefined,
+      },
+      onClick: panelState.onClick,
+    }, [
+
+      // account identicon
+      h('.identicon-wrapper.flex-column.select-none', [
+        h(Identicon, {
+          address: panelState.identiconKey,
+          imageify: !state.inlineIdenticons,
+        }),
+        h('span.font-small', panelState.identiconLabel),
+      ]),
+
+      // account address, balance
+      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
+
+        panelState.attributes.map((attr) => {
+          return h('.flex-row.flex-space-between', {
+            key: '' + Math.round(Math.random() * 1000000),
+          }, [
+            h('label.font-small.no-select', attr.key),
+            h('span.font-small', attr.value),
+          ])
+        }),
+      ]),
+
+    ])
+
+  )
 }
 
 function balanceOrFaucetingIndication (account, isFauceting) {
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 5fe07ce7a..c17bd5122 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -39,12 +39,9 @@ IdenticonComponent.prototype.componentDidMount = function () {
   if (!address) return
 
   var container = findDOMNode(this)
-
   var diameter = state.diameter || this.defaultDiameter
-  var dataUri = iconFactory.iconForAddress(address, diameter)
-
-  var img = document.createElement('img')
-  img.src = dataUri
+  var imageify = state.imageify
+  var img = iconFactory.iconForAddress(address, diameter, imageify)
   container.appendChild(img)
 }
 
diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js
deleted file mode 100644
index cbdc82982..000000000
--- a/ui/app/components/panel.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const Identicon = require('./identicon')
-
-module.exports = Panel
-
-inherits(Panel, Component)
-function Panel () {
-  Component.call(this)
-}
-
-Panel.prototype.render = function () {
-  var state = this.props
-
-  var style = {
-    flex: '1 0 auto',
-  }
-
-  if (state.onClick) style.cursor = 'pointer'
-
-  return (
-    h('.identity-panel.flex-row.flex-space-between', {
-      style,
-      onClick: state.onClick,
-    }, [
-
-      // account identicon
-      h('.identicon-wrapper.flex-column.select-none', [
-        h(Identicon, {
-          address: state.identiconKey,
-        }),
-        h('span.font-small', state.identiconLabel),
-      ]),
-
-      // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
-
-        state.attributes.map((attr) => {
-          return h('.flex-row.flex-space-between', {
-            key: '' + Math.round(Math.random() * 1000000),
-          }, [
-            h('label.font-small.no-select', attr.key),
-            h('span.font-small', attr.value),
-          ])
-        }),
-      ]),
-
-      // outlet for inserting additional stuff
-      state.children,
-    ])
-  )
-}
-
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 1835239e5..484046827 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,6 +16,10 @@ function PendingTx () {
 
 PendingTx.prototype.render = function () {
   var state = this.props
+  return this.renderGeneric(h, state)
+}
+
+PendingTx.prototype.renderGeneric = function (h, state) {
   var txData = state.txData
 
   var txParams = txData.txParams || {}
@@ -24,6 +28,7 @@ PendingTx.prototype.render = function () {
   var account = state.accounts[address] || { address: address }
 
   return (
+
     h('.transaction', {
       key: txData.id,
     }, [
@@ -40,6 +45,7 @@ PendingTx.prototype.render = function () {
         showFullAddress: true,
         identity: identity,
         account: account,
+        inlineIdenticons: state.inlineIdenticons,
       }),
 
       // tx data
@@ -62,15 +68,25 @@ PendingTx.prototype.render = function () {
       ]),
 
       // send + cancel
-      h('.flex-row.flex-space-around', [
-        h('button', {
-          onClick: state.cancelTransaction,
-        }, 'Cancel'),
-        h('button', {
-          onClick: state.sendTransaction,
-        }, 'Send'),
-      ]),
+      state.nonInteractive ? null : actionButtons(state),
+
     ])
+    
   )
+
 }
 
+function actionButtons(state){
+  return (
+
+    h('.flex-row.flex-space-around', [
+      h('button', {
+        onClick: state.cancelTransaction,
+      }, 'Cancel'),
+      h('button', {
+        onClick: state.sendTransaction,
+      }, 'Send'),
+    ])
+
+  )
+}
\ No newline at end of file