grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Form fixes (#5664)

Browse Source 
* label fix

* label-tx-row

* form fixes
This commit is contained in:
Craig O'Connor 2017-05-22 05:00:37 -04:00 committed by Jaco Greeff
parent 602115d81e
commit 7a4eb15b4c
14 changed files with 81 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/ui/Actionbar/actionbar.css
View File

@ -19,12 +19,14 @@
background: transparent;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0.5em 1.5em;
margin: 0;
.title {
text-transform: uppercase;
margin: 0;
}
.children {

5
js/src/ui/Container/container.css
View File

@ -82,6 +82,11 @@ $borderColor: rgba(242, 242, 242, 1);
background: $backgroundLight !important;
}
.cardContainer {
width: 100%;
height: 100%;
}
.link {
width: 100%;
height: 100%;

2
js/src/ui/Container/container.js
View File

@ -81,7 +81,7 @@ export default class Container extends Component {
link
? this.renderLink(link, card)
: (
<div>
<div className={ styles.cardContainer }>
{ card }
{ this.renderHover() }
</div>

2
js/src/ui/Form/AddressSelect/addressSelect.js
View File

@ -317,7 +317,7 @@ class AddressSelect extends Component {
content = (
<div className={ styles.cards }>
<div>{ cards }</div>
{ cards }
</div>
);
}

4
js/src/ui/Form/Input/input.js
View File

@ -114,11 +114,11 @@ export default class Input extends Component {
return (
<LabelWrapper
className={ styles.container }
className={ `${styles.container} ${className}` }
label={ label }
>
<SemanticInput
className={ `${styles.input} ${className}` }
className={ styles.input }
disabled={ disabled }
error={ !!error }
fluid

6
js/src/ui/Form/InputAddress/inputAddress.css
View File

@ -27,10 +27,6 @@
}
}
.inputEmpty input {
padding-left: 0 !important;
}
.small {
.input input {
padding-left: 40px !important;
@ -48,7 +44,7 @@
.icon,
.iconDisabled {
position: absolute;
top: 35px;
top: 33px;
&.noLabel {
top: 10px;

2
js/src/ui/GasPriceSelector/CustomBar/customBar.js
View File

@ -38,7 +38,7 @@ export default class CustomBar extends Component {
: COLORS.default;
const borderWidth = 0.5;
const borderColor = 'rgba(255, 255, 255, 0.5)';
const borderColor = 'rgba(0, 0, 0, 0)';
return (
<g>

4
js/src/ui/GasPriceSelector/CustomShape/customShape.js
View File

@ -35,13 +35,13 @@ export default class CustomShape extends Component {
return (
<g>
<Dot
style={ { fill: 'white' } }
style={ { fill: 'rgb(129, 190, 226)' } }
cx={ cx }
cy={ cy }
r={ 5 }
/>
<Dot
style={ { fill: 'rgb(255, 99, 132)' } }
style={ { fill: 'rgb(129, 190, 226)', zIndex: '700' } }
cx={ cx }
cy={ cy }
r={ 3 }

12
js/src/ui/GasPriceSelector/util.js
View File

@ -15,12 +15,12 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const COLORS = {
default: 'rgba(255, 99, 132, 0.2)',
selected: 'rgba(255, 99, 132, 0.5)',
hover: 'rgba(255, 99, 132, 0.15)',
grid: 'rgba(255, 99, 132, 0.5)',
line: 'rgb(255, 99, 132)',
intersection: '#fff'
default: 'rgba(33, 133, 208, 0.4)',
selected: 'rgba(33, 133, 208, 0.9)',
hover: 'rgba(33, 133, 208, 1)',
grid: 'rgba(33, 133, 208, 0.6)',
line: 'rgba(0, 0, 0, 0.4)',
intersection: '#81BEE2'
};
const countModifier = (count) => {

3
js/src/ui/MethodDecoding/methodDecoding.css
View File

@ -71,6 +71,9 @@
}
.inputs, .addressContainer {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 2em;
}

13
js/src/ui/MethodDecoding/methodDecoding.js
View File

@ -20,7 +20,8 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { TypedInput, InputAddress } from '../Form';
import IdentityIcon from '~/ui/IdentityIcon';
import { TypedInput, Label } from '../Form';
import Loading from '../Loading';
import MethodDecodingStore from './methodDecodingStore';
@ -622,12 +623,12 @@ class MethodDecoding extends Component {
renderAddressName (address, withName = true) {
return (
<div className={ styles.addressContainer }>
<InputAddress
disabled
className={ styles.address }
value={ address }
text={ withName }
<IdentityIcon
address={ address }
center
inline
/>
<Label>{address}</Label>
</div>
);
}

52
js/src/views/Account/Transfer/Details/details.js
View File

@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { nullableProptype } from '@parity/shared/util/proptypes';
import Form, { AddressSelect, Checkbox, Input, InputAddressSelect } from '@parity/ui/Form';
import Form, { AddressSelect, Checkbox, Input, InputAddressSelect, Label } from '@parity/ui/Form';
import TokenSelect from './tokenSelect';
import styles from '../transfer.css';
@ -59,13 +59,19 @@ export default class Details extends Component {
const label = (
<FormattedMessage
id='transfer.details.amount.label'
defaultMessage='amount to transfer (in {tag})'
defaultMessage='Amount to transfer (in {tag})'
values={ {
tag: token.tag
} }
/>
);
let totalAmountStyle = { color: 'rgba(0,0,0,.87)' };
if (totalError) {
totalAmountStyle = { color: '#9F3A38' };
}
return (
<Form>
{ this.renderTokenSelect() }
@ -74,12 +80,13 @@ export default class Details extends Component {
<div className={ styles.columns }>
<div>
<Input
className={ styles.inputContainer }
disabled={ all }
label={ label }
hint={
<FormattedMessage
id='transfer.details.amount.hint'
defaultMessage='the amount to transfer to the recipient'
defaultMessage='The amount to transfer to the recipient'
/>
}
value={ value }
@ -93,7 +100,7 @@ export default class Details extends Component {
label={
<FormattedMessage
id='transfer.details.fullBalance.label'
defaultMessage='full account balance'
defaultMessage='Full account balance'
/>
}
onClick={ this.onCheckAll }
@ -102,21 +109,17 @@ export default class Details extends Component {
</div>
</div>
<div className={ styles.columns }>
<div>
<Input
disabled
label={
<FormattedMessage
id='transfer.details.total.label'
defaultMessage='total transaction amount'
/>
}
error={ totalError }
>
<div className={ styles.inputoverride }>
{ total }<small> ETH</small>
</div>
</Input>
<div className={ styles.totalTx }>
<Label className={ styles.transferLabel }>
<FormattedMessage
id='transfer.details.total.label'
defaultMessage='Total transaction amount'
/>
</Label>
<div className={ styles.totalAmount } style={ totalAmountStyle }>
<div>{ total }<small> ETH</small></div>
<div>{ totalError }</div>
</div>
</div>
<div>
@ -125,7 +128,7 @@ export default class Details extends Component {
label={
<FormattedMessage
id='transfer.details.advanced.label'
defaultMessage='advanced sending options'
defaultMessage='Advanced sending options'
/>
}
onClick={ this.onCheckExtras }
@ -152,13 +155,13 @@ export default class Details extends Component {
label={
<FormattedMessage
id='transfer.details.sender.label'
defaultMessage='sender address'
defaultMessage='Sender address'
/>
}
hint={
<FormattedMessage
id='transfer.details.sender.hint'
defaultMessage='the sender address'
defaultMessage='The sender address'
/>
}
value={ sender }
@ -174,16 +177,17 @@ export default class Details extends Component {
return (
<div className={ styles.address }>
<InputAddressSelect
className={ styles.inputContainer }
label={
<FormattedMessage
id='transfer.details.recipient.label'
defaultMessage='recipient address'
defaultMessage='Recipient address'
/>
}
hint={
<FormattedMessage
id='transfer.details.recipient.hint'
defaultMessage='the recipient address'
defaultMessage='The recipient address'
/>
}
error={ recipientError }

16
js/src/views/Account/Transfer/errors.js
View File

@ -15,14 +15,14 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
const ERRORS = {
requireSender: 'a valid sender is required for the transaction',
requireRecipient: 'a recipient network address is required for the transaction',
invalidAddress: 'the supplied address is an invalid network address',
invalidAmount: 'the supplied amount should be a valid positive number',
invalidDecimals: 'the supplied amount exceeds the allowed decimals',
largeAmount: 'the transaction total is higher than the available balance',
gasException: 'the transaction will throw an exception with the current values',
gasBlockLimit: 'the transaction execution will exceed the block gas limit'
requireSender: 'A valid sender is required for the transaction',
requireRecipient: 'A recipient network address is required for the transaction',
invalidAddress: 'The supplied address is an invalid network address',
invalidAmount: 'The supplied amount should be a valid positive number',
invalidDecimals: 'The supplied amount exceeds the allowed decimals',
largeAmount: 'The transaction total is higher than the available balance',
gasException: 'The transaction will throw an exception with the current values',
gasBlockLimit: 'The transaction execution will exceed the block gas limit'
};
export default ERRORS;

16
js/src/views/Account/Transfer/transfer.css
View File

@ -139,8 +139,20 @@
font-size: 0.75em;
}
.inputoverride {
padding-top: 24px !important;
.inputContainer {
padding-top: 10px;
}
.totalAmount {
padding-top: 6px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
}
.totalTx {
padding-top: 10px;
}
.contentTitle {