Commit 0e95b717 authored by chris's avatar chris

fix container to expand items in second row

parent 9cd8d0e6
......@@ -4,26 +4,39 @@ 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 AlignmentTool = ({ chapter, labelOptions, onClickAllign }) => {
const onClick = (e) => {
const boxId = e.currentTarget.id
const patch = {
alignment: chapter.alignment,
id: chapter.id
}
patch.alignment[boxId] = !chapter.alignment[boxId]
onClickAllign(patch)
}
const noBorderRight = { right: true }
const noBorderLeft = { left: true }
const leftActive = (chapter.alignment.left)
const rightActive = (chapter.alignment.right)
return (
<div className={classes.alignmentTool}>
<AlignmentBoxWithLabel
active={false}
active={leftActive}
id={'left'}
labelText={labelOptions.labelTextLeft}
noBorder={noBorderRight}
onClick={onClick}
/>
<div className={classes.middleLine} />
<AlignmentBoxWithLabel
active
active={rightActive}
id={'right'}
labelText={labelOptions.labelTextRight}
labelPositionRight
......@@ -35,12 +48,12 @@ const AlignmentTool = ({ chapter, labelOptions, update }) => {
}
AlignmentTool.propTypes = {
chapter: PropTypes.obj.isRequired,
chapter: PropTypes.object,
labelOptions: PropTypes.shape({
labelTextLeft: PropTypes.string,
labelTextRight: PropTypes.string
}),
update: PropTypes.func.isRequired
onClickAllign: PropTypes.func.isRequired
}
AlignmentTool.defaultProps = {
......@@ -49,7 +62,7 @@ AlignmentTool.defaultProps = {
labelTextLeft: 'left',
labelTextRight: 'rgiht'
},
update: () => null
onClickAllign: () => null
}
export default AlignmentTool
......@@ -2,6 +2,7 @@ $main-grey: #666;
.alignmentTool {
display: flex;
margin-left: auto;
.middleLine {
background-color: $main-grey;
......
......@@ -8,7 +8,7 @@ class ProgressList extends React.Component {
const { chapter, roles, modalContainer, update } = this.props
return (
<ul className={styles.secondActions + ' col-lg-7 col-md-12 col-sm-12 col-xs-12'}>
<ul className={styles.proggressListContainer}>
<ProgressItem
chapter={chapter}
hasIcon
......
......@@ -7,6 +7,17 @@ import UploadButton from './UploadButton'
import styles from '../styles/bookBuilder.local.scss'
class ChapterSecondRow extends React.Component {
constructor (props) {
super(props)
this.onClickAllign = this.onClickAllign.bind(this)
}
onClickAllign (data) {
const { update } = this.props
update(data)
}
render () {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
......@@ -14,8 +25,6 @@ class ChapterSecondRow extends React.Component {
const labelOptions = { labelTextLeft: 'left', labelTextRight: 'right' }
return (
<div className={styles.secondLineContainer}>
<div className={styles.noPadding + ' col-lg-2 col-md-12 col-sm-12 col-xs-12'}>
<UploadButton
accept='.doc,.docx'
chapter={chapter}
......@@ -27,7 +36,6 @@ class ChapterSecondRow extends React.Component {
type='file'
update={update}
/>
</div>
<ProgressList
chapter={chapter}
......@@ -36,13 +44,12 @@ class ChapterSecondRow extends React.Component {
update={update}
/>
<div className={styles.noPadding + ' col-lg-3 col-md-12 col-sm-12 col-xs-12'}>
<AlignmentTool
chapter={chapter}
update={update}
labelOptions={labelOptions}
onClickAllign={this.onClickAllign}
/>
</div>
<div className={styles.separator} />
</div>
......
......@@ -461,6 +461,7 @@ $upload-multiple: #b1b1b1;
}
.secondLineContainer {
display: flex;
padding-top: 1.8%;
.btnFile {
......@@ -497,7 +498,9 @@ $upload-multiple: #b1b1b1;
height: 24px;
}
.secondActions {
.proggressListContainer {
margin-left: 3%;
width: 40%;
li {
font-family: 'Fira Sans Condensed';
font-size: 16px;
......
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