From bcdc5511313e9a4c32003227945c363a4ebd2cad Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 4 Dec 2017 15:59:14 -0600 Subject: [PATCH] feature(tabs): hard code tabs style --- app/components/Network/PeersList.js | 26 ++++++ app/components/Network/PeersList.scss | 46 ++++++++++ app/routes/network/components/Network.js | 89 ++++++++++++++++++- app/routes/network/components/Network.scss | 84 +++++++++++++++++ .../network/containers/NetworkContainer.js | 12 ++- package.json | 1 + yarn.lock | 36 +++++++- 7 files changed, 289 insertions(+), 5 deletions(-) create mode 100644 app/components/Network/PeersList.js create mode 100644 app/components/Network/PeersList.scss diff --git a/app/components/Network/PeersList.js b/app/components/Network/PeersList.js new file mode 100644 index 00000000..1d5eb289 --- /dev/null +++ b/app/components/Network/PeersList.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './PeersList.scss' + +const PeersList = ({ peers }) => ( + +) + +PeersList.propTypes = { + peers: PropTypes.array.isRequired +} + +export default PeersList diff --git a/app/components/Network/PeersList.scss b/app/components/Network/PeersList.scss new file mode 100644 index 00000000..e2ee2861 --- /dev/null +++ b/app/components/Network/PeersList.scss @@ -0,0 +1,46 @@ +@import '../../variables.scss'; + +.peers { + color: $white; + margin-top: 50px; +} + +.peer { + position: relative; + margin: 20px 0; + padding: 10px 40px; + cursor: pointer; + transition: all 0.25s; + + &:hover { + background: darken(#353535, 10%); + + .dot { + background: #5589F3; + opacity: 0.5; + } + } + + .dot { + position: absolute; + top: calc(50% - 10px); + left: 5%; + width: 10px; + height: 10px; + border: 1px solid #979797; + border-radius: 50%; + + &.active { + background: #5589F3; + } + } + + h1 { + font-size: 16px; + margin-bottom: 10px; + } + + h4 { + font-size: 8px; + } +} \ No newline at end of file diff --git a/app/routes/network/components/Network.js b/app/routes/network/components/Network.js index 84f1886c..1ebbbbd7 100644 --- a/app/routes/network/components/Network.js +++ b/app/routes/network/components/Network.js @@ -1,13 +1,98 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force' + +import LoadingBolt from 'components/LoadingBolt' +import PeersList from 'components/Network/PeersList' + import styles from './Network.scss' class Network extends Component { + componentWillMount() { + const { fetchDescribeNetwork, fetchPeers } = this.props + + fetchPeers() + fetchDescribeNetwork() + } + render() { + const { + fetchDescribeNetwork, + + network: { nodes, edges, networkLoading }, + peers: { peers }, + identity_pubkey + } = this.props + + if (!nodes.length || !edges.length) { return } + if (networkLoading) return + return ( -
- Network +
+
+ console.log('node: ', node)} + opacityFactor={1} + highlightDependencies + zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }} + zoom + > + + { + nodes.map(node => { + return ( + + ) + }) + } + { + edges.map(edge => { + return ( + + ) + }) + } + +
+
+
    +
  • + Peers +
    • +
  • + Channels +
    • +
  • + Transactions +
    • +
+ +
+ +
+
) } diff --git a/app/routes/network/components/Network.scss b/app/routes/network/components/Network.scss index e69de29b..d349c381 100644 --- a/app/routes/network/components/Network.scss +++ b/app/routes/network/components/Network.scss @@ -0,0 +1,84 @@ +@import '../../../variables.scss'; + +@keyframes dash { + to { + stroke-dashoffset: 1000; + } +} + +@keyframes fadein { + 0% { background: $white; } + 50% { background: lighten($secondary, 50%); } + 100% { background: $secondary; animation-fill-mode:forwards; } +} + +.container { + width: 100%; + height: 100vh; + animation: fadein 0.5s; + animation-timing-function:linear; + animation-fill-mode:forwards; + animation-iteration-count: 1; + + line.active { + opacity: 1; + stroke: green; + stroke-width: 5; + stroke-dasharray: 100; + animation: dash 2.5s infinite linear; + } + + circle { + cursor: pointer; + } +} + +.network, .toolbox { + display: inline-block; + vertical-align: top; + height: 100vh; +} + +.network { + width: 70%; +} + +.toolbox { + width: 30%; + height: 100%; + background: #353535; +} + +.tabs { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding-top: 40px; + + .tab { + color: $white; + text-align: center; + cursor: pointer; + width: 100%; + padding: 10px 0; + border-bottom: 1px solid #464646; + transition: all 0.5s; + + &:nth-child(1) { + border-bottom: 1px solid #588CF0; + } + + &.peersTab { + border-bottom: 1px solid #588CF0; + } + + &.channelsTab:hover { + border-bottom: 1px solid #88D4A2; + } + + &.transactionsTab:hover { + border-bottom: 1px solid #FFDC53; + } + } +} \ No newline at end of file diff --git a/app/routes/network/containers/NetworkContainer.js b/app/routes/network/containers/NetworkContainer.js index 6c7f7ca7..481681d7 100644 --- a/app/routes/network/containers/NetworkContainer.js +++ b/app/routes/network/containers/NetworkContainer.js @@ -1,12 +1,20 @@ import { withRouter } from 'react-router' import { connect } from 'react-redux' +import { fetchDescribeNetwork } from '../../../reducers/network' +import { fetchPeers } from '../../../reducers/peers' + import Network from '../components/Network' -const mapDispatchToProps = {} +const mapDispatchToProps = { + fetchDescribeNetwork, + fetchPeers +} const mapStateToProps = state => ({ - network: state.network + network: state.network, + peers: state.peers, + identity_pubkey: state.info.data.identity_pubkey }) export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network)) diff --git a/package.json b/package.json index e6aea68b..1bdd6630 100644 --- a/package.json +++ b/package.json @@ -211,6 +211,7 @@ "react-router": "^4.1.1", "react-router-dom": "^4.1.1", "react-router-redux": "^5.0.0-alpha.6", + "react-vis-force": "^0.3.1", "redux": "^3.7.1", "redux-electron-ipc": "^1.1.10", "redux-thunk": "^2.2.0", diff --git a/yarn.lock b/yarn.lock index 08ae9c50..5b6db5d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2528,6 +2528,31 @@ currently-unhandled@^0.4.1: dependencies: array-find-index "^1.0.1" +d3-collection@1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2" + +d3-dispatch@1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8" + +d3-force@^1.0.2: + version "1.1.0" + resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3" + dependencies: + d3-collection "1" + d3-dispatch "1" + d3-quadtree "1" + d3-timer "1" + +d3-quadtree@1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438" + +d3-timer@1: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531" + d@1: version "1.0.0" resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f" @@ -5570,7 +5595,7 @@ lodash.range@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/lodash.range/-/lodash.range-3.2.0.tgz#f461e588f66683f7eadeade513e38a69a565a15d" -lodash.reduce@^4.4.0: +lodash.reduce@^4.4.0, lodash.reduce@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b" @@ -7190,6 +7215,15 @@ react-transform-hmr@^1.0.3: global "^4.3.0" react-proxy "^1.1.7" +react-vis-force@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/react-vis-force/-/react-vis-force-0.3.1.tgz#c7bc96a4e872409f5d4c0fa93fe89c94554d47b7" + dependencies: + d3-force "^1.0.2" + global "^4.3.0" + lodash.reduce "^4.6.0" + prop-types "^15.5.10" + react@^15.6.1: version "15.6.1" resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"