Commit 968a2649 authored by chris's avatar chris

html + css for aligment box component

parent 8c47322d
......@@ -3,49 +3,55 @@ import React from 'react'
import styles from './AlignmentBox.local.scss'
class AlignmentBox extends React.Component {
constructor (props) {
super(props)
this.onClick = this.onClick.bind(this)
}
onClick () {
const { chapter, position, update } = this.props
if (!includes(['left', 'right'], position)) return
const patch = {
alignment: chapter.alignment,
id: chapter.id
}
patch.alignment[position] = !chapter.alignment[position]
update(patch)
}
render () {
const { chapter, position } = this.props
const selected = chapter.alignment[position]
// TODO -- fix classes here
const outerClass = styles.leftRightBox + ' ' + styles[position + 'Box']
const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
return (
<li onClick={this.onClick}>
<div className={outerClass}>
<div className={innerClass} />
</div>
</li>
)
}
}
AlignmentBox.propTypes = {
chapter: React.PropTypes.object.isRequired,
position: React.PropTypes.string.isRequired,
update: React.PropTypes.func.isRequired
// class AlignmentBox extends React.Component {
// constructor (props) {
// super(props)
// this.onClick = this.onClick.bind(this)
// }
//
// onClick () {
// const { chapter, position, update } = this.props
//
// if (!includes(['left', 'right'], position)) return
//
// const patch = {
// alignment: chapter.alignment,
// id: chapter.id
// }
//
// patch.alignment[position] = !chapter.alignment[position]
//
// update(patch)
// }
//
// render () {
// const { chapter, position } = this.props
// const selected = chapter.alignment[position]
//
// // TODO -- fix classes here
// const outerClass = styles.leftRightBox + ' ' + styles[position + 'Box']
// const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
//
// return (
// <li onClick={this.onClick}>
// <div className={outerClass}>
// <div className={innerClass} />
// </div>
// </li>
// )
// }
// }
// const innerClass = selected ? styles.boxActive : styles.boxInactiveHover
// const borderLess = { top: true, right: true, bottom: true, left: true }
const AlignmentBox = ({ active, id, udpate }) => (
<div className={styles.alignmentBox + ' ' + styles.active}></div>
)
AlignmentBox.defaultProps = {
active: false,
id: '',
update: () => null
}
export default AlignmentBox
$light-grey: #b3b3b3;
$main-grey: #666;
$white: #fff;
$white-rgba: rgba(255, 255, 255, 1);
.leftRightBox {
.alignmentBox {
border: 1px solid $main-grey;
float: left;
height: 26px;
padding: 2px 0 0 1.8px;
text-align: center;
width: 17.5px;
}
.leftBox {
border-right: 0;
}
.rightBox {
border-left: 0;
}
.boxActive {
background-color: $main-grey;
box-shadow: inset 0 0 0 2px $white-rgba;
cursor: pointer;
height: 20px;
width: 12px;
}
.boxInactiveHover {
background-color: $white;
cursor: pointer;
height: 20px;
width: 12px;
height: 26px;
width: 17px;
&:hover {
background-color: $light-grey;
transition: .25s ease-in-out 0s;
}
&.active {
background-color: $main-grey;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment