From 122576a790b8621c0e32121d815850357c453a77 Mon Sep 17 00:00:00 2001 From: kumavis Date: Wed, 22 Jun 2016 19:28:11 -0700 Subject: initial svg notifications --- ui/app/components/pending-tx.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 1835239e5..49b79e9d0 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, }, [ @@ -36,11 +41,11 @@ PendingTx.prototype.render = function () { }, 'Submit Transaction'), // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - }), + // h(AccountPanel, { + // showFullAddress: true, + // identity: identity, + // account: account, + // }), // tx data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ @@ -71,6 +76,7 @@ PendingTx.prototype.render = function () { }, 'Send'), ]), ]) + ) } -- cgit v1.2.3 From 2495c6ea547123c9d807b4662a3e0e7e679eab5f Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 15:13:24 -0700 Subject: svg notifications - remove unneeded deps and clean code --- ui/app/components/pending-tx.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 49b79e9d0..d3bfbbc62 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -41,11 +41,11 @@ PendingTx.prototype.renderGeneric = function (h, state) { }, 'Submit Transaction'), // account that will sign - // h(AccountPanel, { - // showFullAddress: true, - // identity: identity, - // account: account, - // }), + h(AccountPanel, { + showFullAddress: true, + identity: identity, + account: account, + }), // tx data h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ -- cgit v1.2.3 From cc7dbace38bc41bb177738586e9a60adf541d2ab Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 15:25:33 -0700 Subject: tx-conf add non-interactive mode for notification --- ui/app/components/panel.js | 6 +++--- ui/app/components/pending-tx.js | 25 +++++++++++++++++-------- 2 files changed, 20 insertions(+), 11 deletions(-) (limited to 'ui') diff --git a/ui/app/components/panel.js b/ui/app/components/panel.js index cbdc82982..3efd3c661 100644 --- a/ui/app/components/panel.js +++ b/ui/app/components/panel.js @@ -27,9 +27,9 @@ Panel.prototype.render = function () { // account identicon h('.identicon-wrapper.flex-column.select-none', [ - h(Identicon, { - address: state.identiconKey, - }), + // h(Identicon, { + // address: state.identiconKey, + // }), h('span.font-small', state.identiconLabel), ]), diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index d3bfbbc62..e63eba700 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -67,16 +67,25 @@ PendingTx.prototype.renderGeneric = function (h, state) { ]), // 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 -- cgit v1.2.3 From 7eb89613ccee118d97a48d83336bbea44614da18 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:09:25 -0700 Subject: icon-factory - overhaul to provide svg or imagified el --- ui/app/components/identicon.js | 7 ++---- ui/app/components/panel.js | 6 ++--- ui/lib/icon-factory.js | 56 ++++++++++++++++++++++++------------------ 3 files changed, 37 insertions(+), 32 deletions(-) (limited to 'ui') 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 index 3efd3c661..cbdc82982 100644 --- a/ui/app/components/panel.js +++ b/ui/app/components/panel.js @@ -27,9 +27,9 @@ Panel.prototype.render = function () { // account identicon h('.identicon-wrapper.flex-column.select-none', [ - // h(Identicon, { - // address: state.identiconKey, - // }), + h(Identicon, { + address: state.identiconKey, + }), h('span.font-small', state.identiconLabel), ]), diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index 1f7cca859..ed9624c13 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -12,42 +12,50 @@ function IconFactory (jazzicon) { this.cache = {} } -IconFactory.prototype.iconForAddress = function (address, diameter) { - if (this.isCached(address, diameter)) { - return this.cache[address][diameter] +IconFactory.prototype.iconForAddress = function (address, diameter, imageify) { + if (imageify) { + return this.generateIdenticonImg(address, diameter) + } else { + return this.generateIdenticonSvg(address, diameter) } - - const dataUri = this.generateNewUri(address, diameter) - this.cacheIcon(address, diameter, dataUri) - return dataUri } -IconFactory.prototype.generateNewUri = function (address, diameter) { - var numericRepresentation = jsNumberForAddress(address) - var identicon = this.jazzicon(diameter, numericRepresentation) +// returns img dom element +IconFactory.prototype.generateIdenticonImg = function (address, diameter) { + var identicon = this.generateIdenticonSvg(address, diameter) var identiconSrc = identicon.innerHTML - var dataUri = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) - return dataUri + var dataUri = toDataUri(identiconSrc) + var img = document.createElement('img') + img.src = dataUri + return img } -IconFactory.prototype.cacheIcon = function (address, diameter, icon) { - if (!(address in this.cache)) { - var sizeCache = {} - sizeCache[diameter] = icon - this.cache[address] = sizeCache - return sizeCache - } else { - this.cache[address][diameter] = icon - return icon - } +// returns svg dom element +IconFactory.prototype.generateIdenticonSvg = function (address, diameter) { + var numericRepresentation = jsNumberForAddress(address) + var cacheId = address+':'+diameter + // check cache, lazily generate and populate cache + var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter)) + // create a clean copy so you can modify it + var cleanCopy = identicon.cloneNode(true) + return cleanCopy } -IconFactory.prototype.isCached = function (address, diameter) { - return address in this.cache && diameter in this.cache[address] +// creates a new identicon +IconFactory.prototype.generateNewIdenticon = function (address, diameter) { + var numericRepresentation = jsNumberForAddress(address) + var identicon = this.jazzicon(diameter, numericRepresentation) + return identicon } +// util + function jsNumberForAddress (address) { var addr = address.slice(2, 10) var seed = parseInt(addr, 16) return seed } + +function toDataUri(identiconSrc){ + return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc) +} \ No newline at end of file -- cgit v1.2.3 From e96a53385f48da021730b0cc351a223abcc712e3 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:18:47 -0700 Subject: accounts - rename account list item so it doesnt overlap --- ui/app/accounts/account-list-item.js | 81 ++++++++++++++++++++++++++++++++++++ ui/app/accounts/account-panel.js | 80 ----------------------------------- ui/app/accounts/index.js | 4 +- 3 files changed, 83 insertions(+), 82 deletions(-) create mode 100644 ui/app/accounts/account-list-item.js delete mode 100644 ui/app/accounts/account-panel.js (limited to 'ui') diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js new file mode 100644 index 000000000..b42de182e --- /dev/null +++ b/ui/app/accounts/account-list-item.js @@ -0,0 +1,81 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const ethUtil = require('ethereumjs-util') + +const EtherBalance = require('../components/eth-balance') +const copyToClipboard = require('copy-to-clipboard') +const Identicon = require('../components/identicon') + +module.exports = NewComponent + +inherits(NewComponent, Component) +function NewComponent () { + Component.call(this) +} + +NewComponent.prototype.render = function () { + const identity = this.props.identity + var isSelected = this.props.selectedAddress === identity.address + var account = this.props.accounts[identity.address] + const selectedClass = isSelected ? '.selected' : '' + + return ( + h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { + key: `account-panel-${identity.address}`, + style: { + flex: '1 0 auto', + }, + onClick: (event) => this.props.onShowDetail(identity.address, event), + }, [ + + h('.identicon-wrapper.flex-column.flex-center.select-none', [ + this.pendingOrNot(), + h(Identicon, { + address: identity.address, + imageify: true, + }), + ]), + + // account address, balance + h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { + style: { + width: '200px', + }, + }, [ + h('span', identity.name), + h('span.font-small', { + style: { + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }, ethUtil.toChecksumAddress(identity.address)), + h(EtherBalance, { + value: account.balance, + }), + ]), + + // copy button + h('.identity-copy.flex-column', { + style: { + margin: '0 20px', + }, + }, [ + h('img.cursor-pointer.color-orange', { + src: 'images/copy.svg', + onClick: (event) => { + event.stopPropagation() + event.preventDefault() + copyToClipboard(ethUtil.toChecksumAddress(identity.address)) + }, + }), + ]), + ]) + ) +} + +NewComponent.prototype.pendingOrNot = function () { + const pending = this.props.pending + if (pending.length === 0) return null + return h('.pending-dot', pending.length) +} diff --git a/ui/app/accounts/account-panel.js b/ui/app/accounts/account-panel.js deleted file mode 100644 index af3d0d347..000000000 --- a/ui/app/accounts/account-panel.js +++ /dev/null @@ -1,80 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const ethUtil = require('ethereumjs-util') - -const EtherBalance = require('../components/eth-balance') -const copyToClipboard = require('copy-to-clipboard') -const Identicon = require('../components/identicon') - -module.exports = NewComponent - -inherits(NewComponent, Component) -function NewComponent () { - Component.call(this) -} - -NewComponent.prototype.render = function () { - const identity = this.props.identity - var isSelected = this.props.selectedAddress === identity.address - var account = this.props.accounts[identity.address] - const selectedClass = isSelected ? '.selected' : '' - - return ( - h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { - key: `account-panel-${identity.address}`, - style: { - flex: '1 0 auto', - }, - onClick: (event) => this.props.onShowDetail(identity.address, event), - }, [ - - h('.identicon-wrapper.flex-column.flex-center.select-none', [ - this.pendingOrNot(), - h(Identicon, { - address: identity.address, - }), - ]), - - // account address, balance - h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { - style: { - width: '200px', - }, - }, [ - h('span', identity.name), - h('span.font-small', { - style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, - }, ethUtil.toChecksumAddress(identity.address)), - h(EtherBalance, { - value: account.balance, - }), - ]), - - // copy button - h('.identity-copy.flex-column', { - style: { - margin: '0 20px', - }, - }, [ - h('img.cursor-pointer.color-orange', { - src: 'images/copy.svg', - onClick: (event) => { - event.stopPropagation() - event.preventDefault() - copyToClipboard(ethUtil.toChecksumAddress(identity.address)) - }, - }), - ]), - ]) - ) -} - -NewComponent.prototype.pendingOrNot = function () { - const pending = this.props.pending - if (pending.length === 0) return null - return h('.pending-dot', pending.length) -} 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, -- cgit v1.2.3 From d293ef0494ae6b1ff284611603a3268e5056c5d4 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:28:57 -0700 Subject: account-panel combine panel into account-panel --- ui/app/components/account-panel.js | 49 +++++++++++++++++++++++++--------- ui/app/components/panel.js | 54 -------------------------------------- 2 files changed, 37 insertions(+), 66 deletions(-) delete mode 100644 ui/app/components/panel.js (limited to 'ui') diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 112b897d5..b24d58ace 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,40 @@ 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, + }), + 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/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, - ]) - ) -} - -- cgit v1.2.3 From be25f4da06d7651b079f8345cd8dc4f01a2a0002 Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:43:10 -0700 Subject: pending-tx pass the identicon pref on --- ui/app/components/account-panel.js | 1 + ui/app/components/pending-tx.js | 1 + 2 files changed, 2 insertions(+) (limited to 'ui') diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index b24d58ace..b98a8cb45 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -46,6 +46,7 @@ AccountPanel.prototype.render = function () { h('.identicon-wrapper.flex-column.select-none', [ h(Identicon, { address: panelState.identiconKey, + imageify: !state.inlineIdenticons, }), h('span.font-small', panelState.identiconLabel), ]), diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index e63eba700..484046827 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -45,6 +45,7 @@ PendingTx.prototype.renderGeneric = function (h, state) { showFullAddress: true, identity: identity, account: account, + inlineIdenticons: state.inlineIdenticons, }), // tx data -- cgit v1.2.3 From 2468949cb5b13b36cb11f351a13d92bdc500093c Mon Sep 17 00:00:00 2001 From: kumavis Date: Thu, 23 Jun 2016 16:53:45 -0700 Subject: some legit linting fixes --- ui/lib/icon-factory.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js index ed9624c13..a30041114 100644 --- a/ui/lib/icon-factory.js +++ b/ui/lib/icon-factory.js @@ -32,8 +32,7 @@ IconFactory.prototype.generateIdenticonImg = function (address, diameter) { // returns svg dom element IconFactory.prototype.generateIdenticonSvg = function (address, diameter) { - var numericRepresentation = jsNumberForAddress(address) - var cacheId = address+':'+diameter + var cacheId = `${address}:${diameter}` // check cache, lazily generate and populate cache var identicon = this.cache[cacheId] || (this.cache[cacheId] = this.generateNewIdenticon(address, diameter)) // create a clean copy so you can modify it -- cgit v1.2.3