diff --git a/js/src/redux/providers/status.js b/js/src/redux/providers/status.js index 830192bbe..138479716 100644 --- a/js/src/redux/providers/status.js +++ b/js/src/redux/providers/status.js @@ -54,7 +54,10 @@ export default class Status { this._api.eth .getBlockByNumber(blockNumber) .then((block) => { - this._store.dispatch(statusCollection({ gasLimit: block.gasLimit })); + this._store.dispatch(statusCollection({ + blockTimestamp: block.timestamp, + gasLimit: block.gasLimit + })); }) .catch((error) => { console.warn('status._subscribeBlockNumber', 'getBlockByNumber', error); diff --git a/js/src/redux/providers/statusReducer.js b/js/src/redux/providers/statusReducer.js index 07ba4af5b..279a9da42 100644 --- a/js/src/redux/providers/statusReducer.js +++ b/js/src/redux/providers/statusReducer.js @@ -19,6 +19,7 @@ import { handleActions } from 'redux-actions'; const initialState = { blockNumber: new BigNumber(0), + blockTimestamp: new Date(), devLogs: [], devLogsLevels: null, devLogsEnabled: false, diff --git a/js/src/ui/Actionbar/actionbar.js b/js/src/ui/Actionbar/actionbar.js index c3fbe6a18..f744f5c57 100644 --- a/js/src/ui/Actionbar/actionbar.js +++ b/js/src/ui/Actionbar/actionbar.js @@ -17,11 +17,13 @@ import React, { Component, PropTypes } from 'react'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; +import { nodeOrStringProptype } from '~/util/proptypes'; + import styles from './actionbar.css'; export default class Actionbar extends Component { static propTypes = { - title: PropTypes.string, + title: nodeOrStringProptype(), buttons: PropTypes.array, children: PropTypes.node, className: PropTypes.string diff --git a/js/src/ui/Page/page.css b/js/src/ui/Page/page.css index 72a78dc22..c09283aec 100644 --- a/js/src/ui/Page/page.css +++ b/js/src/ui/Page/page.css @@ -18,7 +18,7 @@ .layout { padding: 0.25em 0.25em 1em 0.25em; - > * { + &>div { margin-bottom: 0.75em; } } diff --git a/js/src/ui/Page/page.js b/js/src/ui/Page/page.js index 867c3fdf1..9646358b3 100644 --- a/js/src/ui/Page/page.js +++ b/js/src/ui/Page/page.js @@ -16,21 +16,38 @@ import React, { Component, PropTypes } from 'react'; +import Actionbar from '../Actionbar'; +import { nodeOrStringProptype } from '~/util/proptypes'; + import styles from './page.css'; export default class Page extends Component { static propTypes = { + buttons: PropTypes.array, className: PropTypes.string, - children: PropTypes.node + children: PropTypes.node, + title: nodeOrStringProptype() }; render () { - const { className, children } = this.props; + const { buttons, className, children, title } = this.props; const classes = `${styles.layout} ${className}`; + let actionbar = null; + + if (title || buttons) { + actionbar = ( + + ); + } return ( -
- { children } +
+ { actionbar } +
+ { children } +
); } diff --git a/js/src/views/Signer/signer.js b/js/src/views/Signer/signer.js index 6d68c1dc0..f0b4baed7 100644 --- a/js/src/views/Signer/signer.js +++ b/js/src/views/Signer/signer.js @@ -23,8 +23,7 @@ export default class Signer extends Component { render () { return (
- +
); diff --git a/js/src/views/Signer/store.js b/js/src/views/Signer/store.js index 0eeb99861..bcc85a431 100644 --- a/js/src/views/Signer/store.js +++ b/js/src/views/Signer/store.js @@ -30,12 +30,6 @@ export default class Store { } } - @action unsubscribe () { - if (this._timeoutId) { - clearTimeout(this._timeoutId); - } - } - @action setBalance = (address, balance) => { this.setBalances({ [address]: balance }); } @@ -50,6 +44,12 @@ export default class Store { } } + @action unsubscribe () { + if (this._timeoutId) { + clearTimeout(this._timeoutId); + } + } + fetchBalance (address) { this._api.eth .getBalance(address) diff --git a/js/src/views/Status/components/Debug/Debug.css b/js/src/views/Status/components/Debug/debug.css similarity index 100% rename from js/src/views/Status/components/Debug/Debug.css rename to js/src/views/Status/components/Debug/debug.css diff --git a/js/src/views/Status/components/Debug/Debug.js b/js/src/views/Status/components/Debug/debug.js similarity index 99% rename from js/src/views/Status/components/Debug/Debug.js rename to js/src/views/Status/components/Debug/debug.js index 84ce1bb87..438d208f9 100644 --- a/js/src/views/Status/components/Debug/Debug.js +++ b/js/src/views/Status/components/Debug/debug.js @@ -22,7 +22,7 @@ import ReorderIcon from 'material-ui/svg-icons/action/reorder'; import { Container } from '~/ui'; -import styles from './Debug.css'; +import styles from './debug.css'; export default class Debug extends Component { static propTypes = { diff --git a/js/src/views/Status/components/Debug/index.js b/js/src/views/Status/components/Debug/index.js index 9e8eae219..c6b522c46 100644 --- a/js/src/views/Status/components/Debug/index.js +++ b/js/src/views/Status/components/Debug/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './Debug'; +export default from './debug'; diff --git a/js/src/views/Status/components/MiningSettings/index.js b/js/src/views/Status/components/MiningSettings/index.js index 3eee1e051..7853e0d33 100644 --- a/js/src/views/Status/components/MiningSettings/index.js +++ b/js/src/views/Status/components/MiningSettings/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './MiningSettings'; +export default from './miningSettings'; diff --git a/js/src/views/Status/components/MiningSettings/MiningSettings.js b/js/src/views/Status/components/MiningSettings/miningSettings.js similarity index 100% rename from js/src/views/Status/components/MiningSettings/MiningSettings.js rename to js/src/views/Status/components/MiningSettings/miningSettings.js diff --git a/js/src/views/Status/components/Status/index.js b/js/src/views/Status/components/Status/index.js index 8885a04c6..44079b224 100644 --- a/js/src/views/Status/components/Status/index.js +++ b/js/src/views/Status/components/Status/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './Status'; +export default from './status'; diff --git a/js/src/views/Status/components/Status/Status.css b/js/src/views/Status/components/Status/status.css similarity index 90% rename from js/src/views/Status/components/Status/Status.css rename to js/src/views/Status/components/Status/status.css index d79d41062..229e72ce1 100644 --- a/js/src/views/Status/components/Status/Status.css +++ b/js/src/views/Status/components/Status/status.css @@ -28,10 +28,19 @@ content: ''; } -.blockinfo { - font-size: 24px; +.blockInfo { color: #aaa; - line-height: 24px; + font-size: 1.5em; + line-height: 1.5em; +} + +.blockByline { + color: #aaa; + font-size: 0.75em; +} + +.padBottom { + padding-bottom: 1.25em !important; } .col, diff --git a/js/src/views/Status/components/Status/Status.js b/js/src/views/Status/components/Status/status.js similarity index 84% rename from js/src/views/Status/components/Status/Status.js rename to js/src/views/Status/components/Status/status.js index e2d65cb9a..891ec6632 100644 --- a/js/src/views/Status/components/Status/Status.js +++ b/js/src/views/Status/components/Status/status.js @@ -14,14 +14,16 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import React, { Component, PropTypes } from 'react'; import bytes from 'bytes'; +import moment from 'moment'; +import React, { Component, PropTypes } from 'react'; import { Container, ContainerTitle, Input } from '~/ui'; -import styles from './Status.css'; import MiningSettings from '../MiningSettings'; +import styles from './status.css'; + export default class Status extends Component { static propTypes = { nodeStatus: PropTypes.object.isRequired, @@ -44,23 +46,26 @@ export default class Status extends Component {
-
+
-

+
#{ nodeStatus.blockNumber.toFormat() } -

+
+
+ { moment().calendar(nodeStatus.blockTimestamp) } +
-
+
-

+
{ peers } -

+
-
+
-

+
{ `${hashrate} H/s` } -

+
diff --git a/js/src/views/Status/containers/StatusPage/index.js b/js/src/views/Status/containers/StatusPage/index.js index e36bc949c..0e141a16d 100644 --- a/js/src/views/Status/containers/StatusPage/index.js +++ b/js/src/views/Status/containers/StatusPage/index.js @@ -14,4 +14,4 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -export default from './StatusPage'; +export default from './statusPage'; diff --git a/js/src/views/Status/status.css b/js/src/views/Status/containers/StatusPage/statusPage.css similarity index 93% rename from js/src/views/Status/status.css rename to js/src/views/Status/containers/StatusPage/statusPage.css index 0ed554ae6..bda975813 100644 --- a/js/src/views/Status/status.css +++ b/js/src/views/Status/containers/StatusPage/statusPage.css @@ -14,5 +14,9 @@ /* You should have received a copy of the GNU General Public License /* along with Parity. If not, see . */ -.container { + +.body { + &>div { + margin-bottom: 0.25em; + } } diff --git a/js/src/views/Status/containers/StatusPage/StatusPage.js b/js/src/views/Status/containers/StatusPage/statusPage.js similarity index 95% rename from js/src/views/Status/containers/StatusPage/StatusPage.js rename to js/src/views/Status/containers/StatusPage/statusPage.js index c7ab56c5e..286e2c20e 100644 --- a/js/src/views/Status/containers/StatusPage/StatusPage.js +++ b/js/src/views/Status/containers/StatusPage/statusPage.js @@ -23,6 +23,8 @@ import { clearStatusLogs, toggleStatusLogs, toggleStatusRefresh } from '~/redux/ import Debug from '../../components/Debug'; import Status from '../../components/Status'; +import styles from './statusPage.css'; + class StatusPage extends Component { static propTypes = { nodeStatus: PropTypes.object.isRequired, @@ -39,7 +41,7 @@ class StatusPage extends Component { render () { return ( -
+
diff --git a/js/src/views/Status/status.js b/js/src/views/Status/status.js index ff13f1a07..805c96850 100644 --- a/js/src/views/Status/status.js +++ b/js/src/views/Status/status.js @@ -16,22 +16,16 @@ import React, { Component } from 'react'; -import { Actionbar, Page } from '~/ui'; +import { Page } from '~/ui'; import StatusPage from './containers/StatusPage'; -import styles from './status.css'; - export default class Status extends Component { render () { return ( -
- - - - -
+ + + ); } }