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

Fix a bunch of layout issues

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-26 12:05:23 -08:00
parent ab243dc6db
commit f8e930d59e
29 changed files with 279 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import { regExpPattern } from 'regexp-pattern'
import { ValidatedEmailIcon } from './ValidatedEmailIcon'
import { Constants, api } from '../helpers'
import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated'
import { StackLayout } from '../ui'
import { Column } from '../ui'
export class UserForm extends React.Component {
static propTypes = {
@@ -144,32 +144,32 @@ export class UserForm extends React.Component {
render() {
return (
<form onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<ValidatedCheckbox label={'Deighton Access & Security Level'} width={6} selection
options={Constants.accessLevels} name='role' message='The user role and security level'
placeholder='' validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='First Name' name='firstName'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Last Name' name='lastName'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email' width={8} message='Must be a valid email address. Required.'
validator={this.state.validator} />
<ValidatedEmailIcon name='emailValidated' validator={this.state.validator} width={4}
onClick={this.handleResendEmail} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
validator={this.state.validator} onClick={this.handleChangeEmail} />
</StackLayout.Item>
</Column.Item>
<StackLayout.Item>
<Column.Item>
<ValidatedButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
validator={this.state.validator} onClick={this.props.onRemove} />
<ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
@@ -177,8 +177,8 @@ export class UserForm extends React.Component {
<ValidatedButton primary submit width={4} size='medium'
content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
validator={this.state.validator} />
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
)
}

14
website/src/Users/Users.js
View File

@@ -4,7 +4,7 @@ import { UserList } from './UserList'
import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from '../helpers'
import { RowLayout } from '../ui'
import { Row } from '../ui'
import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog'
export class Users extends React.Component {
@@ -240,16 +240,16 @@ export class Users extends React.Component {
<div>
<div>Users</div>
<RowLayout>
<Row>
{/* User List - Displayed on left hand side. */}
<RowLayout.Item width={5}>
<Row.Item width={5}>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
</RowLayout.Item>
</Row.Item>
{/* User Info - Displayed on right hand side. */}
<RowLayout.Item>
<Row.Item>
{
this.state.selectedUser
? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
@@ -257,8 +257,8 @@ export class Users extends React.Component {
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <UserFormPlaceholder />
}
</RowLayout.Item>
</RowLayout>
</Row.Item>
</Row>
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />