poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Different cards structure for different ballots

This commit is contained in:
viktor 2017-12-22 18:56:50 +03:00
parent 70295f76e1
commit ac74440ca2
8 changed files with 231 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/App.css
View File

@ -637,11 +637,24 @@ button {
width: 100% !important; } }
.ballots-about-i_name {
width: 25%; }
.ballots-about-i_action {
width: 15%; }
.ballots-about-i_type {
width: 15%; }
.ballots-about-i_proposal {
width: 30%; }
.ballots-about-i_mining-key {
width: 30%;
word-break: break-all; }
.ballots-about-i_proposed-min-threshold {
width: 60%;
word-break: break-all; }
.ballots-about-i_contract-type {
width: 30%;
word-break: break-all; }
.ballots-about-i_proposed-address {
width: 30%;
word-break: break-all; }
.ballots-about-i_time {
width: 15%;
text-align: right; }

13
src/assets/src/assets/App.css
View File

@ -637,11 +637,24 @@ button {
width: 100% !important; } }
.ballots-about-i_name {
width: 25%; }
.ballots-about-i_action {
width: 15%; }
.ballots-about-i_type {
width: 15%; }
.ballots-about-i_proposal {
width: 30%; }
.ballots-about-i_mining-key {
width: 30%;
word-break: break-all; }
.ballots-about-i_proposed-min-threshold {
width: 60%;
word-break: break-all; }
.ballots-about-i_contract-type {
width: 30%;
word-break: break-all; }
.ballots-about-i_proposed-address {
width: 30%;
word-break: break-all; }
.ballots-about-i_time {
width: 15%;
text-align: right; }

23
src/assets/stylesheets/ballots/about.scss
View File

@ -35,6 +35,14 @@
width: 25%;
}
&_action {
width: 15%;
}
&_type {
width: 15%;
}
&_proposal {
width: 30%;
}
@ -44,6 +52,21 @@
word-break: break-all;
}
&_proposed-min-threshold {
width: 60%;
word-break: break-all;
}
&_contract-type {
width: 30%;
word-break: break-all;
}
&_proposed-address {
width: 30%;
word-break: break-all;
}
&_time {
width: 15%;
text-align: right;

93
src/components/BallotKeysCard.jsx Normal file
View File

@ -0,0 +1,93 @@
import React from 'react';
import { inject, observer } from "mobx-react";
@inject("commonStore", "contractsStore", "ballotsStore")
@observer
export class BallotKeysCard extends React.Component {
constructor(props) {
super(props);
}
render () {
return (
<div className="ballots-i">
<div className="ballots-about">
<div className="ballots-about-i ballots-about-i_name">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Name</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--name">Suleyman Duyar</p>
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_action">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Action</p>
</div>
<div className="ballots-about-td">
<p>Remove</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_type">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Key type</p>
</div>
<div className="ballots-about-td">
<p>Mining</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_mining-key">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Affected key</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_time">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Time</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--time">17:49</p>
<p className="ballots-i--to-close">To close</p>
</div>
</div>
</div>
<div className="ballots-i-scale">
<div className="ballots-i-scale-column">
<a href="#" className="ballots-i--vote ballots-i--vote_yes">Vote</a>
<div className="vote-scale--container">
<p className="vote-scale--value">Yes</p>
<p className="vote-scale--votes">Votes: 40</p>
<p className="vote-scale--percentage">40%</p>
<div className="vote-scale">
<div className="vote-scale--fill vote-scale--fill_yes" style={{width: '50%'}}></div>
</div>
</div>
</div>
<div className="ballots-i-scale-column">
<div className="vote-scale--container">
<p className="vote-scale--value">No</p>
<p className="vote-scale--votes">Votes: 10</p>
<p className="vote-scale--percentage">20%</p>
<div className="vote-scale">
<div className="vote-scale--fill vote-scale--fill_no" style={{width: '30%'}}></div>
</div>
</div>
<a href="#" className="ballots-i--vote ballots-i--vote_no">Vote</a>
</div>
</div>
<div className="info">
Minimum 3 from 12 validators required to pass the proposal
</div>
<hr />
<div className="ballots-footer">
<a href="#" className="ballots-footer-finalize">Finalize ballot</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
);
}
}

77
src/components/BallotMinThresholdCard.jsx Normal file
View File

@ -0,0 +1,77 @@
import React from 'react';
import { inject, observer } from "mobx-react";
@inject("commonStore", "contractsStore", "ballotsStore")
@observer
export class BallotMinThresholdCard extends React.Component {
constructor(props) {
super(props);
}
render () {
return (
<div className="ballots-i">
<div className="ballots-about">
<div className="ballots-about-i ballots-about-i_name">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Name</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--name">Suleyman Duyar</p>
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_proposed-min-threshold">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Proposed min gthreshold</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_time">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Time</p>
</div>
<div className="ballots-about-td">
<p className="ballots-i--time">17:49</p>
<p className="ballots-i--to-close">To close</p>
</div>
</div>
</div>
<div className="ballots-i-scale">
<div className="ballots-i-scale-column">
<a href="#" className="ballots-i--vote ballots-i--vote_yes">Vote</a>
<div className="vote-scale--container">
<p className="vote-scale--value">Yes</p>
<p className="vote-scale--votes">Votes: 40</p>
<p className="vote-scale--percentage">40%</p>
<div className="vote-scale">
<div className="vote-scale--fill vote-scale--fill_yes" style={{width: '50%'}}></div>
</div>
</div>
</div>
<div className="ballots-i-scale-column">
<div className="vote-scale--container">
<p className="vote-scale--value">No</p>
<p className="vote-scale--votes">Votes: 10</p>
<p className="vote-scale--percentage">20%</p>
<div className="vote-scale">
<div className="vote-scale--fill vote-scale--fill_no" style={{width: '30%'}}></div>
</div>
</div>
<a href="#" className="ballots-i--vote ballots-i--vote_no">Vote</a>
</div>
</div>
<div className="info">
Minimum 3 from 12 validators required to pass the proposal
</div>
<hr />
<div className="ballots-footer">
<a href="#" className="ballots-footer-finalize">Finalize ballot</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>
</div>
);
}
}

13
src/components/BallotCard.jsx → src/components/BallotProxyCard.jsx
View File

@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
@inject("commonStore", "contractsStore", "ballotsStore")
@observer
export class BallotCard extends React.Component {
export class BallotProxyCard extends React.Component {
constructor(props) {
super(props);
}
@ -21,18 +21,17 @@ export class BallotCard extends React.Component {
<p className="ballots-i--created">31/10/2017 7:22 AM</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_proposal">
<div className="ballots-about-i ballots-about-i_contract-type">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Proposal</p>
<p className="ballots-about-i--title">Contract type</p>
</div>
<div className="ballots-about-td">
<p>Remove notary Shawn Grey, Vermont ID: 55512345 ...</p>
<a href="#" className="ballots-i--see-all-proposal">See All</a>
<p>VotingToChangeKeys</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_mining-key">
<div className="ballots-about-i ballots-about-i_proposed-address">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Mining key</p>
<p className="ballots-about-i--title">Proposed contract address</p>
</div>
<div className="ballots-about-td">
<p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>

1
src/components/Ballots.jsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { inject, observer, observable } from "mobx-react";
import { BallotCard } from "./BallotCard";
import "babel-polyfill";
@inject("commonStore", "contractsStore", "ballotStore", "ballotsStore")

10
src/stores/ContractsStore.js
View File

@ -7,7 +7,9 @@ import VotingToChangeProxy from '../contracts/VotingToChangeProxy.contract'
import ballotStore from './BallotStore'
import ballotsStore from './BallotsStore'
import getWeb3 from '../getWeb3';
import { BallotCard } from "../components/BallotCard";
import { BallotKeysCard } from "../components/BallotKeysCard";
import { BallotMinThresholdCard } from "../components/BallotMinThresholdCard";
import { BallotProxyCard } from "../components/BallotProxyCard";
import "babel-polyfill";
@ -88,7 +90,7 @@ class ContractsStore {
console.log("allKeysBallotsIDs:", allKeysBallotsIDs)
this.activeKeysBallotsIDs = allKeysBallotsIDs;
for (let i = 0; i < allKeysBallotsIDs.length; i++) {
ballotsStore.ballotCards.push(<BallotCard id={this.activeKeysBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
ballotsStore.ballotCards.push(<BallotKeysCard id={this.activeKeysBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
}
}
@ -100,7 +102,7 @@ class ContractsStore {
console.log("allMinThresholdBallotsIDs:", allMinThresholdBallotsIDs)
this.activeMinThresholdBallotsIDs = allMinThresholdBallotsIDs;
for (let i = 0; i < allMinThresholdBallotsIDs.length; i++) {
ballotsStore.ballotCards.push(<BallotCard id={this.activeMinThresholdBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
ballotsStore.ballotCards.push(<BallotMinThresholdCard id={this.activeMinThresholdBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
}
}
@ -112,7 +114,7 @@ class ContractsStore {
console.log("allProxyBallotsIDs:", allProxyBallotsIDs)
this.activeProxyBallotsIDs = allProxyBallotsIDs;
for (let i = 0; i < allProxyBallotsIDs.length; i++) {
ballotsStore.ballotCards.push(<BallotCard id={this.activeProxyBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
ballotsStore.ballotCards.push(<BallotProxyCard id={this.activeProxyBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
}
}
}