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

Fix input element styling madness

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-04 14:03:42 -08:00
parent 3ef0a3bdc9
commit eaf26343b8
16 changed files with 265 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,42 +1,33 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Text, Button, Icon } from 'ui'
import { Text, Icon } from 'ui'
export default class BoundEmailIcon extends React.Component {
static propTypes = {
name: PropTypes.string,
binder: PropTypes.object,
width: PropTypes.number,
onClick: PropTypes.func
}
constructor(props) {
super(props)
this.state = props.binder.getField('emailValidated')
this.state = props.binder.getFieldState(props.name)
}
componentWillReceiveProps(nextProps) {
if (nextProps.binder !== this.props.binder) {
this.setState(nextProps.binder.getField(nextProps.name))
this.setState(nextProps.binder.getFieldState(nextProps.name))
}
}
render() {
if (this.state.value) {
return (
<div width={this.props.width}>
<Text>&nbsp;</Text>
<Icon name='mail' color='green' size='big' />
</div>
)
} else {
return (
<div width={this.props.width}>
<Text>&nbsp;</Text>
<Button icon='mail outline' color='red' labelPosition='left'
content='Resend Email' onClick={this.props.onClick} disabled={this.state.disabled} />
</div>
)
}
// const { value } = this.state
return (
<div>
<Text>&nbsp;</Text>
<br />
<Icon name='mail' size={30} margin={0} />
</div>
)
}
}

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

@@ -1,8 +1,7 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './Button.style'
import { sizeInfo } from './style'
import { colorInfo, sizeInfo } from './style'
import { Text } from '.'
class Button extends Component {
@@ -21,13 +20,34 @@ class Button extends Component {
disabled: false,
}
static style = {
button: {
height: sizeInfo.buttonHeight,
borderRadius: 10,
background: colorInfo.buttonBackgroundHover,
verticalAlign: 'middle',
padding: '0 15px 0 15px',
outline: 'none',
':hover': {
background: colorInfo.buttonBackground,
},
':disabled': {
background: colorInfo.disabledButtonBackground,
},
':active': {
borderWidth: 0,
background: colorInfo.buttonBackgroundActive,
}
}
}
render() {
const { name, submit, visible, disabled, width, text, onClick } = this.props
return (
<button name={name} type={!visible ? 'hidden' : submit ? 'submit' : 'button'}
disabled={disabled} form={submit}
style={[style.base, { width, minWidth: sizeInfo.minButtonWidth }]}
style={[Button.style.button, { width, minWidth: sizeInfo.minButtonWidth }]}
onClick={onClick}>
<Text color='inverse'>{text}</Text>
</button>

22
website/src/ui/Button.style.js
View File

@@ -1,22 +0,0 @@
import { colorInfo } from './style'
export default {
base: {
height: '100%',
borderRadius: 10,
background: colorInfo.buttonBackgroundHover,
verticalAlign: 'middle',
padding: '0 15px 0 15px',
outline: 'none',
':hover': {
background: colorInfo.buttonBackground,
},
':disabled': {
background: colorInfo.disabledButtonBackground,
},
':active': {
borderWidth: 0,
background: colorInfo.buttonBackgroundActive,
}
}
}

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

@@ -1,9 +1,8 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './Checkbox.style'
import { reactAutoBind } from 'auto-bind2'
import { fontInfo } from './style'
import { fontInfo, colorInfo, sizeInfo } from './style'
class Checkbox extends Component {
static propTypes = {
@@ -14,6 +13,58 @@ class Checkbox extends Component {
name: PropTypes.string,
}
static style = {
checkbox: {
position: 'relative',
display: 'inline-block',
cursor: 'pointer',
backgroundColor: colorInfo.buttonBackground,
height: sizeInfo.checkboxSize,
width: sizeInfo.checkboxSize,
':hover': {
backgroundColor: colorInfo.buttonBackgroundHover
}
},
input: {
position: 'absolute',
opacity: 0,
cursor: 'pointer',
},
checkboxUnchecked: {
backgroundColor: colorInfo.uncheckedCheckbox,
':hover': {
backgroundColor: colorInfo.uncheckedCheckboxHover,
}
},
checkboxDisabled: {
backgroundColor: colorInfo.disabledButtonBackground,
},
checkmark: {
position: 'absolute',
content: '',
left: 8,
top: 4,
width: 6,
height: 12,
borderStyle: 'solid',
borderColor: '#FFFFFF',
borderWidth: '0 3px 3px 0',
transform: 'rotate(45deg)',
},
checkmarkUnchecked: {
display: 'none'
},
label: {
marginLeft: 10,
}
}
constructor(props) {
super(props)
reactAutoBind(this)
@@ -32,14 +83,14 @@ class Checkbox extends Component {
return (
<div style={[!visible && { display: 'none' }]}>
<div style={[style.checkbox, disabled ? style.checkboxDisabled : !checked ? style.checkboxUnchecked : null]}
<div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
onClick={disabled ? null : this.onClick}>
<input id={name} type='checkbox' style={style.input} disabled={disabled} />
<div style={[style.checkmark, !checked && style.checkmarkUnchecked]} />
<input id={name} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
<div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
</div>
<label
htmlFor={name}
style={[style.label, {
style={[Checkbox.style.label, {
verticalAlign: 'top',
fontSize: fontInfo.size.medium,
fontFamily: fontInfo.family,

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

@@ -1,53 +0,0 @@
import { colorInfo, sizeInfo } from './style'
export default {
checkbox: {
position: 'relative',
display: 'inline-block',
cursor: 'pointer',
backgroundColor: colorInfo.buttonBackground,
height: sizeInfo.checkboxSize,
width: sizeInfo.checkboxSize,
':hover': {
backgroundColor: colorInfo.buttonBackgroundHover
}
},
input: {
position: 'absolute',
opacity: 0,
cursor: 'pointer',
},
checkboxUnchecked: {
backgroundColor: colorInfo.uncheckedCheckbox,
':hover': {
backgroundColor: colorInfo.uncheckedCheckboxHover,
}
},
checkboxDisabled: {
backgroundColor: colorInfo.disabledButtonBackground,
},
checkmark: {
position: 'absolute',
content: '',
left: 8,
top: 4,
width: 6,
height: 12,
borderStyle: 'solid',
borderColor: '#FFFFFF',
borderWidth: '0 3px 3px 0',
transform: 'rotate(45deg)',
},
checkmarkUnchecked: {
display: 'none'
},
label: {
marginLeft: 10,
}
}

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

@@ -1,7 +1,6 @@
import React, { Component } from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import style from './Dimmer.style'
import { reactAutoBind } from 'auto-bind2'
export class Dimmer extends Component {
@@ -10,6 +9,24 @@ export class Dimmer extends Component {
children: PropTypes.node,
}
static style = {
div: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 100,
background: 'rgba(25, 25, 30, 0.75)'
}
}
constructor(props) {
super(props)
reactAutoBind(this)
@@ -21,7 +38,7 @@ export class Dimmer extends Component {
render() {
return this.props.active ? (
<div style={style.dimmer} onClick={this.preventPropagation}>
<div style={Dimmer.style.div} onClick={this.preventPropagation}>
{this.props.children}
</div>
) : null

17
website/src/ui/Dimmer.style.js
View File

@@ -1,17 +0,0 @@
export default {
dimmer: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 100,
background: 'rgba(25, 25, 30, 0.75)'
}
}

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

@@ -1,9 +1,8 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './HeaderButton.style'
import { Icon, Image } from '.'
import { sizeInfo } from 'ui/style'
import { colorInfo, sizeInfo } from 'ui/style'
class HeaderButton extends Component {
static propTypes = {
@@ -12,6 +11,22 @@ class HeaderButton extends Component {
image: PropTypes.string,
}
static style = {
button: {
background: colorInfo.headerButtonBackground,
verticalAlign: 'middle',
borderWidth: 0,
padding: '0 0 0 0',
outline: 'none',
':hover': {
background: colorInfo.headerButtonBackgroundHover,
},
':active': {
background: colorInfo.headerButtonBackgroundActive,
}
}
}
render() {
const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
const { onClick, icon, image } = this.props
@@ -24,7 +39,7 @@ class HeaderButton extends Component {
}
return (
<button type='button' style={[{ height: size, width: size }, style.base]} onClick={onClick}>
<button type='button' style={[{ height: size, width: size }, HeaderButton.style.button]} onClick={onClick}>
{content}
</button>
)

17
website/src/ui/HeaderButton.style.js
View File

@@ -1,17 +0,0 @@
import { colorInfo } from './style'
export default {
base: {
background: colorInfo.headerButtonBackground,
verticalAlign: 'middle',
borderWidth: 0,
padding: '0 0 0 0',
outline: 'none',
':hover': {
background: colorInfo.headerButtonBackgroundHover,
},
':active': {
background: colorInfo.headerButtonBackgroundActive,
}
}
}

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

@@ -1,7 +1,6 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import style from './Input.style'
class Input extends Component {
static propTypes = {
@@ -15,14 +14,40 @@ class Input extends Component {
value: PropTypes.string,
}
static style = {
div: {
padding: '5px',
borderWidth: 1,
borderColor: '#b2b2b2',
backgroundColor: '#ffffff',
borderStyle: 'solid',
borderRadius: '5px',
':focus': {
outline: 'none'
},
},
input: {
fontSize: '16px',
color: '#000000',
borderWidth: 0,
padding: 0,
margin: 0,
width: '100%',
outline: 'none',
}
}
render() {
let { name, width, password, placeholder, onChange, visible, disabled, value } = this.props
width = width || '100%'
return (
<input name={name} value={value} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
style={[ { width }, style.base ]} placeholder={placeholder} onChange={onChange} />
<div style={Input.style.div}>
<input name={name} value={value} type={!visible ? 'hidden' : password ? 'password' : 'text'} disabled={disabled}
style={[ { width }, Input.style.input ]} placeholder={placeholder} onChange={onChange} />
</div>
)
}
}

15
website/src/ui/Input.style.js
View File

@@ -1,15 +0,0 @@
export default {
base: {
padding: '5px',
fontSize: '16px',
borderWidth: '1px',
borderColor: '#b2b2b2',
backgroundColor: '#ffffff',
color: '#000000',
borderStyle: 'solid',
borderRadius: '5px',
':focus': {
outline: 'none'
},
}
}

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

@@ -18,7 +18,7 @@ class List extends Component {
position: 'absolute',
width: '100%',
height: '100%',
fontSize: fontInfo.size.medium,
fontSize: fontInfo.size.large,
fontFamily: fontInfo.family,
}}>
<Box border={`${sizeInfo.listBorderWidth}px solid ${colorInfo.listBorder}`} radius={sizeInfo.formBoxRadius}>
@@ -47,6 +47,9 @@ List.Item = Radium(class ListItem extends Component {
<div style={{
display: 'table-row',
background: active ? colorInfo.listBackgroundActive : colorInfo.listBackground,
':hover': {
background: colorInfo.listBackgroundHover
},
}} onClick={onClick}>
{children}
</div>

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

@@ -1,9 +1,8 @@
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'
import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
class PanelButton extends Component {
static propTypes = {
@@ -12,13 +11,34 @@ class PanelButton extends Component {
text: PropTypes.string.isRequired,
}
static style = {
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,
}
}
}
render() {
const { onClick, icon, text } = this.props
return (
<button type='button'
style={[
style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
PanelButton.style.button, { height: sizeInfo.panelButtonSize, width: sizeInfo.panelButtonSize }
]}
onClick={onClick}>
<div style={{ position: 'relative' }}>

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

@@ -1,22 +0,0 @@
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,
}
}
}