(add) keys radio buttons component
This commit is contained in:
parent
1b39f7b6dc
commit
744f3a1ff5
10
src/App.js
10
src/App.js
|
@ -90,12 +90,20 @@ class App extends Component {
|
|||
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
||||
}
|
||||
|
||||
isNewBallotPage() {
|
||||
return `${constants.rootPath}/new` === this.props.location.pathname
|
||||
}
|
||||
|
||||
render() {
|
||||
const { commonStore, contractsStore } = this.props
|
||||
const networkBranch = this.getVotingNetworkBranch()
|
||||
|
||||
return networkBranch ? (
|
||||
<div className={`lo-App ${this.state.showMobileMenu ? 'lo-App-menu-open' : ''}`}>
|
||||
<div
|
||||
className={`lo-App ${this.isNewBallotPage() ? 'lo-App-no-search-bar' : ''} ${
|
||||
this.state.showMobileMenu ? 'lo-App-menu-open' : ''
|
||||
}`}
|
||||
>
|
||||
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
||||
<Header
|
||||
baseRootPath={commonStore.rootPath}
|
||||
|
|
|
@ -31,15 +31,6 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 10px 0 30px;
|
||||
border: 0;
|
||||
background-color: $base-border-color;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -80,19 +71,3 @@ hr {
|
|||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: #38454f;
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,77 +1,5 @@
|
|||
|
||||
|
||||
.radio-button {
|
||||
position: relative;
|
||||
|
||||
&-label {
|
||||
@include not-selectable-text();
|
||||
border-radius: 3px;
|
||||
border: 1px solid $base-border-color;
|
||||
color: $gray-text-color;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
transition: 0.25s background-color;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
input[type='radio']:checked + &-label {
|
||||
background-color: $poa-purple;
|
||||
border-color: $poa-purple;
|
||||
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
|
||||
color: #fff;
|
||||
.sokol & {
|
||||
background-color: $sokol-cyan;
|
||||
border-color: $sokol-cyan;
|
||||
box-shadow: 0px 5px 10px 0 rgba(106, 201, 185, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.keys-radio-button-tr {
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.keys-radio-button-td {
|
||||
min-width: 30%;
|
||||
margin-right: 5%;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.radio-button-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
margin-bottom: 15px;
|
||||
margin-right: 0;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// .form-el {
|
||||
// margin-bottom: 30px;
|
||||
// }
|
||||
|
||||
.hint {
|
||||
color: #777;
|
||||
|
|
|
@ -1,52 +0,0 @@
|
|||
.new {
|
||||
&-form {
|
||||
@extend %white-block;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-side {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 30px;
|
||||
padding-top: 30px;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&_left {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 0;
|
||||
width: 30%;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&_right {
|
||||
border-left: 1px solid $base-border-color;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
width: 70%;
|
||||
|
||||
@media screen and (max-width: $breakpoint-md) {
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-ballot {
|
||||
white-space: nowrap;
|
||||
@media screen and (max-width: $mobile-width) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,11 +1,11 @@
|
|||
.lo-FormElement {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $gray-text-color;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
|
@ -5,6 +5,10 @@
|
|||
height: 100%;
|
||||
padding-top: $header-height + $search-container-height;
|
||||
width: 100%;
|
||||
|
||||
&#{ & }-no-search-bar {
|
||||
padding-top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
.lo-App_Content {
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
.frm-FormHint {
|
||||
color: #777;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.38;
|
||||
margin: 0;
|
||||
padding-top: 12px;
|
||||
word-break: break-word;
|
||||
|
||||
&#{ & }-core {
|
||||
a {
|
||||
color: $poa-purple;
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
a {
|
||||
color: $sokol-cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&#{ & }-dai {
|
||||
a {
|
||||
color: $xdai-orange;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,97 @@
|
|||
.frm-KeysTypes {
|
||||
margin-bottom: $base-grid-gap;
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Row {
|
||||
margin-bottom: $base-grid-gap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
display: grid;
|
||||
grid-column-gap: $base-grid-gap;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Td {
|
||||
margin-bottom: $base-grid-gap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Label {
|
||||
@include not-selectable-text();
|
||||
border-radius: 3px;
|
||||
border: 1px solid $base-border-color;
|
||||
color: $gray-text-color;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
transition: 0.15s background-color ease-out, 0.15s border-color ease-out;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
border-color: darken($base-border-color, 15%);
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Radio:checked + &#{ & }-core {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $poa-purple;
|
||||
border-color: $poa-purple;
|
||||
box-shadow: 0 5px 10px 0 rgba($poa-purple, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Radio:checked + &#{ & }-sokol {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $sokol-cyan;
|
||||
border-color: $sokol-cyan;
|
||||
box-shadow: 0 5px 10px 0 rgba($sokol-cyan, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Radio:checked + &#{ & }-dai {
|
||||
&,
|
||||
&:hover {
|
||||
background-color: $xdai-orange;
|
||||
border-color: $xdai-orange;
|
||||
box-shadow: 0 5px 10px 0 rgba($xdai-orange, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.frm-KeysTypes_Radio {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
}
|
|
@ -11,14 +11,9 @@
|
|||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 45px;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
margin: 0 0 30px;
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
.sw-Separator {
|
||||
background-color: $base-border-color;
|
||||
border: 0;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 30px 0;
|
||||
width: 100%;
|
||||
}
|
|
@ -12,6 +12,7 @@
|
|||
@import "ButtonNewBallot";
|
||||
@import "ButtonVoting";
|
||||
@import "Footer";
|
||||
@import "FormHint";
|
||||
@import "Header";
|
||||
@import "IconActive";
|
||||
@import "IconAdd";
|
||||
|
@ -24,6 +25,7 @@
|
|||
@import "IconTelegram";
|
||||
@import "IconToFinalize";
|
||||
@import "IconTwitter";
|
||||
@import "KeysTypes";
|
||||
@import "LoadMore";
|
||||
@import "Loading";
|
||||
@import "LogoDai";
|
||||
|
@ -36,6 +38,7 @@
|
|||
@import "NewBallotMenu";
|
||||
@import "NewBallotMenuInfo";
|
||||
@import "SearchBar";
|
||||
@import "Separator";
|
||||
@import "SocialIcons";
|
||||
@import "VoteProgressBar";
|
||||
@import "Votes";
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
border: 1px solid $base-border-color;
|
||||
box-sizing: border-box;
|
||||
color: $input-color;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 0 10px;
|
||||
|
|
|
@ -83,3 +83,6 @@ $voting-positive-sokol: #6ac9b9;
|
|||
$voting-negative-dai: #f21b57;
|
||||
$voting-neutral-dai: #50bbda;
|
||||
$voting-positive-dai: #60db97;
|
||||
|
||||
// grid stuff
|
||||
$base-grid-gap: 30px;
|
File diff suppressed because one or more lines are too long
|
@ -8,4 +8,3 @@
|
|||
// @import 'application/base';
|
||||
// @import 'application/buttons';
|
||||
@import 'application/controls';
|
||||
@import 'application/new';
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
|
||||
return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
|
||||
}
|
|
@ -1,113 +1,98 @@
|
|||
import React from 'react'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { FormHint } from '../FormHint'
|
||||
|
||||
@inject('ballotStore')
|
||||
@observer
|
||||
export class KeysTypes extends React.Component {
|
||||
render() {
|
||||
const { ballotStore } = this.props
|
||||
const { ballotStore, networkBranch } = this.props
|
||||
const keyButtons = [
|
||||
[
|
||||
{
|
||||
checked: ballotStore.isAddKeysBallotType,
|
||||
hint: 'Add new key.',
|
||||
id: 'add-key',
|
||||
name: 'key-control',
|
||||
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add),
|
||||
text: 'Add key',
|
||||
value: ballotStore.KeysBallotType.add
|
||||
},
|
||||
{
|
||||
checked: ballotStore.isRemoveKeysBallotType,
|
||||
hint: 'Remove existing key.',
|
||||
id: 'remove-key',
|
||||
name: 'key-control',
|
||||
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove),
|
||||
text: 'Remove key',
|
||||
value: ballotStore.KeysBallotType.remove
|
||||
},
|
||||
{
|
||||
checked: ballotStore.isSwapKeysBallotType,
|
||||
hint: 'Remove existing key and add new key.',
|
||||
id: 'swap-key',
|
||||
name: 'key-control',
|
||||
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap),
|
||||
text: 'Swap key',
|
||||
value: ballotStore.KeysBallotType.swap
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
checked: ballotStore.isMiningKeyType,
|
||||
hint: 'Mining key type.',
|
||||
id: 'mining-key',
|
||||
name: 'keys',
|
||||
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining),
|
||||
text: 'Mining Key',
|
||||
value: ballotStore.KeyType.mining
|
||||
},
|
||||
{
|
||||
checked: ballotStore.isPayoutKeyType,
|
||||
hint: 'Payout key type.',
|
||||
id: 'payout-key',
|
||||
name: 'keys',
|
||||
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout),
|
||||
text: 'Payout Key',
|
||||
value: ballotStore.KeyType.payout
|
||||
},
|
||||
{
|
||||
checked: ballotStore.isVotingKeyType,
|
||||
hint: 'Voting key type.',
|
||||
id: 'voting-key',
|
||||
name: 'keys',
|
||||
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting),
|
||||
text: 'Voting Key',
|
||||
value: ballotStore.KeyType.voting
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="hidden">
|
||||
<div className="keys-radio-button-tr">
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<div className={`frm-KeysTypes frm-KeysTypes-${networkBranch}`}>
|
||||
{keyButtons.map((row, index) => (
|
||||
<div className="frm-KeysTypes_Row" key={index}>
|
||||
{row.map((item, index) => (
|
||||
<div className="frm-KeysTypes_Td" key={index}>
|
||||
<div className="frm-KeysTypes_Button">
|
||||
<input
|
||||
checked={item.checked}
|
||||
className="frm-KeysTypes_Radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
onChange={item.onChange}
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="add-key"
|
||||
value={ballotStore.KeysBallotType.add}
|
||||
checked={ballotStore.isAddKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
|
||||
value={item.value}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="add-key">
|
||||
Add key
|
||||
<label className={`frm-KeysTypes_Label frm-KeysTypes_Label-${networkBranch}`} htmlFor={item.id}>
|
||||
{item.text}
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Add new key.</p>
|
||||
</div>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="remove-key"
|
||||
value={ballotStore.KeysBallotType.remove}
|
||||
checked={ballotStore.isRemoveKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="remove-key">
|
||||
Remove key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Remove existing key.</p>
|
||||
</div>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="key-control"
|
||||
id="swap-key"
|
||||
value={ballotStore.KeysBallotType.swap}
|
||||
checked={ballotStore.isSwapKeysBallotType}
|
||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="swap-key">
|
||||
Swap key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Remove existing key and add new key.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="keys-radio-button-tr">
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="mining-key"
|
||||
value={ballotStore.KeyType.mining}
|
||||
checked={ballotStore.isMiningKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="mining-key">
|
||||
Mining Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Mining key type.</p>
|
||||
</div>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="payout-key"
|
||||
value={ballotStore.KeyType.payout}
|
||||
checked={ballotStore.isPayoutKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="payout-key">
|
||||
Payout Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Payout key type.</p>
|
||||
</div>
|
||||
<div className="keys-radio-button-td">
|
||||
<div className="radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
name="keys"
|
||||
id="voting-key"
|
||||
value={ballotStore.KeyType.voting}
|
||||
checked={ballotStore.isVotingKeyType}
|
||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
|
||||
/>
|
||||
<label className="radio-button-label" htmlFor="voting-key">
|
||||
Voting Key
|
||||
</label>
|
||||
</div>
|
||||
<p className="hint">Voting key type.</p>
|
||||
<FormHint text={item.hint} networkBranch={networkBranch} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@ import { ButtonAddBallot } from '../ButtonAddBallot'
|
|||
import { KeysTypes } from '../KeysTypes'
|
||||
import { NewBallotMenu } from '../NewBallotMenu'
|
||||
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
||||
import { Separator } from '../Separator'
|
||||
import { Validator } from '../Validator'
|
||||
import { constants } from '../../utils/constants'
|
||||
import { getNetworkBranch } from '../../utils/utils'
|
||||
|
@ -459,12 +460,10 @@ export class NewBallot extends React.Component {
|
|||
<div className="new-NewBallot_FormContent">
|
||||
<div className="form-el">
|
||||
<label>Description of the ballot</label>
|
||||
<div>
|
||||
<textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
{ballotStore.isBallotForKey ? <KeysTypes /> : null}
|
||||
<Separator />
|
||||
{ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
|
||||
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
||||
{metadata}
|
||||
<ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react'
|
||||
|
||||
export const Separator = ({ extraClassName = '' }) => {
|
||||
return <hr className={`sw-Separator ${extraClassName}`} />
|
||||
}
|
Loading…
Reference in New Issue