(add) form select component - (add) form input component - (add) form input title component - (add) form textarea component
This commit is contained in:
parent
744f3a1ff5
commit
e8b7a066bb
|
@ -11,9 +11,11 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
// TODO: delete
|
||||||
@include form-element-base-style();
|
@include form-element-base-style();
|
||||||
height: $input-height;
|
height: $input-height;
|
||||||
|
|
||||||
|
// TODO: keep
|
||||||
&[type='radio'] {
|
&[type='radio'] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -29,6 +31,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
// TODO: delete
|
||||||
@include form-element-base-style();
|
@include form-element-base-style();
|
||||||
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
|
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
.frm-BallotKeysMetadata_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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,7 +1,8 @@
|
||||||
$sw-ButtonAddBallot-height: 36px;
|
$sw-ButtonAddBallot-height: 44px;
|
||||||
|
|
||||||
.sw-ButtonAddBallot {
|
.sw-ButtonAddBallot {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
.frm-FormFieldTitle {
|
||||||
|
color: $gray-text-color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
.frm-FormInput_Field {
|
||||||
|
@include form-element-base-style();
|
||||||
|
height: $input-height;
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
.frm-FormSelect {
|
||||||
|
@include form-element-base-style();
|
||||||
|
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
|
||||||
|
appearance: none;
|
||||||
|
background-image: url('#{ $base-images-path }/Base/select.png');
|
||||||
|
background-position: right 13px center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: $input-height;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
.frm-FormTextarea_Field {
|
||||||
|
@include form-element-base-style();
|
||||||
|
height: 70px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
resize: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -4,6 +4,7 @@
|
||||||
@import "BallotDataPair";
|
@import "BallotDataPair";
|
||||||
@import "BallotFooter";
|
@import "BallotFooter";
|
||||||
@import "BallotInfoContainer";
|
@import "BallotInfoContainer";
|
||||||
|
@import "BallotKeysMetadata";
|
||||||
@import "Ballots";
|
@import "Ballots";
|
||||||
@import "BaseLoader";
|
@import "BaseLoader";
|
||||||
@import "ButtonAddBallot";
|
@import "ButtonAddBallot";
|
||||||
|
@ -12,7 +13,11 @@
|
||||||
@import "ButtonNewBallot";
|
@import "ButtonNewBallot";
|
||||||
@import "ButtonVoting";
|
@import "ButtonVoting";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
|
@import "FormFieldTitle";
|
||||||
@import "FormHint";
|
@import "FormHint";
|
||||||
|
@import "FormInput";
|
||||||
|
@import "FormSelect";
|
||||||
|
@import "FormTextarea";
|
||||||
@import "Header";
|
@import "Header";
|
||||||
@import "IconActive";
|
@import "IconActive";
|
||||||
@import "IconAdd";
|
@import "IconAdd";
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,18 +1,22 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Select from 'react-select'
|
import { FormInput } from '../FormInput'
|
||||||
|
import { FormSelect } from '../FormSelect'
|
||||||
|
import { Separator } from '../Separator'
|
||||||
import { inject, observer } from 'mobx-react'
|
import { inject, observer } from 'mobx-react'
|
||||||
|
|
||||||
@inject('ballotStore', 'contractsStore')
|
@inject('ballotStore', 'contractsStore')
|
||||||
@observer
|
@observer
|
||||||
export class BallotKeysMetadata extends React.Component {
|
export class BallotKeysMetadata extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const { ballotStore, contractsStore } = this.props
|
const { ballotStore, contractsStore, networkBranch } = this.props
|
||||||
let options = []
|
let options = []
|
||||||
|
|
||||||
for (var key in contractsStore.validatorsMetadata) {
|
for (var key in contractsStore.validatorsMetadata) {
|
||||||
if (contractsStore.validatorsMetadata.hasOwnProperty(key)) {
|
if (contractsStore.validatorsMetadata.hasOwnProperty(key)) {
|
||||||
options.push(contractsStore.validatorsMetadata[key])
|
options.push(contractsStore.validatorsMetadata[key])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let newVotingPayoutKeys = ''
|
let newVotingPayoutKeys = ''
|
||||||
if (
|
if (
|
||||||
ballotStore.isNewValidatorPersonalData &&
|
ballotStore.isNewValidatorPersonalData &&
|
||||||
|
@ -56,62 +60,50 @@ export class BallotKeysMetadata extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="frm-BallotKeysMetadata">
|
||||||
<div>
|
<div className="frm-BallotKeysMetadata_Row">
|
||||||
<div className="left">
|
<FormInput
|
||||||
<div className="form-el">
|
id="key"
|
||||||
<label htmlFor="key">{ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}</label>
|
networkBranch={networkBranch}
|
||||||
<input
|
onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
|
||||||
type="text"
|
title={ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}
|
||||||
id="key"
|
value={ballotStore.ballotKeys.affectedKey}
|
||||||
value={ballotStore.ballotKeys.affectedKey}
|
hint={`${
|
||||||
onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
|
ballotStore.isNewValidatorPersonalData
|
||||||
/>
|
? 'Mining key address of new validator.'
|
||||||
<p className="hint">
|
: 'Affected key address of validator to vote for.'
|
||||||
{ballotStore.isNewValidatorPersonalData
|
}
|
||||||
? 'Mining key address of new validator.'
|
<br>Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.`}
|
||||||
: 'Affected key address of validator to vote for.'}
|
/>
|
||||||
<br />
|
<FormSelect
|
||||||
Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
|
disabled={ballotStore.isNewValidatorPersonalData}
|
||||||
</p>
|
hint="Mining key address of validator to vote for.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee."
|
||||||
</div>
|
id="mining-key"
|
||||||
</div>
|
name="form-field-name"
|
||||||
<div className="right">
|
networkBranch={networkBranch}
|
||||||
<div className="form-el">
|
onChange={ballotStore.setMiningKey}
|
||||||
<label htmlFor="mining-key">Mining Key</label>
|
options={options}
|
||||||
<Select.Creatable
|
title="Mining Key"
|
||||||
name="form-field-name"
|
value={ballotStore.ballotKeys.miningKey}
|
||||||
id="mining-key"
|
/>
|
||||||
value={ballotStore.ballotKeys.miningKey}
|
|
||||||
onChange={ballotStore.setMiningKey}
|
|
||||||
options={options}
|
|
||||||
disabled={ballotStore.isNewValidatorPersonalData}
|
|
||||||
/>
|
|
||||||
<p className="hint">
|
|
||||||
Mining key address of validator to vote for.
|
|
||||||
<br />
|
|
||||||
Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="clearfix"> </div>
|
|
||||||
{newVotingPayoutKeys}
|
|
||||||
<div className="left">
|
|
||||||
<div className="form-el">
|
|
||||||
<label htmlFor="datetime-local">Ballot End</label>
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="datetime-local"
|
|
||||||
value={ballotStore.endTime}
|
|
||||||
min={ballotStore.endTime}
|
|
||||||
onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
|
|
||||||
/>
|
|
||||||
<p className="hint">Ballot's end time.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<div className="clearfix"> </div>
|
||||||
|
{newVotingPayoutKeys}
|
||||||
|
<div className="frm-BallotKeysMetadata_Row">
|
||||||
|
<FormInput
|
||||||
|
hint="Ballot's end time."
|
||||||
|
id="datetime-local"
|
||||||
|
min={ballotStore.endTime}
|
||||||
|
networkBranch={networkBranch}
|
||||||
|
onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
|
||||||
|
title="Ballot End"
|
||||||
|
type="datetime-local"
|
||||||
|
value={ballotStore.endTime}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const FormFieldTitle = ({ extraClassName = '', text, htmlFor }) => {
|
||||||
|
return (
|
||||||
|
<label className={`frm-FormFieldTitle ${extraClassName}`} htmlFor={htmlFor}>
|
||||||
|
{text}
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,5 +1,10 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
|
export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
|
||||||
return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
|
return (
|
||||||
|
<p
|
||||||
|
className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}
|
||||||
|
dangerouslySetInnerHTML={{ __html: text }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { FormFieldTitle } from '../FormFieldTitle'
|
||||||
|
import { FormHint } from '../FormHint'
|
||||||
|
|
||||||
|
export const FormInput = ({
|
||||||
|
disabled = false,
|
||||||
|
extraClassName = '',
|
||||||
|
hint,
|
||||||
|
id,
|
||||||
|
min,
|
||||||
|
networkBranch,
|
||||||
|
onChange,
|
||||||
|
placeholder,
|
||||||
|
title,
|
||||||
|
type = 'text',
|
||||||
|
value
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={`frm-FormInput ${extraClassName}`}>
|
||||||
|
<FormFieldTitle htmlFor={id} text={title} />
|
||||||
|
<input
|
||||||
|
className="frm-FormInput_Field"
|
||||||
|
disabled={disabled}
|
||||||
|
id={id}
|
||||||
|
min={min}
|
||||||
|
onChange={onChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
type={type}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,28 @@
|
||||||
|
import React from 'react'
|
||||||
|
import Select from 'react-select'
|
||||||
|
import { FormFieldTitle } from '../FormFieldTitle'
|
||||||
|
import { FormHint } from '../FormHint'
|
||||||
|
|
||||||
|
export const FormSelect = ({
|
||||||
|
disabled = false,
|
||||||
|
extraClassName = '',
|
||||||
|
hint,
|
||||||
|
id,
|
||||||
|
name = '',
|
||||||
|
networkBranch,
|
||||||
|
onChange,
|
||||||
|
options,
|
||||||
|
title,
|
||||||
|
value
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={`frm-FormSelect ${extraClassName}`}>
|
||||||
|
<FormFieldTitle htmlFor={id} text={title} />
|
||||||
|
<label className="frm-FormSelect_Title" htmlFor={id}>
|
||||||
|
{title}
|
||||||
|
</label>
|
||||||
|
<Select.Creatable name={name} id={id} value={value} onChange={onChange} options={options} disabled={disabled} />
|
||||||
|
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { FormFieldTitle } from '../FormFieldTitle'
|
||||||
|
import { FormHint } from '../FormHint'
|
||||||
|
|
||||||
|
export const FormTextarea = ({
|
||||||
|
disabled = false,
|
||||||
|
extraClassName = '',
|
||||||
|
hint,
|
||||||
|
id,
|
||||||
|
networkBranch,
|
||||||
|
onChange,
|
||||||
|
placeholder,
|
||||||
|
title,
|
||||||
|
value
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={`frm-FormTextarea ${extraClassName}`}>
|
||||||
|
<FormFieldTitle htmlFor={id} text={title} />
|
||||||
|
<textarea
|
||||||
|
className="frm-FormTextarea_Field"
|
||||||
|
disabled={disabled}
|
||||||
|
id={id}
|
||||||
|
onChange={onChange}
|
||||||
|
placeholder={placeholder}
|
||||||
|
rows="4"
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -6,6 +6,7 @@ import { BallotKeysMetadata } from '../BallotKeysMetadata'
|
||||||
import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
|
import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
|
||||||
import { BallotProxyMetadata } from '../BallotProxyMetadata'
|
import { BallotProxyMetadata } from '../BallotProxyMetadata'
|
||||||
import { ButtonAddBallot } from '../ButtonAddBallot'
|
import { ButtonAddBallot } from '../ButtonAddBallot'
|
||||||
|
import { FormTextarea } from '../FormTextarea'
|
||||||
import { KeysTypes } from '../KeysTypes'
|
import { KeysTypes } from '../KeysTypes'
|
||||||
import { NewBallotMenu } from '../NewBallotMenu'
|
import { NewBallotMenu } from '../NewBallotMenu'
|
||||||
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
||||||
|
@ -425,7 +426,7 @@ export class NewBallot extends React.Component {
|
||||||
|
|
||||||
switch (ballotStore.ballotType) {
|
switch (ballotStore.ballotType) {
|
||||||
case ballotStore.BallotType.keys:
|
case ballotStore.BallotType.keys:
|
||||||
metadata = <BallotKeysMetadata />
|
metadata = <BallotKeysMetadata networkBranch={networkBranch} />
|
||||||
minThreshold = contractsStore.keysBallotThreshold
|
minThreshold = contractsStore.keysBallotThreshold
|
||||||
break
|
break
|
||||||
case ballotStore.BallotType.minThreshold:
|
case ballotStore.BallotType.minThreshold:
|
||||||
|
@ -458,10 +459,13 @@ export class NewBallot extends React.Component {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="new-NewBallot_FormContent">
|
<div className="new-NewBallot_FormContent">
|
||||||
<div className="form-el">
|
<FormTextarea
|
||||||
<label>Description of the ballot</label>
|
id="datetime-local"
|
||||||
<textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
|
networkBranch={networkBranch}
|
||||||
</div>
|
onChange={e => ballotStore.setMemo(e)}
|
||||||
|
title="Description of the ballot"
|
||||||
|
value={ballotStore.memo}
|
||||||
|
/>
|
||||||
<Separator />
|
<Separator />
|
||||||
{ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
|
{ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
|
||||||
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
||||||
|
|
Loading…
Reference in New Issue