lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feature(tabs): hard code tabs style

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
39a9f61d34
commit
bcdc551131
7 changed files with 289 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      app/components/Network/PeersList.js
  2. 46
      app/components/Network/PeersList.scss
  3. 89
      app/routes/network/components/Network.js
  4. 84
      app/routes/network/components/Network.scss
  5. 12
      app/routes/network/containers/NetworkContainer.js
  6. 1
      package.json
  7. 36
      yarn.lock

26
app/components/Network/PeersList.js
View File

@ -0,0 +1,26 @@
import React from 'react'
import PropTypes from 'prop-types'
import styles from './PeersList.scss'
const PeersList = ({ peers }) => (
<ul className={styles.peers}>
{
peers.map(peer => {
console.log('peer: ', peer)
return (
<li key={peer.peer_id} className={styles.peer}>
<span className={styles.dot} />
<h1>{peer.address}</h1>
<h4>{peer.pub_key}</h4>
</li>
)
})
}
</ul>
)
PeersList.propTypes = {
peers: PropTypes.array.isRequired
}
export default PeersList

46
app/components/Network/PeersList.scss
View File

@ -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;
}
}

89
app/routes/network/components/Network.js
View File

@ -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 <span></span> }
if (networkLoading) return <LoadingBolt />
return (
<div>
Network
<div className={styles.container}>
<section className={styles.network}>
<InteractiveForceGraph
simulationOptions={
{
height: 800,
width: 800,
strength: {
charge: -500
}
}
}
labelAttr='label'
onSelectNode={node => console.log('node: ', node)}
opacityFactor={1}
highlightDependencies
zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
zoom
>
<path d="M534.7054286266647, 460.3260926684966" fill="red" stroke="blue" />
{
nodes.map(node => {
return (
<ForceGraphNode
r={15}
label={node.pub_key}
key={node.pub_key}
node={{ id: node.pub_key }}
fill={identity_pubkey === node.pub_key ? 'white' : 'black'}
/>
)
})
}
{
edges.map(edge => {
return (
<ForceGraphLink
key={edge.channel_id}
link={{ source: edge.node1_pub, target: edge.node2_pub }}
stroke='silver'
strokeWidth='5'
/>
)
})
}
</InteractiveForceGraph>
</section>
<section className={styles.toolbox}>
<ul className={styles.tabs}>
<li className={`${styles.tab} ${styles.peersTab}`}>
Peers
</li>
<li className={`${styles.tab} ${styles.channelsTab}`}>
Channels
</li>
<li className={`${styles.tab} ${styles.transactionsTab}`}>
Transactions
</li>
</ul>
<div className={styles.content}>
<PeersList peers={peers} />
</div>
</section>
</div>
)
}

84
app/routes/network/components/Network.scss
View File

@ -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;
}
}
}

12
app/routes/network/containers/NetworkContainer.js
View File

@ -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))

1
package.json
View File

@ -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",

36
yarn.lock
View File

@ -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"

Write Preview
Loading…
Cancel
Save