+
{label}
-
- {message}
+ onChange={(e) => this.handleChange(e.target.value)}
+ placeholder={placeholder}
+ />
+
+ {message}
+
)
}
diff --git a/website/src/ui/FormIconButton.js b/website/src/ui/FormIconButton.js
new file mode 100644
index 0000000..1e8af53
--- /dev/null
+++ b/website/src/ui/FormIconButton.js
@@ -0,0 +1,62 @@
+import Radium from "radium"
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+import { colorInfo, sizeInfo } from "./style"
+import { Text, Icon } from "."
+
+@Radium
+export class FormIconButton extends Component {
+ static propTypes = {
+ visible: PropTypes.bool,
+ // disabled: PropTypes.bool,
+ icon: PropTypes.string,
+ onClick: PropTypes.func,
+ }
+
+ static defaultProps = {
+ visible: true,
+ disabled: false,
+ width: sizeInfo.buttonWidth,
+ }
+
+ static style = {
+ icon: {
+ borderWidth: 0,
+ borderRadius: sizeInfo.formButtonIconBorderRadius,
+ background: colorInfo.buttonBackgroundHover,
+ outline: "none",
+ padding: sizeInfo.formButtonIconPadding,
+ ":hover": {
+ background: colorInfo.buttonBackground,
+ },
+ ":disabled": {
+ background: colorInfo.buttonDisabledBackground,
+ },
+ ":active": {
+ background: colorInfo.buttonBackgroundActive,
+ },
+ },
+ }
+
+ render() {
+ const { icon, visible } = this.props
+
+ if (!visible) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+ )
+ }
+}
diff --git a/website/src/ui/Icon.js b/website/src/ui/Icon.js
index 8cb2335..1ea698c 100644
--- a/website/src/ui/Icon.js
+++ b/website/src/ui/Icon.js
@@ -1,7 +1,7 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { sizeInfo } from './style'
+import Radium from "radium"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { sizeInfo } from "./style"
// See https://www.flaticon.com/packs/free-basic-ui-elements
@@ -12,6 +12,7 @@ export class Icon extends Component {
size: PropTypes.number,
margin: PropTypes.number,
style: PropTypes.object,
+ onClick: PropTypes.func,
}
static defaultProps = {
@@ -20,28 +21,35 @@ export class Icon extends Component {
}
static svgs = {
- logout: require('icons/logout.svg'),
- thumb: require('icons/thumb.svg'),
- profile: require('icons/profile.svg'),
- admin: require('icons/admin.svg'),
- hand: require('icons/hand.svg'),
- users: require('icons/users.svg'),
- team: require('icons/team.svg'),
- teams: require('icons/teams.svg'),
- system: require('icons/system.svg'),
- confirmed: require('icons/confirmed.svg'),
- help: require('icons/help.svg'),
- warning: require('icons/warning.svg'),
- edit: require('icons/edit.svg'),
- placeholder: require('icons/placeholder.svg'),
+ logout: require("icons/logout.svg"),
+ thumb: require("icons/thumb.svg"),
+ profile: require("icons/profile.svg"),
+ admin: require("icons/admin.svg"),
+ hand: require("icons/hand.svg"),
+ users: require("icons/users.svg"),
+ team: require("icons/team.svg"),
+ teams: require("icons/teams.svg"),
+ system: require("icons/system.svg"),
+ confirmed: require("icons/confirmed.svg"),
+ help: require("icons/help.svg"),
+ warning: require("icons/warning.svg"),
+ edit: require("icons/edit.svg"),
+ placeholder: require("icons/placeholder.svg"),
+ clock: require("icons/clock.svg"),
}
render() {
let { size, name, margin, style } = this.props
- let source = Icon.svgs[name] || Icon.svgs['placeholder']
+ let source = Icon.svgs[name] || Icon.svgs["placeholder"]
size -= margin * 2
- return
+ return (
+
+ )
}
}
diff --git a/website/src/ui/Input.js b/website/src/ui/Input.js
index 907d7b8..f3b98fb 100644
--- a/website/src/ui/Input.js
+++ b/website/src/ui/Input.js
@@ -1,7 +1,7 @@
-import Radium from 'radium'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
+import Radium from "radium"
+import PropTypes from "prop-types"
+import React, { Component } from "react"
+import { colorInfo, sizeInfo, fontInfo } from "ui/style"
// See https://stackoverflow.com/a/6891562/576235 for why we wrap the
element
@@ -10,12 +10,12 @@ export class Input extends Component {
static propTypes = {
password: PropTypes.bool,
placeholder: PropTypes.string,
- width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
onChange: PropTypes.func,
visible: PropTypes.bool,
disabled: PropTypes.bool,
name: PropTypes.string,
value: PropTypes.string,
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
}
static style = {
@@ -24,10 +24,10 @@ export class Input extends Component {
borderWidth: 1,
borderColor: colorInfo.border,
backgroundColor: colorInfo.inputBackground,
- borderStyle: 'solid',
+ borderStyle: "solid",
borderRadius: sizeInfo.inputBorderRadius,
- ':focus': {
- outline: 'none'
+ ":focus": {
+ outline: "none",
},
},
@@ -37,24 +37,40 @@ export class Input extends Component {
borderWidth: 0,
padding: 0,
margin: 0,
- width: '100%',
- outline: 'none',
- ':disabled': {
+ width: "100%",
+ outline: "none",
+ ":disabled": {
color: colorInfo.textDisabled,
background: colorInfo.inputBackground,
- }
+ },
},
}
render() {
- let { name, width, password, placeholder, onChange, visible, disabled, value } = this.props
+ let {
+ name,
+ width,
+ password,
+ placeholder,
+ onChange,
+ visible,
+ disabled,
+ value,
+ } = this.props
- width = width || '100%'
+ width = width || "100%"
return (
-
+
)
}
diff --git a/website/src/ui/Row.js b/website/src/ui/Row.js
index e7a4517..5499a63 100644
--- a/website/src/ui/Row.js
+++ b/website/src/ui/Row.js
@@ -1,13 +1,13 @@
-import Radium from 'radium'
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import Radium from "radium"
+import React, { Component } from "react"
+import PropTypes from "prop-types"
@Radium
export class Row extends Component {
static propTypes = {
children: PropTypes.node,
- minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
- width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+ minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
fillParent: PropTypes.bool,
}
@@ -15,30 +15,41 @@ export class Row extends Component {
const { children, width, minWidth, fillParent } = this.props
return (
-
{children}
- )
- }
-}
-
-Row.Item = Radium(class RowLayoutItem extends Component {
- static propTypes = {
- children: PropTypes.node,
- minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
- width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
- grow: PropTypes.bool,
- }
-
- render() {
- const { children, grow, width, minWidth } = this.props
- const flexGrow = grow ? 1 : null
-
- return (
-
+
{children}
)
}
-})
+}
+
+Row.Item = Radium(
+ class RowLayoutItem extends Component {
+ static propTypes = {
+ children: PropTypes.node,
+ minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ grow: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+ }
+
+ render() {
+ const { children, grow, width, minWidth } = this.props
+ const flexGrow = !grow ? null : typeof grow === "number" ? grow : 1
+
+ return (
+
+ {children}
+
+ )
+ }
+ }
+)
diff --git a/website/src/ui/index.js b/website/src/ui/index.js
index 409173f..6b0365a 100644
--- a/website/src/ui/index.js
+++ b/website/src/ui/index.js
@@ -1,24 +1,25 @@
-export { Anime } from './Anime'
-export { Box } from './Box'
-export { Button } from './Button'
-export { HeaderButton } from './HeaderButton'
-export { HeaderText } from './HeaderText'
-export { PanelButton } from './PanelButton'
-export { Checkbox } from './Checkbox'
-export { Input } from './Input'
-export { Image } from './Image'
-export { Text } from './Text'
-export { Link } from './Link'
-export { Icon } from './Icon'
-export { List } from './List'
-export { Dropdown } from './Dropdown'
-export { Modal } from './Modal'
-export { Dimmer } from './Dimmer'
-export { Loader } from './Loader'
-export { Row } from './Row'
-export { Column } from './Column'
-export { BoundButton } from './BoundButton'
-export { BoundCheckbox } from './BoundCheckbox'
-export { BoundInput } from './BoundInput'
-export { BoundEmailIcon } from './BoundEmailIcon'
-export { BoundDropdown } from './BoundDropdown'
+export { Anime } from "./Anime"
+export { Box } from "./Box"
+export { Button } from "./Button"
+export { FormIconButton } from "./FormIconButton"
+export { HeaderButton } from "./HeaderButton"
+export { HeaderText } from "./HeaderText"
+export { PanelButton } from "./PanelButton"
+export { Checkbox } from "./Checkbox"
+export { Input } from "./Input"
+export { Image } from "./Image"
+export { Text } from "./Text"
+export { Link } from "./Link"
+export { Icon } from "./Icon"
+export { List } from "./List"
+export { Dropdown } from "./Dropdown"
+export { Modal } from "./Modal"
+export { Dimmer } from "./Dimmer"
+export { Loader } from "./Loader"
+export { Row } from "./Row"
+export { Column } from "./Column"
+export { BoundButton } from "./BoundButton"
+export { BoundCheckbox } from "./BoundCheckbox"
+export { BoundInput } from "./BoundInput"
+export { BoundEmailIcon } from "./BoundEmailIcon"
+export { BoundDropdown } from "./BoundDropdown"
diff --git a/website/src/ui/style.js b/website/src/ui/style.js
index 7ec7acd..bf01ce6 100644
--- a/website/src/ui/style.js
+++ b/website/src/ui/style.js
@@ -1,36 +1,36 @@
let colorInfo = {
- text: '#000000',
- textInverse: '#FFFFFF',
- textPlaceholder: '#EEEEEE',
- textAlert: '#FF0000',
- textGray: '#B0B0B0',
- textDisabled: '#AAAAAA',
+ text: "#000000",
+ textInverse: "#FFFFFF",
+ textPlaceholder: "#EEEEEE",
+ textAlert: "#FF0000",
+ textGray: "#B0B0B0",
+ textDisabled: "#AAAAAA",
- border: '#B2B2B2',
+ border: "#B2B2B2",
- modalShadow: '#000000',
- modalBackground: '#FFFFFF',
+ modalShadow: "#000000",
+ modalBackground: "#FFFFFF",
- inputBackground: '#FFFFFF',
+ inputBackground: "#FFFFFF",
- buttonBackground: '#3498DB',
- buttonBackgroundHover: '#3CB0FD',
- buttonBackgroundActive: '#1A72AC',
- buttonDisabledBackground: '#E0E0E0',
+ buttonBackground: "#3498DB",
+ buttonBackgroundHover: "#3CB0FD",
+ buttonBackgroundActive: "#1A72AC",
+ buttonDisabledBackground: "#E0E0E0",
- headerBorder: '#B2B2B2',
- headerButtonBackground: '#FAFAFA',
- headerButtonBackgroundHover: '#DADADA',
- headerButtonBackgroundActive: '#AAAAAA',
+ headerBorder: "#B2B2B2",
+ headerButtonBackground: "#FAFAFA",
+ headerButtonBackgroundHover: "#DADADA",
+ headerButtonBackgroundActive: "#AAAAAA",
- checkboxUnchecked: '#A0A0A0',
- checkboxUncheckedHover: '#808080',
- checkmark: '#FFFFFF',
+ checkboxUnchecked: "#A0A0A0",
+ checkboxUncheckedHover: "#808080",
+ checkmark: "#FFFFFF",
- listBackground: '#FFFFFF',
- listBackgroundActive: '#E7E5E5',
+ listBackground: "#FFFFFF",
+ listBackgroundActive: "#E7E5E5",
- dropdownBackground: '#FFFFFF',
+ dropdownBackground: "#FFFFFF",
}
Object.assign(colorInfo, {
@@ -58,15 +58,15 @@ const sizeInfo = {
headerTextOffset: 2,
headerButtonMargin: 8,
- footerTextMargin: '5px 0px 5px 10px',
+ footerTextMargin: "5px 0px 5px 10px",
buttonHeight: 40,
- buttonPadding: '0 15px 0 15px',
+ buttonPadding: "0 15px 0 15px",
buttonWidth: 125,
buttonWideWidth: 225,
checkboxSize: 25,
- checkmarkBorder: '0 3px 3px 0',
+ checkmarkBorder: "0 3px 3px 0",
panelButton: 200,
panelButtonIcon: 170,
@@ -83,22 +83,27 @@ const sizeInfo = {
formBoundIcon: 30,
formBoundIconMargin: 0,
+ formButtonIcon: 24,
+ formButtonIconMargin: 0,
+ formButtonIconBorderRadius: 4,
+ formButtonIconPadding: 3,
+
listBorderWidth: 1,
listTopBottomGap: 10,
listIcon: 25,
- listIconMargin: '5px 10px 5px 10px',
+ listIconMargin: "5px 10px 5px 10px",
dropdownIconSize: 20,
dropdownItems: 6,
dropdownBorderWidth: 1,
dropdownIcon: 25,
- dropdownIconMargin: '5px 10px 5px 10px',
+ dropdownIconMargin: "5px 10px 5px 10px",
modalWidth: 450,
modalShadowWidth: 25,
modalMessageIcon: 150,
- profileWidth: '65vw',
+ profileWidth: "65vw",
inputPadding: 5,
inputBorderRadius: 5,
@@ -110,21 +115,21 @@ const sizeInfo = {
}
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: {
- small: '10pt',
- medium: '12pt',
- large: '14pt',
- huge: '26pt',
- header: '18pt',
- footer: '8pt',
+ small: "10pt",
+ medium: "12pt",
+ large: "14pt",
+ huge: "26pt",
+ header: "18pt",
+ footer: "8pt",
},
color: {
- 'normal': colorInfo.text,
- 'inverse': colorInfo.textInverse,
- 'alert': colorInfo.textAlert,
- 'dimmed': colorInfo.textGray,
- }
+ normal: colorInfo.text,
+ inverse: colorInfo.textInverse,
+ alert: colorInfo.textAlert,
+ dimmed: colorInfo.textGray,
+ },
}
export { colorInfo, sizeInfo, fontInfo }