Commit 6b01d6ea authored by chris's avatar chris

aligment tool

parent d3c25c43
import React from 'react'
import PropTypes from 'prop-types'
import AlignmentBoxWithLabel from './AlignmentBoxWithLabel'
import classes from './AlignmentTool.local.scss'
const AlignmentTool = ({ chapter, labelOptions, update }) => {
const onClick = () => {
console.log('position clicked')
}
const noBorderRight = { right: true }
const noBorderLeft = { left: true }
return (
<div className={classes.alignmentTool}>
<AlignmentBoxWithLabel
active={false}
id={'left'}
labelText={labelOptions.labelTextLeft}
noBorder={noBorderRight}
onClick={onClick}
/>
<div className={classes.middleLine} />
<AlignmentBoxWithLabel
active
id={'right'}
labelText={labelOptions.labelTextRight}
labelPositionRight
noBorder={noBorderLeft}
onClick={onClick}
/>
</div>
)
}
AlignmentBoxWithLabel.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
labelPositionRight: PropTypes.bool,
labelText: PropTypes.string.isRequired,
labelOptions: PropTypes.shape({
labelTextLeft: PropTypes.string,
labelTextRight: PropTypes.string
}),
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func,
update: PropTypes.func.isRequired
}
AlignmentBoxWithLabel.defaultProps = {
active: false,
labelPositionRight: false,
labelOptions: {
labelTextLeft: 'left',
labelTextRight: 'rgiht'
},
noBorder: {
top: false,
bottom: false,
right: false,
left: false
},
onClick: () => null,
update: () => null
}
export default AlignmentTool
import React from 'react'
import AlignmentBox from './AlignmentBox'
import styles from '../styles/bookBuilder.local.scss'
export class AlignmentTool extends React.Component {
render () {
const { chapter, update } = this.props
// TODO -- what is boxDiver? divider?
return (
<ul className={styles.pagePosition}>
<li>left &nbsp;</li>
<AlignmentBox
chapter={chapter}
position='left'
update={update}
/>
<AlignmentBox
chapter={chapter}
position='right'
update={update}
/>
<li>
<div className={styles.boxDiver} />
</li>
<li>&nbsp; right</li>
</ul>
)
}
}
AlignmentTool.propTypes = {
chapter: React.PropTypes.object.isRequired,
update: React.PropTypes.func.isRequired
}
export default AlignmentTool
$main-grey: #666;
.alignmentTool {
display: flex;
.middleLine {
background-color: $main-grey;
height: 36px;
width: 1px;
}
}
AligmentBox with Label on the left
```js
const labelOptions = { labelTextLeft: 'left', labelTextRight: 'right' };
<AlignmentTool
labelOptions={labelOptions}
/>
```
......@@ -11,7 +11,7 @@ class ChapterSecondRow extends React.Component {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
// TODO -- surrounding divs should go inside the components
const labelOptions = { labelTextLeft: 'left', labelTextRight: 'right' }
return (
<div className={styles.secondLineContainer}>
......@@ -40,6 +40,7 @@ class ChapterSecondRow extends React.Component {
<AlignmentTool
chapter={chapter}
update={update}
labelOptions={labelOptions}
/>
</div>
......
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