Users
-
+
{/* User List - Displayed on left hand side. */}
-
+
-
+
{/* User Info - Displayed on right hand side. */}
-
+
{
this.state.selectedUser
?
:
}
-
-
+
+
diff --git a/website/src/ui/Box.js b/website/src/ui/Box.js
new file mode 100644
index 0000000..4a098c3
--- /dev/null
+++ b/website/src/ui/Box.js
@@ -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 (
+
+ {children}
+
+ )
+ }
+}
+
+export default Radium(Box)
diff --git a/website/src/ui/Checkbox.style.js b/website/src/ui/Checkbox.style.js
index a269dd6..6e6bc5a 100644
--- a/website/src/ui/Checkbox.style.js
+++ b/website/src/ui/Checkbox.style.js
@@ -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',
diff --git a/website/src/ui/Column.js b/website/src/ui/Column.js
new file mode 100644
index 0000000..d244695
--- /dev/null
+++ b/website/src/ui/Column.js
@@ -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 (
+
{children}
+ )
+ }
+}
+
+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 (
+
{children}
+ )
+ }
+})
+
+export default Radium(Column)
diff --git a/website/src/ui/Dimmer.js b/website/src/ui/Dimmer.js
index b158433..f9738b0 100644
--- a/website/src/ui/Dimmer.js
+++ b/website/src/ui/Dimmer.js
@@ -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 ? (
{this.props.children}
- )
+ ) : null
}
}
diff --git a/website/src/ui/HolyGrail.js b/website/src/ui/HolyGrail.js
deleted file mode 100644
index 569f570..0000000
--- a/website/src/ui/HolyGrail.js
+++ /dev/null
@@ -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 (
-
{this.props.children}
- )
- }
-}
-
-HolyGrail.Header = Radium(class HolyGrailHeader extends Component {
- static propTypes = {
- children: PropTypes.node
- }
-
- render() {
- return (
-
{this.props.children}
- )
- }
-})
-
-HolyGrail.Footer = Radium(class HolyGrailFooter extends Component {
- static propTypes = {
- children: PropTypes.node
- }
-
- render() {
- return (
-
{this.props.children}
- )
- }
-})
-
-HolyGrail.Body = Radium(class HolyGrailBody extends Component {
- static propTypes = {
- children: PropTypes.node
- }
-
- render() {
- return (
-
{this.props.children}
- )
- }
-})
-
-export default Radium(HolyGrail)
diff --git a/website/src/ui/HolyGrail.style.js b/website/src/ui/HolyGrail.style.js
deleted file mode 100644
index 0ce4081..0000000
--- a/website/src/ui/HolyGrail.style.js
+++ /dev/null
@@ -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'
- }
-}
diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js
index 1346719..e28ceba 100644
--- a/website/src/ui/Modal.js
+++ b/website/src/ui/Modal.js
@@ -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 (
-
+
{this.props.children}
-
+
)
}
}
diff --git a/website/src/ui/Row.js b/website/src/ui/Row.js
new file mode 100644
index 0000000..c9c369f
--- /dev/null
+++ b/website/src/ui/Row.js
@@ -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 (
+
{children}
+ )
+ }
+}
+
+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 (
+
{children}
+ )
+ }
+})
+
+export default Radium(Row)
diff --git a/website/src/ui/RowLayout.js b/website/src/ui/RowLayout.js
deleted file mode 100644
index b1b6cb9..0000000
--- a/website/src/ui/RowLayout.js
+++ /dev/null
@@ -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 (
-
{this.props.children}
- )
- }
-}
-
-RowLayout.Item = Radium(class RowLayoutItem extends Component {
- static propTypes = {
- children: PropTypes.node,
- width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
- }
-
- render() {
- return (
-
{this.props.children}
- )
- }
-})
-
-export default Radium(RowLayout)
diff --git a/website/src/ui/StackLayout.js b/website/src/ui/StackLayout.js
deleted file mode 100644
index 532e4fd..0000000
--- a/website/src/ui/StackLayout.js
+++ /dev/null
@@ -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 (
-
{this.props.children}
- )
- }
-}
-
-StackLayout.Item = Radium(class StackLayoutItem extends Component {
- static propTypes = {
- children: PropTypes.node,
- height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
- }
-
- render() {
- return (
-
{this.props.children}
- )
- }
-})
-
-export default Radium(StackLayout)
diff --git a/website/src/ui/Text.js b/website/src/ui/Text.js
index 0c29161..625e9b2 100644
--- a/website/src/ui/Text.js
+++ b/website/src/ui/Text.js
@@ -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}
)
}
diff --git a/website/src/ui/index.js b/website/src/ui/index.js
index cacd158..551fe71 100644
--- a/website/src/ui/index.js
+++ b/website/src/ui/index.js
@@ -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'
diff --git a/website/src/ui/style.js b/website/src/ui/style.js
index b896ba6..f392d7e 100644
--- a/website/src/ui/style.js
+++ b/website/src/ui/style.js
@@ -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,
}
}
diff --git a/website/src/version.js b/website/src/version.js
index 26cd437..8556afb 100644
--- a/website/src/version.js
+++ b/website/src/version.js
@@ -1,5 +1,5 @@
export const versionInfo = {
version: '0.1.0',
fullVersion: '0.1.0-20180225.0',
- startYear: '2017'
+ startYear: '2017',
}