(add) vote progress bar component
This commit is contained in:
parent
444137da4b
commit
c8bf1d515b
|
@ -1,78 +1,65 @@
|
|||
.vote-scale {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
margin-top: 34px;
|
||||
overflow: hidden;
|
||||
|
||||
&-not-finalized {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
&--fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
|
||||
&_no {
|
||||
background-color: $poa-danger-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-danger-color;
|
||||
}
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
margin-top: 34px;
|
||||
overflow: hidden;
|
||||
&-not-finalized {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&_yes {
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
&--fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
&_no {
|
||||
background-color: $poa-danger-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-danger-color;
|
||||
}
|
||||
}
|
||||
&_yes {
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
&_send {
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
&_burn {
|
||||
background-color: $poa-danger-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-danger-color;
|
||||
}
|
||||
}
|
||||
&_freeze {
|
||||
background-color: $poa-freeze-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-freeze-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_send {
|
||||
background-color: $poa-green-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-cyan;
|
||||
}
|
||||
&--container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&_burn {
|
||||
background-color: $poa-danger-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-danger-color;
|
||||
}
|
||||
&--value {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&_freeze {
|
||||
background-color: $poa-freeze-color;
|
||||
.sokol & {
|
||||
background-color: $sokol-freeze-color;
|
||||
}
|
||||
&--votes,
|
||||
&--percentage {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
&--votes {
|
||||
color: $gray-text-color;
|
||||
margin-left: 10px;
|
||||
}
|
||||
&--percentage {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--value {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&--votes,
|
||||
&--percentage {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&--votes {
|
||||
color: $gray-text-color;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&--percentage {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,120 @@
|
|||
.vt-ButtonVoting {
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 42px;
|
||||
margin-right: 20px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.15s background-color linear;
|
||||
width: 55px;
|
||||
|
||||
&#{ & }-sm {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
&#{ & }-md {
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
&#{ & }-left {
|
||||
margin-left: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&#{ & }-right {
|
||||
margin-left: 20px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-negative#{ & }-core {
|
||||
background-color: $voting-negative-poa;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-negative-poa, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-negative-poa, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-core {
|
||||
background-color: $voting-neutral-poa;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-neutral-poa, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-neutral-poa, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-core {
|
||||
background-color: $voting-positive-poa;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-positive-poa, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-positive-poa, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-negative#{ & }-sokol {
|
||||
background-color: $voting-negative-sokol;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-negative-sokol, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-negative-sokol, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-sokol {
|
||||
background-color: $voting-neutral-sokol;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-neutral-sokol, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-neutral-sokol, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-sokol {
|
||||
background-color: $voting-positive-sokol;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-positive-sokol, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-positive-sokol, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-negative#{ & }-dai {
|
||||
background-color: $voting-negative-dai;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-negative-dai, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-negative-dai, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-dai {
|
||||
background-color: $voting-neutral-dai;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-neutral-dai, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-neutral-dai, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-dai {
|
||||
background-color: $voting-positive-dai;
|
||||
box-shadow: 0 5px 10px 0 rgba($voting-positive-dai, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: darkenb($voting-positive-dai, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,66 @@
|
|||
.vt-VoteProgressBar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vt-VoteProgressBar_Scale {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
margin-top: 34px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vt-VoteProgressBar_Progress {
|
||||
height: 100%;
|
||||
|
||||
&#{ & }-negative#{ & }-core {
|
||||
background-color: $voting-negative-poa;
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-core {
|
||||
background-color: $voting-neutral-poa;
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-core {
|
||||
background-color: $voting-positive-poa;
|
||||
}
|
||||
|
||||
&#{ & }-negative#{ & }-sokol {
|
||||
background-color: $voting-negative-sokol;
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-sokol {
|
||||
background-color: $voting-neutral-sokol;
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-sokol {
|
||||
background-color: $voting-positive-sokol;
|
||||
}
|
||||
|
||||
&#{ & }-negative#{ & }-dai {
|
||||
background-color: $voting-negative-dai;
|
||||
}
|
||||
|
||||
&#{ & }-neutral#{ & }-dai {
|
||||
background-color: $voting-neutral-dai;
|
||||
}
|
||||
|
||||
&#{ & }-positive#{ & }-dai {
|
||||
background-color: $voting-positive-dai;
|
||||
}
|
||||
}
|
||||
|
||||
.vt-VoteProgressBar_Votes {
|
||||
color: $gray-text-color;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.vt-VoteProgressBar_Percentage {
|
||||
color: #000;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
|
@ -9,6 +9,7 @@
|
|||
@import "ButtonFinalize";
|
||||
@import "ButtonLoadMore";
|
||||
@import "ButtonNewBallot";
|
||||
@import "ButtonVoting";
|
||||
@import "Footer";
|
||||
@import "Header";
|
||||
@import "IconActive";
|
||||
|
@ -32,3 +33,4 @@
|
|||
@import "NavigationLinks";
|
||||
@import "SearchBar";
|
||||
@import "SocialIcons";
|
||||
@import "VoteProgressBar";
|
|
@ -71,3 +71,15 @@ $mobile-indent: 10px;
|
|||
$input-height: 40px;
|
||||
$input-color: #202d3c;
|
||||
|
||||
// voting colors
|
||||
$voting-negative-poa: #f21b57;
|
||||
$voting-neutral-poa: #50bbda;
|
||||
$voting-positive-poa: #60db97;
|
||||
|
||||
$voting-negative-sokol: #f24c67;
|
||||
$voting-neutral-sokol: #50bbda;
|
||||
$voting-positive-sokol: #6ac9b9;
|
||||
|
||||
$voting-negative-dai: #f21b57;
|
||||
$voting-neutral-dai: #50bbda;
|
||||
$voting-positive-dai: #60db97;
|
File diff suppressed because one or more lines are too long
|
@ -4,6 +4,8 @@ import swal from 'sweetalert2'
|
|||
import { BallotDataPair } from '../BallotDataPair'
|
||||
import { BallotFooter } from '../BallotFooter'
|
||||
import { BallotInfoContainer } from '../BallotInfoContainer'
|
||||
import { ButtonVoting } from '../ButtonVoting'
|
||||
import { VoteProgressBar } from '../VoteProgressBar'
|
||||
import { getNetworkBranch } from '../../utils/utils'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { messages } from '../../utils/messages'
|
||||
|
@ -651,7 +653,6 @@ export class BallotCard extends React.Component {
|
|||
|
||||
render() {
|
||||
let { contractsStore, votingType, children } = this.props
|
||||
let voteScaleClass = 'vote-scale'
|
||||
let votingScale
|
||||
|
||||
const threshold = this.getThreshold(contractsStore, votingType)
|
||||
|
@ -661,61 +662,49 @@ export class BallotCard extends React.Component {
|
|||
votingScale = (
|
||||
<div className="sw-BallotCard_Scale">
|
||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||
<button
|
||||
type="button"
|
||||
<ButtonVoting
|
||||
networkBranch={networkBranch}
|
||||
onClick={e => this.vote({ choice: BURN })}
|
||||
className="btn btn-danger sw-BallotCard_VoteButton xl m-r-20"
|
||||
>
|
||||
Burn
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesBurnNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesBurnPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_burn"
|
||||
style={{ width: `${this.votesBurnPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
size="md"
|
||||
text="Burn"
|
||||
type="negative"
|
||||
/>
|
||||
<VoteProgressBar
|
||||
networkBranch={networkBranch}
|
||||
type="negative"
|
||||
votesAmount={this.votesBurnNumber}
|
||||
votesPercentage={this.votesBurnPercents}
|
||||
/>
|
||||
</div>
|
||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||
<button
|
||||
type="button"
|
||||
<ButtonVoting
|
||||
networkBranch={networkBranch}
|
||||
onClick={e => this.vote({ choice: FREEZE })}
|
||||
className="btn btn-freeze sw-BallotCard_VoteButton xl m-r-20"
|
||||
>
|
||||
Freeze
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesFreezeNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesFreezePercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_freeze"
|
||||
style={{ width: `${this.votesFreezePercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
size="md"
|
||||
text="Freeze"
|
||||
type="neutral"
|
||||
/>
|
||||
<VoteProgressBar
|
||||
networkBranch={networkBranch}
|
||||
type="neutral"
|
||||
votesAmount={this.votesFreezeNumber}
|
||||
votesPercentage={this.votesFreezePercents}
|
||||
/>
|
||||
</div>
|
||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||
<button
|
||||
className="btn btn-success sw-BallotCard_VoteButton xl m-r-20"
|
||||
<ButtonVoting
|
||||
networkBranch={networkBranch}
|
||||
onClick={e => this.vote({ choice: SEND })}
|
||||
type="button"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesSendNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesSendPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_send"
|
||||
style={{ width: `${this.votesSendPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
size="md"
|
||||
text="Send"
|
||||
type="positive"
|
||||
/>
|
||||
<VoteProgressBar
|
||||
networkBranch={networkBranch}
|
||||
type="positive"
|
||||
votesAmount={this.votesSendNumber}
|
||||
votesPercentage={this.votesSendPercents}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
@ -723,39 +712,33 @@ export class BallotCard extends React.Component {
|
|||
votingScale = (
|
||||
<div className="sw-BallotCard_Scale">
|
||||
<div className="sw-BallotCard_ScaleColumn">
|
||||
<button
|
||||
type="button"
|
||||
<ButtonVoting
|
||||
networkBranch={networkBranch}
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-danger sw-BallotCard_VoteButton m-r-20"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div
|
||||
className="vote-scale--fill vote-scale--fill_no"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
text="No"
|
||||
type="negative"
|
||||
/>
|
||||
<VoteProgressBar
|
||||
networkBranch={networkBranch}
|
||||
type="negative"
|
||||
votesAmount={this.votesAgainstNumber}
|
||||
votesPercentage={this.votesAgainstPercents}
|
||||
/>
|
||||
</div>
|
||||
<div className="sw-BallotCard_ScaleColumn reverse-responsive">
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesForNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
||||
<div className={voteScaleClass}>
|
||||
<div className="vote-scale--fill vote-scale--fill_yes" style={{ width: `${this.votesForPercents}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-success sw-BallotCard_VoteButton m-l-20"
|
||||
<VoteProgressBar
|
||||
networkBranch={networkBranch}
|
||||
type="positive"
|
||||
votesAmount={this.votesForNumber}
|
||||
votesPercentage={this.votesForPercents}
|
||||
/>
|
||||
<ButtonVoting
|
||||
networkBranch={networkBranch}
|
||||
onClick={e => this.vote({ choice: ACCEPT })}
|
||||
type="button"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
side="right"
|
||||
text="Yes"
|
||||
type="positive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react'
|
||||
|
||||
export const ButtonVoting = ({
|
||||
extraClassName = '',
|
||||
networkBranch,
|
||||
onClick,
|
||||
side = 'left',
|
||||
size = 'sm',
|
||||
text = '',
|
||||
type = 'positive'
|
||||
}) => {
|
||||
let buttonSize = ''
|
||||
|
||||
switch (size) {
|
||||
case 'md' || 'medium':
|
||||
buttonSize = 'vt-ButtonVoting-md'
|
||||
break
|
||||
case 'lg' || 'large':
|
||||
buttonSize = 'vt-ButtonVoting-lg'
|
||||
break
|
||||
case 'sm' || 'small':
|
||||
default:
|
||||
buttonSize = 'vt-ButtonVoting-sm'
|
||||
break
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`vt-ButtonVoting ${extraClassName} vt-ButtonVoting-${networkBranch} ${buttonSize} vt-ButtonVoting-${type} vt-ButtonVoting-${side}`}
|
||||
onClick={onClick}
|
||||
type="button"
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
|
||||
export const VoteProgressBar = ({
|
||||
extraClassName = '',
|
||||
networkBranch,
|
||||
votesAmount = '',
|
||||
votesPercentage = '',
|
||||
type = 'positive'
|
||||
}) => {
|
||||
return (
|
||||
<div className={`vt-VoteProgressBar ${extraClassName} vt-VoteProgressBar-${networkBranch}`}>
|
||||
<p className="vt-VoteProgressBar_Votes">{votesAmount} Votes</p>
|
||||
<p className="vt-VoteProgressBar_Percentage">{votesPercentage}%</p>
|
||||
<div className="vt-VoteProgressBar_Scale">
|
||||
<div
|
||||
className={`vt-VoteProgressBar_Progress vt-VoteProgressBar_Progress-${networkBranch} vt-VoteProgressBar_Progress-${type}`}
|
||||
style={{ width: `${votesPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue