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

Clean all sizes, fonts and colors into style.js

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-07 11:01:55 -08:00
parent c06669873f
commit 9adca547f7
48 changed files with 152 additions and 3179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "deighton-ar", "name": "deighton-ar",
"version": "0.1.0", "version": "0.2.0",
"description": "Deighton AR Training System", "description": "Deighton AR Training System",
"main": "index.js", "main": "index.js",
"repository": { "repository": {

4
version.json5
View File

@@ -9,9 +9,9 @@
buildFormat: "full", buildFormat: "full",
tags: { tags: {
major: 0, major: 0,
minor: 1, minor: 2,
patch: 0, patch: 0,
build: 20180226, build: 20180307,
revision: 0, revision: 0,
tz: "America/Los_Angeles", tz: "America/Los_Angeles",
title: "Deighton AR System", title: "Deighton AR System",

2
website/.gitignore vendored
View File

@@ -1,6 +1,6 @@
node_modules/ node_modules/
coverage/ coverage/
dist/ build/
.DS_Store .DS_Store
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

17
website/build/asset-manifest.json
View File

@@ -1,17 +0,0 @@
{
"main.css": "static/css/main.b7f40099.css",
"main.css.map": "static/css/main.b7f40099.css.map",
"main.js": "static/js/main.0feff0e8.js",
"main.js.map": "static/js/main.0feff0e8.js.map",
"static/media/extensive-tracking.jpg": "static/media/extensive-tracking.30e779c7.jpg",
"static/media/flags.png": "static/media/flags.9c74e172.png",
"static/media/icons.eot": "static/media/icons.674f50d2.eot",
"static/media/icons.svg": "static/media/icons.912ec66d.svg",
"static/media/icons.ttf": "static/media/icons.b06871f2.ttf",
"static/media/icons.woff": "static/media/icons.fee66e71.woff",
"static/media/icons.woff2": "static/media/icons.af7ae505.woff2",
"static/media/masthead-main.png": "static/media/masthead-main.d693e54f.png",
"static/media/on-site-support.jpg": "static/media/on-site-support.33bd1985.jpg",
"static/media/package-building.jpg": "static/media/package-building.a6760708.jpg",
"static/media/pre-transitioning.jpg": "static/media/pre-transitioning.3c463a20.jpg"
}

BIN
website/build/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
website/build/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 910 B

1
website/build/index.html
View File

@@ -1 +0,0 @@
<!DOCTYPE html><html lang="en"><head><title>Transition Management Resources</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="/favicon.png"><link href="/static/css/main.b7f40099.css" rel="stylesheet"></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.0feff0e8.js"></script></body></html>

1
website/build/service-worker.js
View File

@@ -1 +0,0 @@
"use strict";function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}var precacheConfig=[["index.html","126facc11926a6f959086e2959a7770d"],["static/css/main.b7f40099.css","4fd28be2ca811a2f8586205d31a8d4ce"],["static/js/main.0feff0e8.js","85f38f3b5f4c9732f4b87d6226f21b2a"],["static/media/extensive-tracking.30e779c7.jpg","30e779c7aeb3f0930f0be1bba2793e46"],["static/media/flags.9c74e172.png","9c74e172f87984c48ddf5c8108cabe67"],["static/media/icons.674f50d2.eot","674f50d287a8c48dc19ba404d20fe713"],["static/media/icons.912ec66d.svg","912ec66d7572ff821749319396470bde"],["static/media/icons.af7ae505.woff2","af7ae505a9eed503f8b8e6982036873e"],["static/media/icons.b06871f2.ttf","b06871f281fee6b241d60582ae9369b9"],["static/media/icons.fee66e71.woff","fee66e712a8a08eef5805a46892932ad"],["static/media/masthead-main.d693e54f.png","d693e54ff591fe3586a5892ff490b8f9"],["static/media/on-site-support.33bd1985.jpg","33bd198571ce8fc479bceb92ea9ac445"],["static/media/package-building.a6760708.jpg","a676070868179299328607a1f91bed11"],["static/media/pre-transitioning.3c463a20.jpg","3c463a203156bbfbfb1331d8f2f8164b"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(e){return e.redirected?("body"in e?Promise.resolve(e.body):e.blob()).then(function(t){return new Response(t,{headers:e.headers,status:e.status,statusText:e.statusText})}):Promise.resolve(e)},createCacheKey=function(e,t,n,a){var r=new URL(e);return a&&r.pathname.match(a)||(r.search+=(r.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),r.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,t){var n=new URL(e);return n.hash="",n.search=n.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(e){return t.every(function(t){return!t.test(e[0])})}).map(function(e){return e.join("=")}).join("&"),n.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],a=new URL(t,self.location),r=createCacheKey(a,hashParamName,n,/\.\w{8}\./);return[a.toString(),r]}));self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(e){return setOfCachedUrls(e).then(function(t){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(n){if(!t.has(n)){var a=new Request(n,{credentials:"same-origin"});return fetch(a).then(function(t){if(!t.ok)throw new Error("Request for "+n+" returned a response with status "+t.status);return cleanResponse(t).then(function(t){return e.put(n,t)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var t=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(e){return e.keys().then(function(n){return Promise.all(n.map(function(n){if(!t.has(n.url))return e.delete(n)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var t,n=stripIgnoredUrlParameters(e.request.url,ignoreUrlParametersMatching);t=urlsToCacheKeys.has(n);t||(n=addDirectoryIndex(n,"index.html"),t=urlsToCacheKeys.has(n));!t&&"navigate"===e.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],e.request.url)&&(n=new URL("/index.html",self.location).toString(),t=urlsToCacheKeys.has(n)),t&&e.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(t){return console.warn('Couldn\'t serve response for "%s" from cache: %O',e.request.url,t),fetch(e.request)}))}});

355
website/build/static/css/main.b7f40099.css
View File

File diff suppressed because one or more lines are too long

1
website/build/static/css/main.b7f40099.css.map
View File

File diff suppressed because one or more lines are too long

2
website/build/static/js/main.0feff0e8.js
View File

File diff suppressed because one or more lines are too long

1
website/build/static/js/main.0feff0e8.js.map
View File

File diff suppressed because one or more lines are too long

BIN
website/build/static/media/extensive-tracking.30e779c7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 250 KiB

BIN
website/build/static/media/flags.9c74e172.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
website/build/static/media/icons.674f50d2.eot
View File

Binary file not shown.

2671
website/build/static/media/icons.912ec66d.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 434 KiB

BIN
website/build/static/media/icons.af7ae505.woff2
View File

Binary file not shown.

BIN
website/build/static/media/icons.b06871f2.ttf
View File

Binary file not shown.

BIN
website/build/static/media/icons.fee66e71.woff
View File

Binary file not shown.

BIN
website/build/static/media/masthead-main.d693e54f.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
website/build/static/media/on-site-support.33bd1985.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 272 KiB

BIN
website/build/static/media/package-building.a6760708.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 199 KiB

BIN
website/build/static/media/pre-transitioning.3c463a20.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 299 KiB

2
website/src/App.js
View File

@@ -102,7 +102,7 @@ export class App extends Component {
</Switch> </Switch>
<Column.Item> <Column.Item>
<Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}> <Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
<Text color='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text> <Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
</Box> </Box>
</Column.Item> </Column.Item>
</Column> </Column>

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

@@ -101,14 +101,14 @@ export class Login extends Component {
<Column.Item> <Column.Item>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
<Row.Item width='450px'> <Row.Item width={sizeInfo.modalWidth}>
<form onSubmit={this.handleSubmit} id='loginForm'> <form onSubmit={this.handleSubmit} id='loginForm'>
<Column minHeight='100%'> <Column minHeight='100%'>
<Column.Item> <Column.Item>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
<Row.Item> <Row.Item>
<Image source={headerLogo} width={250} /> <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
</Row.Item> </Row.Item>
<Row.Item grow /> <Row.Item grow />
</Row> </Row>
@@ -133,7 +133,7 @@ export class Login extends Component {
</Row.Item> </Row.Item>
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}> <Column.Item height={sizeInfo.buttonHeight}>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
@@ -142,7 +142,7 @@ export class Login extends Component {
</Row.Item> </Row.Item>
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item> <Column.Item>
<Text> <Text>
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials. Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.

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

@@ -70,12 +70,12 @@ export class ResetPassword extends React.Component {
<Column.Item> <Column.Item>
<BoundInput label='New Password' password name='newPassword' <BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password' message='A new password, cannot be blank or the same as your old password'
width={16} binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword' <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank' message='The new password again, must match and cannot be blank'
width={16} binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<Text> <Text>

5
website/src/Home/Home.js
View File

@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react' import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Row, Column, PanelButton } from 'ui' import { Row, Column, PanelButton } from 'ui'
import { sizeInfo } from 'ui/style'
export class Home extends Component { export class Home extends Component {
static propTypes = { static propTypes = {
@@ -26,11 +27,11 @@ export class Home extends Component {
<Row.Item> <Row.Item>
<PanelButton icon='users' text='Users' onClick={() => (this.props.history.push('/users'))} /> <PanelButton icon='users' text='Users' onClick={() => (this.props.history.push('/users'))} />
</Row.Item> </Row.Item>
<Row.Item width={30} /> <Row.Item width={sizeInfo.panelButtonSpacing} />
<Row.Item> <Row.Item>
<PanelButton icon='teams' text='Teams' /> <PanelButton icon='teams' text='Teams' />
</Row.Item> </Row.Item>
<Row.Item width={30} /> <Row.Item width={sizeInfo.panelButtonSpacing} />
<Row.Item> <Row.Item>
<PanelButton icon='system' text='System' /> <PanelButton icon='system' text='System' />
</Row.Item> </Row.Item>

15
website/src/Modal/ChangeEmailModal.js
View File

@@ -4,6 +4,7 @@ import { autoBind } from 'auto-bind2'
import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui' import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui'
import { regExpPattern } from 'regexp-pattern' import { regExpPattern } from 'regexp-pattern'
import { FormBinder } from 'react-form-binder' import { FormBinder } from 'react-form-binder'
import { sizeInfo } from 'ui/style'
export class ChangeEmailModal extends React.Component { export class ChangeEmailModal extends React.Component {
static propTypes = { static propTypes = {
@@ -60,29 +61,29 @@ export class ChangeEmailModal extends React.Component {
closeOnDimmerClick={false}> closeOnDimmerClick={false}>
<form id='emailForm' onSubmit={this.handleSubmit}> <form id='emailForm' onSubmit={this.handleSubmit}>
<Column> <Column>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item> <Column.Item>
<Row> <Row>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow> <Row.Item grow>
<Column> <Column>
<Column.Item> <Column.Item>
<Text>{this.props.oldEmail}</Text> <Text>{this.props.oldEmail}</Text>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item> <Column.Item>
<BoundInput label='New Email' name='newEmail' <BoundInput label='New Email' name='newEmail'
message='Your new email address, e.g. xyz@abc.com, cannot be blank' message='Your new email address, e.g. xyz@abc.com, cannot be blank'
binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item> <Column.Item>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
<Row.Item> <Row.Item>
<Button onClick={this.handleClick} text='Cancel' /> <Button onClick={this.handleClick} text='Cancel' />
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item> <Row.Item>
<BoundButton submit='emailForm' name='submit' binder={this.state.binder} text='OK' /> <BoundButton submit='emailForm' name='submit' binder={this.state.binder} text='OK' />
</Row.Item> </Row.Item>
@@ -90,10 +91,10 @@ export class ChangeEmailModal extends React.Component {
</Column.Item> </Column.Item>
</Column> </Column>
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
</Column> </Column>
</form> </form>
</Modal> </Modal>

6
website/src/Modal/ChangePasswordModal.js
View File

@@ -74,17 +74,17 @@ export class ChangePasswordModal extends React.Component {
<Column.Item> <Column.Item>
<BoundInput label='Current Password' password name='oldPassword' <BoundInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank' message='Your existing password, cannot be blank'
width={8} binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundInput label='New Password' password name='newPassword' <BoundInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password' message='A new password, cannot be blank or the same as your old password'
width={8} binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundInput label='Re-entered New Password' password name='reenteredNewPassword' <BoundInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank' message='The new password again, must match and cannot be blank'
width={8} binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
</Column> </Column>
</Column.Item> </Column.Item>

12
website/src/Modal/MessageModal.js
View File

@@ -33,22 +33,22 @@ export class MessageModal extends React.Component {
const { open, icon, message, detail } = this.props const { open, icon, message, detail } = this.props
return ( return (
<Modal open={open} width={400}> <Modal open={open} width={sizeInfo.modalWidth}>
<form onSubmit={this.onSubmit} id='messageModal'> <form onSubmit={this.onSubmit} id='messageModal'>
<Row> <Row>
<Row.Item> <Row.Item>
<Icon name={icon} size={150} /> <Icon name={icon} size={sizeInfo.messageModalIcon} />
</Row.Item> </Row.Item>
<Row.Item grow> <Row.Item grow>
<Column height='100%'> <Column height='100%'>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow> <Column.Item grow>
<Text width='100%' align='center'>{message}</Text> <Text width='100%' align='center'>{message}</Text>
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text> <Text width='100%' align='center' color='dimmed' size='small'>{detail}</Text>
</Column.Item> </Column.Item>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}> <Column.Item height={sizeInfo.buttonHeight}>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
@@ -58,10 +58,10 @@ export class MessageModal extends React.Component {
<Row.Item grow /> <Row.Item grow />
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
</Column> </Column>
</Row.Item> </Row.Item>
<Row.Item width={10} /> <Row.Item width={sizeInfo.formRowSpacing} />
</Row> </Row>
</form> </form>
</Modal> </Modal>

14
website/src/Modal/YesNoMessageModal.js
View File

@@ -31,36 +31,36 @@ export class YesNoMessageModal extends React.Component {
const { open, question } = this.props const { open, question } = this.props
return ( return (
<Modal open={open} width={400}> <Modal open={open} width={sizeInfo.modalWidth}>
<form onSubmit={this.onSubmit} id='messageModal'> <form onSubmit={this.onSubmit} id='messageModal'>
<Row> <Row>
<Row.Item> <Row.Item>
<Icon name='help' size={150} /> <Icon name='help' size={sizeInfo.messageModalIcon} />
</Row.Item> </Row.Item>
<Row.Item grow> <Row.Item grow>
<Column height='100%'> <Column height='100%'>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow> <Column.Item grow>
<Text width='100%' align='center'>{question}</Text> <Text width='100%' align='center'>{question}</Text>
</Column.Item> </Column.Item>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}> <Column.Item height={sizeInfo.buttonHeight}>
<Row> <Row>
<Row.Item grow /> <Row.Item grow />
<Row.Item> <Row.Item>
<Button submit='messageModal' text='Yes' onClick={(e) => this.onSubmit(e, true)} /> <Button submit='messageModal' text='Yes' onClick={(e) => this.onSubmit(e, true)} />
</Row.Item> </Row.Item>
<Row.Item width={10} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item> <Row.Item>
<Button submit='messageModal' text='No' onClick={(e) => this.onSubmit(e, false)} /> <Button submit='messageModal' text='No' onClick={(e) => this.onSubmit(e, false)} />
</Row.Item> </Row.Item>
<Row.Item grow /> <Row.Item grow />
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={15} /> <Column.Item height={sizeInfo.formColumnSpacing} />
</Column> </Column>
</Row.Item> </Row.Item>
<Row.Item width={10} /> <Row.Item width={sizeInfo.formRowSpacing} />
</Row> </Row>
</form> </form>
</Modal> </Modal>

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

@@ -94,25 +94,25 @@ export class ProfileForm extends React.Component {
<form onSubmit={this.handleSubmit} id='profileForm'> <form onSubmit={this.handleSubmit} id='profileForm'>
<Column stackable> <Column stackable>
<Column.Item> <Column.Item>
<BoundInput label='First Name' name='firstName' width={8} <BoundInput label='First Name' name='firstName'
binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundInput label='Last Name' name='lastName' width={8} <BoundInput label='Last Name' name='lastName'
binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundInput label='Email' name='email' width={8} message='Required. Must be a valid email address.' <BoundInput label='Email' name='email' message='Required. Must be a valid email address.'
binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;' <Button fluid content={'Change Email'} label='&nbsp;'
width={4} onClick={this.props.onChangeEmail} /> onClick={this.props.onChangeEmail} />
<Button fluid content={'Change Password'} label='&nbsp;' <Button fluid content={'Change Password'} label='&nbsp;'
width={4} onClick={this.props.onChangePassword} /> onClick={this.props.onChangePassword} />
</Column.Item> </Column.Item>
<Column.Item> <Column.Item>
<BoundButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save' <BoundButton submit primary size='medium' content='Save' label='&nbsp;' name='save'
binder={this.state.binder} /> binder={this.state.binder} />
</Column.Item> </Column.Item>
</Column> </Column>

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

@@ -113,9 +113,9 @@ export class UserForm extends React.Component {
return ( return (
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}> <form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
<Column> <Column>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Row> <Row>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow> <Row.Item grow>
<Column.Item> <Column.Item>
<Column> <Column>
@@ -124,7 +124,7 @@ export class UserForm extends React.Component {
<Row.Item grow> <Row.Item grow>
<BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} /> <BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow> <Row.Item grow>
<BoundInput label='Last Name' name='lastName' binder={binder} /> <BoundInput label='Last Name' name='lastName' binder={binder} />
</Row.Item> </Row.Item>
@@ -135,27 +135,27 @@ export class UserForm extends React.Component {
<Row.Item grow> <Row.Item grow>
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} /> <BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
</Row.Item> </Row.Item>
<Row.Item width={10} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item> <Row.Item>
<BoundEmailIcon name='emailValidated' binder={binder} /> <BoundEmailIcon name='emailValidated' binder={binder} />
</Row.Item> </Row.Item>
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}> <Column.Item minHeight={sizeInfo.buttonHeight}>
<Row> <Row>
<Row.Item> <Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder} <BoundButton text='Change Email' name='changeEmail' binder={binder}
width={220} onClick={this.handleChangeEmail} /> width={sizeInfo.formButtonLarge} onClick={this.handleChangeEmail} />
</Row.Item> </Row.Item>
<Row.Item grow /> <Row.Item grow />
<Row.Item> <Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder} <BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
width={220} onClick={this.handleResendEmail} /> width={sizeInfo.formButtonLarge} onClick={this.handleResendEmail} />
</Row.Item> </Row.Item>
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item> <Column.Item>
<Row> <Row>
<Row.Item> <Row.Item>
@@ -164,7 +164,7 @@ export class UserForm extends React.Component {
<Row.Item grow /> <Row.Item grow />
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item minHeight={sizeInfo.buttonHeight}> <Column.Item minHeight={sizeInfo.buttonHeight}>
<Row> <Row>
<Row.Item> <Row.Item>
@@ -174,7 +174,7 @@ export class UserForm extends React.Component {
<Row.Item> <Row.Item>
<BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} /> <BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item> <Row.Item>
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} /> <BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
</Row.Item> </Row.Item>
@@ -183,9 +183,9 @@ export class UserForm extends React.Component {
</Column> </Column>
</Column.Item> </Column.Item>
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
</Row> </Row>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
</Column> </Column>
</form> </form>
) )

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

@@ -37,18 +37,18 @@ export class UserList extends React.Component {
? this.state.users.map((user, index) => ? this.state.users.map((user, index) =>
(<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))} (<List.Item key={user._id || '0'} onClick={(e) => (this.props.onUserListClick(e, index))}
active={user === this.props.selectedUser}> active={user === this.props.selectedUser}>
<List.Icon name={user.administrator ? 'admin' : 'profile'} size={25} /> <List.Icon name={user.administrator ? 'admin' : 'profile'} size={sizeInfo.listIcon} />
<List.Text> <List.Text>
{ user._id ? user.firstName + ' ' + user.lastName : '[New User]' } { user._id ? user.firstName + ' ' + user.lastName : '[New User]' }
</List.Text> </List.Text>
{ user === selectedUser && selectionModified ? <List.Icon name='edit' size={25} /> : null } { user === selectedUser && selectionModified ? <List.Icon name='edit' size={sizeInfo.listIcon} /> : null }
</List.Item>) </List.Item>)
) )
: null : null
} }
</List> </List>
</Column.Item> </Column.Item>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item height={sizeInfo.buttonHeight}> <Column.Item height={sizeInfo.buttonHeight}>
<Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' /> <Button width='100%' color='inverse' onClick={this.props.onAddNewUser} text='Add New User' />
</Column.Item> </Column.Item>

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

@@ -253,16 +253,16 @@ export class Users extends Component {
return ( return (
<Fragment> <Fragment>
<Column.Item height={20} /> <Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item grow> <Column.Item grow>
<Row fillParent> <Row fillParent>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item width='25vw'> <Row.Item width='25vw'>
<UserList users={this.state.users} selectedUser={this.state.selectedUser} <UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick} selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} /> onAddNewUser={this.handleAddNewUser} />
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item grow> <Row.Item grow>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}> <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
{ {
@@ -274,10 +274,10 @@ export class Users extends Component {
} }
</Box> </Box>
</Row.Item> </Row.Item>
<Row.Item width={20} /> <Row.Item width={sizeInfo.formRowSpacing} />
</Row> </Row>
</Column.Item> </Column.Item>
<Column.Item height={20}> <Column.Item height={sizeInfo.formColumnSpacing}>
<ChangeEmailModal open={!!changeEmailModal} <ChangeEmailModal open={!!changeEmailModal}
oldEmail={changeEmailModal && changeEmailModal.oldEmail} oldEmail={changeEmailModal && changeEmailModal.oldEmail}
onDismiss={this.handleChangeEmailDismiss} /> onDismiss={this.handleChangeEmailDismiss} />

3
website/src/ui/BoundEmailIcon.js
View File

@@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Text, Icon } from 'ui' import { Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'
export default class BoundEmailIcon extends React.Component { export default class BoundEmailIcon extends React.Component {
static propTypes = { static propTypes = {
@@ -26,7 +27,7 @@ export default class BoundEmailIcon extends React.Component {
<div> <div>
<Text>&nbsp;</Text> <Text>&nbsp;</Text>
<br /> <br />
<Icon name={value ? 'confirmed' : 'warning'} size={30} margin={0} /> <Icon name={value ? 'confirmed' : 'warning'} size={sizeInfo.formBoundIcon} margin={sizeInfo.formBoundIconMargin} />
</div> </div>
) )
} }

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

@@ -29,13 +29,13 @@ class Button extends Component {
borderRadius: 10, borderRadius: 10,
background: colorInfo.buttonBackgroundHover, background: colorInfo.buttonBackgroundHover,
verticalAlign: 'middle', verticalAlign: 'middle',
padding: '0 15px 0 15px', padding: sizeInfo.buttonPadding,
outline: 'none', outline: 'none',
':hover': { ':hover': {
background: colorInfo.buttonBackground, background: colorInfo.buttonBackground,
}, },
':disabled': { ':disabled': {
background: colorInfo.disabledButtonBackground, background: colorInfo.buttonDisabledBackground,
}, },
':active': { ':active': {
background: colorInfo.buttonBackgroundActive, background: colorInfo.buttonBackgroundActive,

10
website/src/ui/Checkbox.js
View File

@@ -32,14 +32,14 @@ class Checkbox extends Component {
}, },
checkboxUnchecked: { checkboxUnchecked: {
backgroundColor: colorInfo.uncheckedCheckbox, backgroundColor: colorInfo.checkboxUnchecked,
':hover': { ':hover': {
backgroundColor: colorInfo.uncheckedCheckboxHover, backgroundColor: colorInfo.checkboxUncheckedHover,
} }
}, },
checkboxDisabled: { checkboxDisabled: {
backgroundColor: colorInfo.disabledButtonBackground, backgroundColor: colorInfo.buttonDisabledBackground,
}, },
checkmark: { checkmark: {
@@ -50,8 +50,8 @@ class Checkbox extends Component {
width: 6, width: 6,
height: 12, height: 12,
borderStyle: 'solid', borderStyle: 'solid',
borderColor: '#FFFFFF', borderColor: colorInfo.checkmark,
borderWidth: '0 3px 3px 0', borderWidth: sizeInfo.checkmarkBorder,
transform: 'rotate(45deg)', transform: 'rotate(45deg)',
}, },

2
website/src/ui/Icon.js
View File

@@ -13,7 +13,7 @@ export default class Icon extends Component {
static defaultProps = { static defaultProps = {
size: 50, size: 50,
margin: sizeInfo.iconMargin, margin: sizeInfo.iconDefaultMargin,
} }
static svgs = { static svgs = {

2
website/src/ui/Image.js
View File

@@ -12,7 +12,7 @@ class Image extends Component {
render() { render() {
let { source, width, height } = this.props let { source, width, height } = this.props
const margin = sizeInfo.imageMargin const margin = sizeInfo.imageDefaultMargin
width = width ? (width - margin * 2) : null width = width ? (width - margin * 2) : null
height = height ? (height - margin * 2) : null height = height ? (height - margin * 2) : null

17
website/src/ui/Input.js
View File

@@ -1,6 +1,7 @@
import Radium from 'radium' import Radium from 'radium'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import React, { Component } from 'react' import React, { Component } from 'react'
import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
// See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element // See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element
@@ -18,28 +19,28 @@ class Input extends Component {
static style = { static style = {
div: { div: {
padding: '5px', padding: sizeInfo.inputPadding,
borderWidth: 1, borderWidth: 1,
borderColor: '#b2b2b2', borderColor: colorInfo.border,
backgroundColor: '#ffffff', backgroundColor: colorInfo.inputBackground,
borderStyle: 'solid', borderStyle: 'solid',
borderRadius: '5px', borderRadius: sizeInfo.inputBorderRadius,
':focus': { ':focus': {
outline: 'none' outline: 'none'
}, },
}, },
input: { input: {
fontSize: '16px', fontSize: fontInfo.size.medium,
color: '#000000', color: colorInfo.text,
borderWidth: 0, borderWidth: 0,
padding: 0, padding: 0,
margin: 0, margin: 0,
width: '100%', width: '100%',
outline: 'none', outline: 'none',
':disabled': { ':disabled': {
color: '#AAAAAA', color: colorInfo.textDisabled,
background: '#ffffff' background: colorInfo.inputBackground,
} }
}, },
} }

2
website/src/ui/List.js
View File

@@ -76,7 +76,7 @@ List.Icon = Radium(class ListIcon extends Component {
verticalAlign: 'middle', verticalAlign: 'middle',
width: size, width: size,
height: size, height: size,
margin: '5px 10px 5px 10px', // TODO: Put in style.js margin: sizeInfo.listIconMargin,
}} /> }} />
) )
} }

19
website/src/ui/Loader.js
View File

@@ -1,25 +1,12 @@
import React from 'react' import React from 'react'
import Radium from 'radium' import Radium from 'radium'
import PropTypes from 'prop-types' import { colorInfo, sizeInfo } from 'ui/style'
import { colorInfo } from 'ui/style'
import anime from 'animejs' import anime from 'animejs'
class Loader extends React.Component { class Loader extends React.Component {
static propTypes = {
color: PropTypes.string,
size: PropTypes.number,
margin: PropTypes.string
}
static defaultProps = {
color: '#000000',
size: 15,
margin: '2px'
}
render() { render() {
const size = 20 const size = sizeInfo.loaderSize
const spacing = 5 const spacing = sizeInfo.loaderSpacing
const addAnimation = (elem, i) => { const addAnimation = (elem, i) => {
anime({ anime({

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

@@ -1,8 +1,8 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import style from './Modal.style'
import Radium from 'radium' import Radium from 'radium'
import { Dimmer } from 'ui' import { Dimmer } from 'ui'
import { colorInfo, sizeInfo } from 'ui/style'
class Modal extends Component { class Modal extends Component {
static propTypes = { static propTypes = {
@@ -15,12 +15,19 @@ class Modal extends Component {
width: '60%', width: '60%',
} }
static style = {
zIndex: 101,
background: colorInfo.modalBackground,
borderRadius: 4,
boxShadow: `0 0 ${sizeInfo.modalShadowWidth} ${colorInfo.modalShadow}`
}
render() { render() {
const { open, children, width } = this.props const { open, children, width } = this.props
return ( return (
<Dimmer active={open}> <Dimmer active={open}>
<div style={[style.modal, { width }]}> <div style={[Modal.style, { width }]}>
{children} {children}
</div> </div>
</Dimmer> </Dimmer>

10
website/src/ui/Modal.style.js
View File

@@ -1,10 +0,0 @@
import { colorInfo } from './style'
export default {
modal: {
zIndex: 101,
background: colorInfo.modalBackground,
borderRadius: 4,
boxShadow: '0 0 25px #000000'
}
}

10
website/src/ui/PanelButton.js
View File

@@ -13,8 +13,8 @@ class PanelButton extends Component {
static style = { static style = {
button: { button: {
borderWidth: 2, borderWidth: sizeInfo.panelButtonBorderWidth,
borderRadius: '10px', borderRadius: sizeInfo.panelButtonBorderRadius,
padding: '0 0 0 0', padding: '0 0 0 0',
background: colorInfo.panelButtonBackground, background: colorInfo.panelButtonBackground,
verticalAlign: 'middle', verticalAlign: 'middle',
@@ -23,7 +23,7 @@ class PanelButton extends Component {
background: colorInfo.panelButtonBackgroundHover, background: colorInfo.panelButtonBackgroundHover,
}, },
':disabled': { ':disabled': {
background: colorInfo.disabledPanelButtonBackground, background: colorInfo.panelDisabledButtonBackground,
}, },
':active': { ':active': {
borderWidth: 0, borderWidth: 0,
@@ -38,11 +38,11 @@ class PanelButton extends Component {
return ( return (
<button type='button' <button type='button'
style={[ style={[
PanelButton.style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize } PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
]} ]}
onClick={onClick}> onClick={onClick}>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<Icon name={icon} size={sizeInfo.panelIconSize} margin={0} /> <Icon name={icon} size={sizeInfo.panelButtonIcon} margin={sizeInfo.panelButtonIconMargin} />
<span style={{ <span style={{
position: 'absolute', position: 'absolute',
top: sizeInfo.panelTextOffset, top: sizeInfo.panelTextOffset,

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

@@ -2,26 +2,38 @@ let colorInfo = {
text: '#000000', text: '#000000',
textInverse: '#FFFFFF', textInverse: '#FFFFFF',
textPlaceholder: '#EEEEEE', textPlaceholder: '#EEEEEE',
alertText: '#FF0000', textAlert: '#FF0000',
grayText: '#B0B0B0', textGray: '#B0B0B0',
textDisabled: '#AAAAAA',
border: '#B2B2B2',
modalShadow: '#000000',
modalBackground: '#FFFFFF',
inputBackground: '#FFFFFF',
buttonBackground: '#3498DB', buttonBackground: '#3498DB',
buttonBackgroundHover: '#3CB0FD', buttonBackgroundHover: '#3CB0FD',
buttonBackgroundActive: '#1A72AC', buttonBackgroundActive: '#1A72AC',
buttonDisabledBackground: '#E0E0E0',
headerBorder: '#B2B2B2',
headerButtonBackground: '#FAFAFA', headerButtonBackground: '#FAFAFA',
headerButtonBackgroundHover: '#DADADA', headerButtonBackgroundHover: '#DADADA',
headerButtonBackgroundActive: '#AAAAAA', headerButtonBackgroundActive: '#AAAAAA',
headerBorder: '#B2B2B2',
disabledButtonBackground: '#E0E0E0', checkboxUnchecked: '#A0A0A0',
modalBackground: '#FFFFFF', checkboxUncheckedHover: '#808080',
uncheckedCheckbox: '#A0A0A0', checkmark: '#FFFFFF',
uncheckedCheckboxHover: '#808080',
} }
Object.assign(colorInfo, { Object.assign(colorInfo, {
panelButtonBackground: colorInfo.headerButtonBackground, panelButtonBackground: colorInfo.headerButtonBackground,
panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover, panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive, panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
disabledPanelButtonBackground: colorInfo.disabledButtonBackground, panelDisabledButtonBackground: colorInfo.buttonDisabledBackground,
listBackground: '#FFFFFF', listBackground: '#FFFFFF',
listBackgroundHover: colorInfo.headerButtonBackgroundHover, listBackgroundHover: colorInfo.headerButtonBackgroundHover,
listBackgroundActive: '#E7E5E5', listBackgroundActive: '#E7E5E5',
@@ -30,18 +42,40 @@ Object.assign(colorInfo, {
const sizeInfo = { const sizeInfo = {
headerHeight: 60, headerHeight: 60,
imageMargin: 5, // The margin around images imageDefaultMargin: 5,
iconMargin: 10, // The margin around icons iconDefaultMargin: 10,
headerBorderWidth: 1, headerBorderWidth: 1,
listBorderWidth: 1, listBorderWidth: 1,
buttonHeight: 40, buttonHeight: 40,
buttonPadding: '0 15px 0 15px',
minButtonWidth: 100, minButtonWidth: 100,
checkboxSize: 25, checkboxSize: 25,
panelButtonSize: 200, checkmarkBorder: '0 3px 3px 0',
panelIconSize: 170, panelButton: 200,
panelButtonIcon: 170,
panelButtonIconMargin: 0,
panelTextOffset: 120, panelTextOffset: 120,
formBoxRadius: 5, formBoxRadius: 5,
listTopBottomGap: 10, listTopBottomGap: 10,
modalWidth: 450,
modalShadowWidth: 25,
inputPadding: 5,
inputBorderRadius: 5,
listIconMargin: '5px 10px 5px 10px',
loaderSize: 20,
loaderSpacing: 5,
panelButtonBorderRadius: 25,
panelButtonBorderWidth: 2,
messageModalIcon: 150,
formColumnSpacing: 20,
formRowSpacing: 20,
loginLogoWidth: 250,
footerTextMargin: 10,
panelButtonSpacing: 30,
formBoundIcon: 30,
formBoundIconMargin: 0,
listIcon: 25,
formButtonLarge: 225,
} }
const fontInfo = { const fontInfo = {
@@ -55,8 +89,8 @@ const fontInfo = {
color: { color: {
'normal': colorInfo.text, 'normal': colorInfo.text,
'inverse': colorInfo.textInverse, 'inverse': colorInfo.textInverse,
'alert': colorInfo.alertText, 'alert': colorInfo.textAlert,
'dimmed': colorInfo.grayText, 'dimmed': colorInfo.textGray,
} }
} }

4
website/src/version.js
View File

@@ -1,6 +1,6 @@
export const versionInfo = { export const versionInfo = {
version: '0.1.0', version: '0.2.0',
fullVersion: '0.1.0-20180226.0', fullVersion: '0.2.0-20180307.0',
title: 'Deighton AR System', title: 'Deighton AR System',
copyright: '© 2018, Kingston Software Solutions.', copyright: '© 2018, Kingston Software Solutions.',
supportEmail: 'support@kss.us.com', supportEmail: 'support@kss.us.com',