john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix input element styling madness

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-04 14:03:42 -08:00
parent 3ef0a3bdc9
commit eaf26343b8
16 changed files with 265 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
website/src/Users/UserForm.js
View File

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
import { reactAutoBind } from 'auto-bind2'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui'
import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui'
import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'
export class UserForm extends React.Component {
static propTypes = {
@@ -28,15 +29,19 @@ export class UserForm extends React.Component {
nonValue: true,
isDisabled: (r) => (!!r._id === false)
},
resendEmail: {
nonValue: true,
isDisabled: (r) => (!!r._id === false)
},
firstName: {
isValid: (r, v) => (v !== '')
},
lastName: {
isValid: (r, v) => (v !== '')
},
role: {
administrator: {
isValid: (r, v) => (v !== ''),
isDisabled: (r) => (api.loggedInUser._id === r._id)
isDisabled: (r) => (api.loggedInUser._id === r._id) // Adding a new user
},
project: {
isValid: (r, v) => (v !== '' || v === '')
@@ -99,40 +104,79 @@ export class UserForm extends React.Component {
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<Column>
<Column.Item>
<BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='First Name' name='firstName'
width={8} binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Last Name' name='lastName'
width={8} binder={this.state.binder} />
</Column.Item>
<Column.Item>
<BoundInput label='Email' name='email' width={8} message='Must be a valid email address. Required.'
binder={this.state.binder} />
<BoundEmailIcon name='emailValidated' binder={this.state.binder} width={4}
onClick={this.handleResendEmail} />
</Column.Item>
<Column.Item>
<BoundButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
binder={this.state.binder} onClick={this.handleChangeEmail} />
</Column.Item>
const { binder } = this.state
<Column.Item>
<BoundButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
binder={this.state.binder} onClick={this.props.onRemove} />
<BoundButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
binder={this.state.binder} onClick={this.handleReset} />
<BoundButton primary submit width={4} size='medium'
content={this.state.binder._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
binder={this.state.binder} />
</Column.Item>
return (
<form id='userForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={20} />
<Row>
<Row.Item width={20} />
<Row.Item grow>
<Column.Item>
<Column>
<Column.Item>
<Row>
<Row.Item grow>
<BoundInput label='First Name' name='firstName' binder={binder} />
</Row.Item>
<Row.Item width={20} />
<Row.Item grow>
<BoundInput label='Last Name' name='lastName' binder={binder} />
</Row.Item>
<Row.Item width={20} />
</Row>
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
</Row.Item>
<Row.Item width={10} />
<Row.Item>
<BoundEmailIcon name='emailValidated' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder} onClick={this.handleResendEmail} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<BoundCheckbox label={'Administrator'} name='administrator' binder={this.state.binder} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<BoundButton text='Reset' name='reset' binder={binder} onClick={this.handleReset} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
</Row.Item>
<Row.Item>
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
</Row.Item>
</Row>
</Column.Item>
</Column>
</Column.Item>
</Row.Item>
<Row.Item width={20} />
</Row>
<Column.Item height={20} />
</Column>
</form>
)

2
website/src/Users/UserList.js
View File

@@ -44,7 +44,7 @@ export class UserList extends React.Component {
this.state.users
? this.state.users.map((user, index) =>
(<List.Item className='user-list-item' key={user._id || '0'} onClick={this.props.onUserListClick}
active={true || user === this.props.selectedUser} data-index={index}>
active={user === this.props.selectedUser} data-index={index}>
<List.Icon name='profile' size={30} />
<List.Text>
{ user._id ? user.firstName + ' ' + user.lastName : '[New User]' }