From 2c36c17238b7641295e1ed6e51e11b2842c03fdb Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 29 Jun 2016 15:04:16 -0700 Subject: =?UTF-8?q?Add=20=E2=9C=93=20charchter=20to=20indicate=20active=20?= =?UTF-8?q?network?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/app/app.js | 11 +++++++++++ ui/app/components/drop-menu-item.js | 20 ++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/ui/app/app.js b/ui/app/app.js index 8297ed796..034e062e6 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -214,6 +214,7 @@ App.prototype.renderNetworkDropdown = function () { closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => props.dispatch(actions.setProviderType('mainnet')), icon: h('.menu-icon.diamond'), + activeNetworkRender: props.network, }), h(DropMenuItem, { @@ -221,6 +222,7 @@ App.prototype.renderNetworkDropdown = function () { closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => props.dispatch(actions.setProviderType('testnet')), icon: h('.menu-icon.red-dot'), + activeNetworkRender: props.network, }), h(DropMenuItem, { @@ -228,6 +230,7 @@ App.prototype.renderNetworkDropdown = function () { closeMenu: () => this.setState({ isNetworkMenuOpen: false }), action: () => props.dispatch(actions.setRpcTarget('http://localhost:8545')), icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + activeNetworkRender: props.provider.rpcTarget, }), this.renderCustomOption(props.provider.rpcTarget), ]) @@ -367,12 +370,20 @@ App.prototype.renderCustomOption = function (rpcTarget) { action: () => this.props.dispatch(actions.showConfigPage()), icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), }) + case 'http://localhost:8545': + return h(DropMenuItem, { + label: 'Custom RPC', + closeMenu: () => this.setState({ isNetworkMenuOpen: false }), + action: () => this.props.dispatch(actions.showConfigPage()), + icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + }) default: return h(DropMenuItem, { label: `${rpcTarget}`, closeMenu: () => this.setState({ isNetworkMenuOpen: false }), icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), + activeNetworkRender: 'custom' }) } } diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index 5531ebf9f..a31c9c7c4 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -25,5 +25,25 @@ DropMenuItem.prototype.render = function () { }, [ this.props.icon, this.props.label, + this.activeNetworkRender(), ]) } + +DropMenuItem.prototype.activeNetworkRender = function () { + var activeNetwork = this.props.activeNetworkRender + if( activeNetwork === undefined) return + + switch (this.props.label) { + case 'Main Ethereum Network': + if (activeNetwork === '1') return h('.check', ' ✓') + break + case 'Morden Test Network': + if (activeNetwork === '2') return h('.check', ' ✓') + break + case 'Localhost 8545': + if (activeNetwork > '2') return h('.check', ' ✓') + break + default: + if (activeNetwork === 'custom') return h('.check', ' ✓') + } +} -- cgit v1.2.3 From e0daea35a98b294d503d5d9a9625d977295ea4cc Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 29 Jun 2016 16:11:09 -0700 Subject: Add network name to indicator and some css fixes -also fix custom net work bug in drop down where it thinks local:8545 is custom. --- ui/app/app.js | 2 +- ui/app/components/drop-menu-item.js | 3 ++- ui/app/components/network.js | 40 ++++++++++++++++++++++++++++--------- ui/app/css/index.css | 17 ++++++++++++++++ 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 034e062e6..5846cb11e 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -139,7 +139,7 @@ App.prototype.renderAppBar = function () { h('h1', { style: { position: 'relative', - left: '3px', + left: '9px', }, }, 'MetaMask'), diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index a31c9c7c4..00bb16868 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -41,7 +41,8 @@ DropMenuItem.prototype.activeNetworkRender = function () { if (activeNetwork === '2') return h('.check', ' ✓') break case 'Localhost 8545': - if (activeNetwork > '2') return h('.check', ' ✓') + debugger + if (activeNetwork === 'http://localhost:8545') return h('.check', ' ✓') break default: if (activeNetwork === 'custom') return h('.check', ' ✓') diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 9f7287371..25488f6b7 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -47,17 +47,39 @@ Network.prototype.render = function () { (function () { switch (iconName) { case 'ethereum-network': - return h('.menu-icon.diamond') + return h('.network-indicator',[ + h('.menu-icon.diamond'), + h('.network-name',{ + style: { + color: '#039396', + }}, + 'Etherum Main Net') + ]) case 'morden-test-network': - return h('.menu-icon.red-dot') + return h('.network-indicator',[ + h('.menu-icon.red-dot'), + h('.network-name',{ + style: { + color: '#ff6666', + }}, + 'Morden Test Net') + ]) default: - return h('i.fa.fa-question-circle.fa-lg', { - ariaHidden: true, - style: { - margin: '10px', - color: 'rgb(125, 128, 130)', - }, - }) + return h('.network-indicator',[ + h('i.fa.fa-question-circle.fa-lg', { + ariaHidden: true, + style: { + margin: '10px', + color: 'rgb(125, 128, 130)', + }, + }), + + h('.network-name',{ + style: { + color: '#AEAEAE', + }}, + 'Private Network'), + ]) } })(), ]) diff --git a/ui/app/css/index.css b/ui/app/css/index.css index d46c859ad..fc10e56b6 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -141,6 +141,23 @@ textarea.twelve-word-phrase { resize: none; } +.network-indicator { + display: flex; + align-items: center; + font-size: 0.6em; + +} + +.network-name { + position: absolute; + top: 8px; + width: 5.2em; + line-height: 9px; +} + +.check { + color: #F7861C; +} /* app sections */ -- cgit v1.2.3 From 0b3737edb49cb40a8d82cf3cd5491b8474247a8c Mon Sep 17 00:00:00 2001 From: Frankie Date: Wed, 29 Jun 2016 16:31:27 -0700 Subject: Add to change log --- CHANGELOG.md | 2 ++ ui/app/app.js | 2 +- ui/app/components/drop-menu-item.js | 3 +-- ui/app/components/network.js | 36 ++++++++++++++++++------------------ 4 files changed, 22 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93a455248..621d9b7ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Current Master +- Added a network indicator mark in dropdown menu +- Added network name next to network indicator - Fixed bug where MetaMask interfered with PDF loading. - Moved switch account icon into menu bar. - Changed status shapes to be a yellow warning sign for failure and ellipsis for pending transactions. diff --git a/ui/app/app.js b/ui/app/app.js index 5846cb11e..a79666f58 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -383,7 +383,7 @@ App.prototype.renderCustomOption = function (rpcTarget) { label: `${rpcTarget}`, closeMenu: () => this.setState({ isNetworkMenuOpen: false }), icon: h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true }), - activeNetworkRender: 'custom' + activeNetworkRender: 'custom', }) } } diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js index 00bb16868..69294c94d 100644 --- a/ui/app/components/drop-menu-item.js +++ b/ui/app/components/drop-menu-item.js @@ -31,7 +31,7 @@ DropMenuItem.prototype.render = function () { DropMenuItem.prototype.activeNetworkRender = function () { var activeNetwork = this.props.activeNetworkRender - if( activeNetwork === undefined) return + if (activeNetwork === undefined) return switch (this.props.label) { case 'Main Ethereum Network': @@ -41,7 +41,6 @@ DropMenuItem.prototype.activeNetworkRender = function () { if (activeNetwork === '2') return h('.check', ' ✓') break case 'Localhost 8545': - debugger if (activeNetwork === 'http://localhost:8545') return h('.check', ' ✓') break default: diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 25488f6b7..032e71699 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -47,25 +47,25 @@ Network.prototype.render = function () { (function () { switch (iconName) { case 'ethereum-network': - return h('.network-indicator',[ - h('.menu-icon.diamond'), - h('.network-name',{ - style: { - color: '#039396', - }}, - 'Etherum Main Net') - ]) + return h('.network-indicator', [ + h('.menu-icon.diamond'), + h('.network-name', { + style: { + color: '#039396', + }}, + 'Etherum Main Net'), + ]) case 'morden-test-network': - return h('.network-indicator',[ - h('.menu-icon.red-dot'), - h('.network-name',{ - style: { - color: '#ff6666', - }}, - 'Morden Test Net') - ]) + return h('.network-indicator', [ + h('.menu-icon.red-dot'), + h('.network-name', { + style: { + color: '#ff6666', + }}, + 'Morden Test Net'), + ]) default: - return h('.network-indicator',[ + return h('.network-indicator', [ h('i.fa.fa-question-circle.fa-lg', { ariaHidden: true, style: { @@ -74,7 +74,7 @@ Network.prototype.render = function () { }, }), - h('.network-name',{ + h('.network-name', { style: { color: '#AEAEAE', }}, -- cgit v1.2.3