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

9
website/.eslintrc
View File

@@ -19,9 +19,10 @@
"__COVERAGE__" : false
},
"rules": {
"key-spacing" : 0,
"jsx-quotes" : [2, "prefer-single"],
"object-curly-spacing" : [2, "always"],
"space-before-function-paren": ["error", "never"]
"key-spacing": 0,
"jsx-quotes": [2, "prefer-single"],
"object-curly-spacing": [2, "always"],
"space-before-function-paren": ["error", "never"],
"comma-dangle": ["error", "only-multiline"]
}
}

2
website/public/index.html
View File

@@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
</head>
<body>
<body style="margin: 0;">
<div id="root"></div>
</body>
</html>

35
website/src/App.js
View File

@@ -3,7 +3,7 @@ import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRo
import { Home } from './Home'
import { Profile } from './Profile'
import { Users } from './Users'
import { HolyGrail, Image, Text, Icon } from './ui'
import { Column, Row, Image, Text, Icon, Box } from './ui'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import logoImage from 'images/logo.png'
import { versionInfo } from './version'
@@ -11,12 +11,21 @@ import { versionInfo } from './version'
export class App extends React.Component {
render() {
return (
<HolyGrail>
<HolyGrail.Header>
<Image source={logoImage} width={50} height={50} margin={5} />
<Icon name='logout' />
</HolyGrail.Header>
<HolyGrail.Body>
<Column minHeight='100vh'>
<Column.Item>
<Box color='#FAFAFA' borderBottom='1px solid #B2B2B2'>
<Row minWidth='100vw'>
<Row.Item>
<Image source={logoImage} width={50} height={50} margin={5} />
</Row.Item>
<Row.Item grow>&nbsp;</Row.Item>
<Row.Item>
<Icon name='logout' />
</Row.Item>
</Row>
</Box>
</Column.Item>
<Column.Item grow>
<Router basename='/'>
<Switch>
<Route path='/login' component={Login} />
@@ -30,11 +39,13 @@ export class App extends React.Component {
<Route component={Home} />{/* No Match Route */}
</Switch>
</Router>
</HolyGrail.Body>
<HolyGrail.Footer>
<Text margin={10}>{versionInfo.fullVersion} &copy; 2018, Kingston Software Solutions.</Text>
</HolyGrail.Footer>
</HolyGrail>
</Column.Item>
<Column.Item>
<Box color='#FAFAFA' borderTop='1px solid #B2B2B2'>
<Text tone='dimmed' margin={10}>{versionInfo.fullVersion} &copy; 2018, Kingston Software Solutions.</Text>
</Box>
</Column.Item>
</Column>
)
}
}

22
website/src/Auth/ForgotPassword.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { Text, StackLayout } from '../ui'
import { Text, Column } from '../ui'
import { MessageDialog, WaitDialog } from '../Dialog'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { api } from '../helpers'
@@ -68,23 +68,23 @@ export class ForgotPassword extends React.Component {
return (
<div>
<form onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<Text size='large'>Forgotten Password</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator}
message='A valid email address' />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Text>The email address of an existing user to send the password reset link to.</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit'
primary submit validator={this.state.validator}>Submit</ValidatedButton>
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
<WaitDialog active={!!this.state.waitDialog}

36
website/src/Auth/Login.js
View File

@@ -4,7 +4,7 @@ import { regExpPattern } from 'regexp-pattern'
import { api } from '../helpers'
import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated'
import { WaitDialog, MessageDialog } from '../Dialog'
import { Image, Link, Text, StackLayout } from '../ui'
import { Image, Link, Text, Column } from '../ui'
import headerLogo from 'images/deighton.png'
export class Login extends React.Component {
@@ -87,40 +87,40 @@ export class Login extends React.Component {
}
render() {
return (
return null && (
<div>
<form onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<Image source={headerLogo} width={279} height={73} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator}
message='Enter the email address associated with your account.' width={16} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput password label='Password' name='password'
validator={this.state.validator} message='Enter your password.' width={16} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} validator={this.state.validator}
message='Should we keep you logged in on this computer?' className='login-checkbox' />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Login'
submit validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Text>
Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials.
</Text>
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
<WaitDialog active={this.state.waitDialog} message='Logging In' />

2
website/src/Auth/Logout.js
View File

@@ -4,7 +4,7 @@ import { api } from '../helpers'
export class Logout extends React.Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
}
componentDidMount(event) {
api.logout().then(() => {

4
website/src/Auth/ProtectedRoute.js
View File

@@ -8,8 +8,8 @@ export class ProtectedRoute extends React.Component {
roles: PropTypes.array,
location: PropTypes.shape({
pathname: PropTypes.string,
search: PropTypes.string
})
search: PropTypes.string,
}),
}
constructor(props) {

26
website/src/Auth/ResetPassword.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Text, StackLayout } from '../ui'
import { Text, Column } from '../ui'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { MessageDialog, WaitDialog } from '../Dialog'
import { api } from '../helpers'
@@ -63,32 +63,32 @@ export class ResetPassword extends React.Component {
return (
<div>
<form onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<Text size='large'>Reset Password</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
width={16} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
width={16} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Text>
Passwords can contain special characters and should be unique to this application.
<br /><br />
Passwords must be at least 6 characters long.
</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit'
submit validator={this.state.validator} />
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
<MessageDialog error open={!!this.state.messageDialog}

18
website/src/Dialog/ChangeEmailDialog.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, StackLayout, Text } from '../ui'
import { Modal, Button, Icon, Column, Text } from '../ui'
import { ValidatedInput, ValidatedButton, Validator } from '../Validated'
import { regExpPattern } from 'regexp-pattern'
@@ -58,24 +58,24 @@ export class ChangeEmailDialog extends React.Component {
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
closeOnDimmerClick={false}>
<form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<Text>Change Email</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='New Email' name='newEmail' width={16}
message='Your new email address, e.g. xyz@abc.com, cannot be blank'
validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
<Icon name='checkmark' /> OK
</ValidatedButton>
<Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel
</Button>
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
</Modal>
)

34
website/src/Dialog/ChangePasswordDialog.js
View File

@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, StackLayout, RowLayout, Text } from '../ui'
import { Modal, Button, Icon, Column, Row, Text } from '../ui'
import { ValidatedInput, ValidatedActionsButton, Validator } from '../Validated'
export class ChangePasswordDialog extends React.Component {
@@ -66,38 +66,38 @@ export class ChangePasswordDialog extends React.Component {
return (
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}>
<form id='passwordForm' onSubmit={this.handleSubmit}>
<StackLayout.Item color='black' icon='edit'>
<Column.Item color='black' icon='edit'>
<Text size='large'>Change Password</Text>
</StackLayout.Item>
<StackLayout.Item>
<StackLayout>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Column>
<Column.Item>
<ValidatedInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank'
width={8} validator={this.state.validator} />
</StackLayout.Item>
</StackLayout>
</StackLayout.Item>
<StackLayout.Item>
<RowLayout>
</Column.Item>
</Column>
</Column.Item>
<Column.Item>
<Row>
<ValidatedActionsButton primary submit form='passwordForm' name='submit' validator={this.state.validator}>
<Icon name='checkmark' /> OK
</ValidatedActionsButton>
<Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel
</Button>
</RowLayout>
</StackLayout.Item>
</Row>
</Column.Item>
</form>
</Modal>
)

18
website/src/Dialog/MessageDialog.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, Icon, StackLayout, Text } from '../ui'
import { Modal, Button, Icon, Column, Text } from '../ui'
export class MessageDialog extends React.Component {
static propTypes = {
@@ -13,19 +13,19 @@ export class MessageDialog extends React.Component {
render() {
return (
<Modal open={this.props.open} onClose={this.props.onDismiss} closeOnDimmerClick={false}>
<StackLayout>
<StackLayout.Item>
<Column>
<Column.Item>
<Text>{this.props.title}</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Text>{this.props.message}</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Button onClick={this.props.onDismiss}>
<Icon name='checkmark' /> OK
</Button>
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</Modal>
)
}

18
website/src/Dialog/YesNoMessageDialog.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, StackLayout, Text, Icon } from '../ui'
import { Modal, Button, Column, Text, Icon } from '../ui'
export class YesNoMessageDialog extends React.Component {
static propTypes = {
@@ -18,22 +18,22 @@ export class YesNoMessageDialog extends React.Component {
return (
<Modal open={this.props.open} onClose={this.onDismiss(false)}
closeOnDimmerClick={false} className='yes-no-modal'>
<StackLayout>
<StackLayout.Item color='orange'>
<Column>
<Column.Item color='orange'>
<Text>{this.props.title}</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Text>{this.props.message}</Text>
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Button negative onClick={this.onDismiss(false)}>
<Icon name='remove' /> No
</Button>
<Button positive onClick={this.onDismiss(true)}>
<Icon name='checkmark' /> Yes
</Button>
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</Modal>
)
}

26
website/src/Profile/ProfileForm.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { StackLayout, Button } from '../ui'
import { Column, Button } from '../ui'
import { regExpPattern } from 'regexp-pattern'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
@@ -95,30 +95,30 @@ export class ProfileForm extends React.Component {
render() {
return (
<form className='profile-form' onSubmit={this.handleSubmit}>
<StackLayout stackable>
<StackLayout.Item>
<Column stackable>
<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='Required. Must be a valid email address.'
validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;'
width={4} onClick={this.props.onChangeEmail} />
<Button fluid content={'Change Password'} label='&nbsp;'
width={4} onClick={this.props.onChangePassword} />
</StackLayout.Item>
<StackLayout.Item>
</Column.Item>
<Column.Item>
<ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
validator={this.state.validator} />
</StackLayout.Item>
</StackLayout>
</Column.Item>
</Column>
</form>
)
}

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} />

29
website/src/ui/Box.js Normal file
View File

@@ -0,0 +1,29 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
class Box extends Component {
static propTypes = {
borderTop: PropTypes.number,
borderBottom: PropTypes.string,
borderRight: PropTypes.string,
borderLeft: PropTypes.string,
border: PropTypes.string,
color: PropTypes.string,
children: PropTypes.node,
}
render() {
const { children, color, borderTop, borderBottom, borderLeft, borderRight, border } = this.props
return (
<div style={[
color && { backgroundColor: color },
border ? { border } : { borderTop, borderBottom, borderLeft, borderRight }]}>
{children}
</div>
)
}
}
export default Radium(Box)

4
website/src/ui/Checkbox.style.js
View File

@@ -22,8 +22,8 @@ export default {
position: 'absolute',
display: 'block',
content: '',
left: 10,
top: 5,
left: 8,
top: 4,
width: 6,
height: 12,
borderStyle: 'solid',

37
website/src/ui/Column.js Normal file
View File

@@ -0,0 +1,37 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Column extends Component {
static propTypes = {
children: PropTypes.node,
minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
}
render() {
const { children, minHeight } = this.props
return (
<div style={{ display: 'flex', minHeight, flexDirection: 'column' }}>{children}</div>
)
}
}
Column.Item = Radium(class StackLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
grow: PropTypes.bool
}
render() {
const { children, grow, minHeight } = this.props
const flexGrow = grow ? 1 : null
return (
<div style={{ minHeight, flexGrow }}>{children}</div>
)
}
})
export default Radium(Column)

7
website/src/ui/Dimmer.js
View File

@@ -6,7 +6,8 @@ import { reactAutoBind } from 'auto-bind2'
export class Dimmer extends Component {
static propTypes = {
children: PropTypes.node
children: PropTypes.node,
active: PropTypes.bool
}
constructor(props) {
@@ -19,11 +20,11 @@ export class Dimmer extends Component {
}
render() {
return (
return this.props.active ? (
<div style={style.dimmer} onClick={this.preventPropagation}>
{this.props.children}
</div>
)
) : null
}
}

54
website/src/ui/HolyGrail.js
View File

@@ -1,54 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './HolyGrail.style.js'
class HolyGrail extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.base}>{this.props.children}</div>
)
}
}
HolyGrail.Header = Radium(class HolyGrailHeader extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.header}>{this.props.children}</div>
)
}
})
HolyGrail.Footer = Radium(class HolyGrailFooter extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.footer}>{this.props.children}</div>
)
}
})
HolyGrail.Body = Radium(class HolyGrailBody extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.body}>{this.props.children}</div>
)
}
})
export default Radium(HolyGrail)

19
website/src/ui/HolyGrail.style.js
View File

@@ -1,19 +0,0 @@
export default {
base: {
display: 'flex',
minHeight: '100vh',
flexDirection: 'column'
},
body: {
display: 'flex',
flexGrow: 1
},
header: {
backgroundColor: '#FAFAFA',
borderBottom: '1px solid #B2B2B2'
},
footer: {
backgroundColor: '#FAFAFA',
borderTop: '1px solid #B2B2B2'
}
}

18
website/src/ui/Modal.js
View File

@@ -1,30 +1,22 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './Modal.style'
import { reactAutoBind } from 'auto-bind2'
import Radium from 'radium'
import { Dimmer } from '../ui'
class Modal extends Component {
static propTypes = {
children: PropTypes.node
}
constructor(props) {
super(props)
reactAutoBind(this)
}
preventPropagation(e) {
e.stopPropagation()
children: PropTypes.node,
open: PropTypes.bool
}
render() {
return (
<div style={style.dimmer} onClick={this.preventPropagation}>
<Dimmer active={this.props.open}>
<div style={style.modal}>
{this.props.children}
</div>
</div>
</Dimmer>
)
}
}

37
website/src/ui/Row.js Normal file
View File

@@ -0,0 +1,37 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Row extends Component {
static propTypes = {
children: PropTypes.node,
minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
const { children, minWidth } = this.props
return (
<div style={{ display: 'flex', minWidth, flexDirection: 'row' }}>{children}</div>
)
}
}
Row.Item = Radium(class RowLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
grow: PropTypes.bool,
}
render() {
const { children, grow, minWidth } = this.props
const flexGrow = grow ? 1 : null
return (
<div style={{ minWidth, flexGrow }}>{children}</div>
)
}
})
export default Radium(Row)

31
website/src/ui/RowLayout.js
View File

@@ -1,31 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class RowLayout extends Component {
static propTypes = {
children: PropTypes.node,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
return (
<div style={{ display: 'flex', minWidth: this.props.width, flexDirection: 'row' }}>{this.props.children}</div>
)
}
}
RowLayout.Item = Radium(class RowLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
}
render() {
return (
<div style={[ this.props.width ? { minWidth: this.props.width } : { flexGrow: 1 } ]}>{this.props.children}</div>
)
}
})
export default Radium(RowLayout)

31
website/src/ui/StackLayout.js
View File

@@ -1,31 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class StackLayout extends Component {
static propTypes = {
children: PropTypes.node,
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
return (
<div style={{ display: 'flex', minHeight: this.props.height, flexDirection: 'column' }}>{this.props.children}</div>
)
}
}
StackLayout.Item = Radium(class StackLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
}
render() {
return (
<div style={[ this.props.height ? { minHeight: this.props.height } : { flexGrow: 1 } ]}>{this.props.children}</div>
)
}
})
export default Radium(StackLayout)

7
website/src/ui/Text.js
View File

@@ -7,11 +7,13 @@ class Text extends Component {
static propTypes = {
size: PropTypes.string,
margin: PropTypes.number,
children: PropTypes.node
children: PropTypes.node,
tone: PropTypes.string
}
static defaultProps = {
size: 'medium',
tone: 'normal',
margin: 0
}
@@ -21,7 +23,8 @@ class Text extends Component {
display: 'inline-block',
fontSize: fontInfo.size[this.props.size],
fontFamily: fontInfo.family,
margin: this.props.margin
margin: this.props.margin,
color: fontInfo.color[this.props.tone],
}}>{this.props.children}</span>
)
}

6
website/src/ui/index.js
View File

@@ -1,3 +1,4 @@
export { default as Box } from './Box'
export { default as Button } from './Button'
export { default as Checkbox } from './Checkbox'
export { default as Input } from './Input'
@@ -11,6 +12,5 @@ export { default as Dropdown } from './Dropdown'
export { default as Modal } from './Modal'
export { default as Dimmer } from './Dimmer'
export { default as Loader } from './Loader'
export { default as HolyGrail } from './HolyGrail'
export { default as RowLayout } from './RowLayout'
export { default as StackLayout } from './StackLayout'
export { default as Row } from './Row'
export { default as Column } from './Column'

4
website/src/ui/style.js
View File

@@ -1,6 +1,7 @@
export const colorInfo = {
text: '#000000',
alertText: '#FF0000',
grayText: '#B0B0B0',
buttonBackground: '#3498DB',
buttonBackgroundHover: '#3CB0FD'
}
@@ -14,6 +15,7 @@ export const fontInfo = {
},
color: {
'normal': colorInfo.text,
'alert': colorInfo.alertText
'alert': colorInfo.alertText,
'dimmed': colorInfo.grayText,
}
}

2
website/src/version.js
View File

@@ -1,5 +1,5 @@
export const versionInfo = {
version: '0.1.0',
fullVersion: '0.1.0-20180225.0',
startYear: '2017'
startYear: '2017',
}