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

Home screen and PanelButtons

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-02 14:20:51 -08:00
parent 37cbc6becd
commit d347adcf33
13 changed files with 182 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,30 @@
import React from 'react' import React from 'react'
import { Row, Column, PanelButton } from 'ui'
export class Home extends React.Component { export class Home extends React.Component {
render() { render() {
return ( return (
<div /> <Column>
<Column.Item grow />
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<PanelButton icon='users' text='Users' />
</Row.Item>
<Row.Item width={30} />
<Row.Item>
<PanelButton icon='teams' text='Teams' />
</Row.Item>
<Row.Item width={30} />
<Row.Item>
<PanelButton icon='system' text='System' />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item grow />
</Column>
) )
} }
} }

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

@@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { autoBind } from 'auto-bind2' import { reactAutoBind } from 'auto-bind2'
import { UserList } from './UserList' import { UserList } from './UserList'
import { UserForm } from './UserForm' import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder' import { UserFormPlaceholder } from './UserFormPlaceholder'
@@ -10,7 +10,7 @@ import { YesNoMessageModal, MessageModal, ChangeEmailModal, WaitModal } from '..
export class Users extends React.Component { export class Users extends React.Component {
constructor() { constructor() {
super() super()
autoBind(this, (name) => (name.startsWith('handle'))) reactAutoBind(this)
this.state = { this.state = {
selectedUser: null, selectedUser: null,
users: [], users: [],
@@ -239,16 +239,12 @@ export class Users extends React.Component {
return ( return (
<div> <div>
<div>Users</div> <div>Users</div>
<Row> <Row>
{/* User List - Displayed on left hand side. */}
<Row.Item width={5}> <Row.Item width={5}>
<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>
{/* User Info - Displayed on right hand side. */}
<Row.Item> <Row.Item>
{ {
this.state.selectedUser this.state.selectedUser

18
website/src/assets/icons/system.svg Normal file
View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>system</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Home" transform="translate(-905.000000, -108.000000)" fill="#000000" fill-rule="nonzero">
<g id="System" transform="translate(870.000000, 94.000000)">
<g id="settings" transform="translate(35.000000, 14.000000)">
<path d="M101.074434,139.158895 C101.074434,140.19171 101.889968,141 102.932039,141 C103.97411,141 104.789644,140.19171 104.789644,139.158895 L104.789644,102.696028 C107.779935,101.887737 110,99.193437 110,95.9602763 C110,92.1433506 106.873786,89 102.977346,89 C99.0809061,89 96,92.1433506 96,95.9602763 C96,99.148532 98.1747573,101.842832 101.119741,102.651123 L101.119741,139.158895 L101.074434,139.158895 Z M99.6245955,95.9602763 C99.6245955,94.164076 101.119741,92.6822107 102.932039,92.6822107 C104.744337,92.6822107 106.239482,94.164076 106.239482,95.9602763 C106.239482,97.7564767 104.744337,99.238342 102.932039,99.238342 C101.119741,99.238342 99.6245955,97.7564767 99.6245955,95.9602763 Z" id="Shape"></path>
<path d="M122.954839,89 C121.916129,89 121.103226,89.8075928 121.103226,90.8395168 L121.103226,109.77308 C118.167742,110.580673 116,113.272649 116,116.458154 C116,119.643658 118.167742,122.335634 121.103226,123.143227 L121.103226,139.160483 C121.103226,140.192407 121.916129,141 122.954839,141 C123.993548,141 124.806452,140.192407 124.806452,139.160483 L124.806452,123.143227 C127.787097,122.335634 130,119.643658 130,116.413287 C130,113.182916 127.787097,110.49094 124.806452,109.683348 L124.806452,90.8395168 C124.806452,89.8075928 123.993548,89 122.954839,89 Z M126.341935,116.458154 C126.341935,118.252804 124.851613,119.733391 123.045161,119.733391 C121.23871,119.733391 119.748387,118.252804 119.748387,116.458154 C119.748387,114.663503 121.23871,113.182916 123.045161,113.182916 C124.851613,113.182916 126.341935,114.618637 126.341935,116.458154 Z" id="Shape"></path>
<path d="M142.851184,127.348877 L142.851184,90.8411054 C142.851184,89.8082902 142.03832,89 140.999661,89 C139.961001,89 139.148137,89.8082902 139.148137,90.8411054 L139.148137,127.348877 C136.167637,128.157168 134,130.851468 134,134.039724 C134,137.856649 137.115978,141 140.999661,141 C144.883343,141 147.999321,137.901554 147.999321,134.039724 C148.04448,130.851468 145.831684,128.157168 142.851184,127.348877 Z M141.04482,137.317789 C139.238456,137.317789 137.748205,135.835924 137.748205,134.039724 C137.748205,132.243523 139.238456,130.761658 141.04482,130.761658 C142.851184,130.761658 144.341434,132.243523 144.341434,134.039724 C144.341434,135.835924 142.851184,137.317789 141.04482,137.317789 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
website/src/assets/icons/teams.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

28
website/src/assets/icons/teams.svg Normal file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>teams</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Home" transform="translate(-542.000000, -107.000000)">
<g id="Teams" transform="translate(506.000000, 94.000000)">
<g id="teams" transform="translate(36.000000, 13.000000)">
<path d="M98.4272551,60.0797683 C77.9834796,67.9435298 62.8014647,86.4110654 59.6183969,108.745189 C59.210846,111.604786 59.1513672,112.057555 59.1513672,115.029785 M142.151367,59.0797683 C162.595143,66.9435298 177.777158,85.4110654 180.960225,107.745189 C181.367776,110.604786 181.427255,111.057555 181.427255,114.029785 M88.0761719,170.292522 C97.3037305,175.821624 108.960094,179 120.5,179 C131.434308,179 145.889336,175.295527 154.786621,170.292522" id="Oval" stroke="#000000" stroke-width="5" stroke-dasharray="5,4"></path>
<g id="Profile-1" transform="translate(144.000000, 114.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="Profile-1" transform="translate(40.000000, 114.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="Profile-1" transform="translate(94.000000, 33.000000)" fill="#000000" fill-rule="nonzero">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
website/src/assets/icons/users.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

27
website/src/assets/icons/users.svg Normal file
View File

@@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>users</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Home" transform="translate(-158.000000, -105.000000)" fill="#000000" fill-rule="nonzero">
<g id="Users" transform="translate(122.000000, 94.000000)">
<g id="users" transform="translate(36.000000, 11.000000)">
<g id="profile" transform="translate(16.000000, 85.000000)">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="profile-copy" transform="translate(170.000000, 85.000000)">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
<g id="profile-copy-2" transform="translate(93.000000, 85.000000)">
<path d="M28,29 C36.2822086,29 43,22.4961598 43,14.4777266 C43,6.45929339 36.2822086,0 28,0 C19.7177914,0 13,6.50384025 13,14.4777266 C13,22.4516129 19.7177914,29 28,29 Z M28,3.78648233 C34.0736196,3.78648233 39.0429448,8.59754224 39.0429448,14.4777266 C39.0429448,20.3579109 34.0736196,25.1689708 28,25.1689708 C21.9263804,25.1689708 16.9570552,20.3579109 16.9570552,14.4777266 C16.9570552,8.59754224 21.9263804,3.78648233 28,3.78648233 Z" id="Shape"></path>
<path d="M1.94170772,52 L53.0582923,52 C54.1420361,52 55,51.159292 55,50.0973451 C55,40.1415929 46.7364532,32 36.5311987,32 L18.4688013,32 C8.30870279,32 0,40.0973451 0,50.0973451 C-6.01598683e-16,51.159292 0.857963875,52 1.94170772,52 Z M18.4688013,35.8053097 L36.5311987,35.8053097 C43.9367816,35.8053097 50.0328407,41.2035398 50.9811166,48.1946903 L4.01888342,48.1946903 C4.96715928,41.2477876 11.0632184,35.8053097 18.4688013,35.8053097 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

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

@@ -9,7 +9,7 @@ class HeaderButton extends Component {
static propTypes = { static propTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
icon: PropTypes.string, icon: PropTypes.string,
image: PropTypes.object, image: PropTypes.string,
} }
render() { render() {

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

@@ -18,6 +18,9 @@ export default class Icon extends Component {
logout: require('icons/logout.svg'), logout: require('icons/logout.svg'),
profile: require('icons/profile.svg'), profile: require('icons/profile.svg'),
hold: require('icons/hold.svg'), hold: require('icons/hold.svg'),
users: require('icons/users.svg'),
teams: require('icons/teams.svg'),
system: require('icons/system.svg'),
placeholder: require('icons/placeholder.svg'), placeholder: require('icons/placeholder.svg'),
} }

43
website/src/ui/PanelButton.js Normal file
View File

@@ -0,0 +1,43 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './PanelButton.style'
import { Icon } from '.'
import { sizeInfo, fontInfo } from 'ui/style'
class PanelButton extends Component {
static propTypes = {
onClick: PropTypes.func,
icon: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
}
render() {
const { onClick, icon, text } = this.props
return (
<button type='button'
style={[
style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
]}
onClick={onClick}>
<div style={{ position: 'relative' }}>
<Icon name={icon} size={sizeInfo.panelIconSize} />
<span style={{
position: 'absolute',
top: sizeInfo.panelTextOffset,
left: 0,
display: 'block',
fontSize: fontInfo.size.huge,
fontFamily: fontInfo.family,
color: fontInfo.color.text,
textAlign: 'center',
width: '100%',
}}>{text}</span>
</div>
</button>
)
}
}
export default Radium(PanelButton)

22
website/src/ui/PanelButton.style.js Normal file
View File

@@ -0,0 +1,22 @@
import { colorInfo } from './style'
export default {
button: {
borderWidth: 2,
borderRadius: '10px',
padding: '0 0 0 0',
background: colorInfo.panelButtonBackground,
verticalAlign: 'middle',
outline: 'none',
':hover': {
background: colorInfo.panelButtonBackgroundHover,
},
':disabled': {
background: colorInfo.disabledPanelButtonBackground,
},
':active': {
borderWidth: 0,
background: colorInfo.panelButtonBackgroundActive,
}
}
}

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

@@ -2,6 +2,7 @@ export { default as Anime } from './Anime'
export { default as Box } from './Box' export { default as Box } from './Box'
export { default as Button } from './Button' export { default as Button } from './Button'
export { default as HeaderButton } from './HeaderButton' export { default as HeaderButton } from './HeaderButton'
export { default as PanelButton } from './PanelButton'
export { default as Checkbox } from './Checkbox' export { default as Checkbox } from './Checkbox'
export { default as Input } from './Input' export { default as Input } from './Input'
export { default as Image } from './Image' export { default as Image } from './Image'

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

@@ -1,4 +1,4 @@
export const colorInfo = { let colorInfo = {
text: '#000000', text: '#000000',
textInverse: '#FFFFFF', textInverse: '#FFFFFF',
textPlaceholder: '#EEEEEE', textPlaceholder: '#EEEEEE',
@@ -15,7 +15,14 @@ export const colorInfo = {
uncheckedCheckboxHover: '#808080', uncheckedCheckboxHover: '#808080',
} }
export const sizeInfo = { Object.assign(colorInfo, {
panelButtonBackground: colorInfo.headerButtonBackground,
panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
disabledPanelButtonBackground: colorInfo.disabledButtonBackground,
})
const sizeInfo = {
headerHeight: 60, headerHeight: 60,
imageMargin: 5, // The margin around images imageMargin: 5, // The margin around images
iconMargin: 10, // The margin around icons iconMargin: 10, // The margin around icons
@@ -23,9 +30,12 @@ export const sizeInfo = {
buttonHeight: 40, buttonHeight: 40,
minButtonWidth: 100, minButtonWidth: 100,
checkboxSize: 25, checkboxSize: 25,
panelButtonSize: 200,
panelIconSize: 170,
panelTextOffset: 130,
} }
export const fontInfo = { const fontInfo = {
family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind family: 'Hind, sans-serif', // https://fonts.google.com/specimen/Hind?selection.family=Hind
size: { size: {
small: '10pt', small: '10pt',
@@ -40,3 +50,5 @@ export const fontInfo = {
'dimmed': colorInfo.grayText, 'dimmed': colorInfo.grayText,
} }
} }
export { colorInfo, sizeInfo, fontInfo }