Commit d05f4130 authored by chris's avatar chris

fix and refactor alignment tool

parent 8e58a019
......@@ -6,7 +6,7 @@ import classes from './AlignmentBox.local.scss'
const AlignmentBox = ({ active, id, noBorder, onClick }) => {
const styles = classNames(
classes.alignmentBox,
classes.root,
{
[classes.active]: active,
[classes.borderTop]: noBorder.top,
......
......@@ -2,7 +2,7 @@ $light-grey: #b3b3b3;
$main-grey: #666;
$white-rgba: rgba(255, 255, 255, 1);
.alignmentBox {
.root {
border: 1px solid $main-grey;
box-shadow: inset 0 0 0 2px $white-rgba;
cursor: pointer;
......
......@@ -9,8 +9,8 @@ const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
......@@ -26,8 +26,8 @@ const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
......@@ -43,8 +43,8 @@ const onClick = () => { return null };
<AlignmentBox
active={active}
id={id}
noBorder={noBorder}
id = {id}
onClick={onClick}
/>
```
......@@ -2,18 +2,20 @@ import classNames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import classes from './AlignmentBoxWithLabel.local.scss'
import AlignmentBox from './AlignmentBox'
import classes from './AlignmentBoxWithLabel.local.scss'
const AlignmentBoxWithLabel = ({ active, id, noBorder,
onClick, labelPositionRight, labelText }) => {
const styles = classNames(
classes.alignmentBoxWithLabel,
{
[classes.reverseOrder]: labelPositionRight
}
)
const AlignmentBoxWithLabel = ({
active,
id,
labelPositionRight,
labelText,
noBorder,
onClick
}) => {
const styles = classNames(classes.root, {
[classes.reverseOrder]: labelPositionRight
})
return (
<div className={styles}>
......@@ -22,8 +24,8 @@ const AlignmentBoxWithLabel = ({ active, id, noBorder,
</span>
<AlignmentBox
active={active}
noBorder={noBorder}
id={id}
noBorder={noBorder}
onClick={onClick}
/>
</div>
......@@ -34,14 +36,14 @@ AlignmentBoxWithLabel.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
labelPositionRight: PropTypes.bool,
labelText: PropTypes.string.isRequired,
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func,
labelText: PropTypes.string.isRequired
onClick: PropTypes.func
}
AlignmentBoxWithLabel.defaultProps = {
......
$blue: #0d78f2;
$font: 'Fira Sans Condensed';
.alignmentBoxWithLabel {
.root {
align-items: center;
display: flex;
flex-direction: row;
.label {
color: $blue;
font-family: 'Fira Sans Condensed';
font-family: $font;
font-size: 16px;
font-style: italic;
margin-right: 10px;
}
&.reverseOrder {
.label {
margin-left: 10px;
margin-right: 0;
order: 2;
}
}
}
......@@ -4,35 +4,36 @@ AligmentBox with Label on the left
const active = true;
const id = 'eyedee';
const labelText = 'left';
const noBorder = {};
const onClick = () => { return null };
const labelText = 'left';
<AlignmentBoxWithLabel
active={active}
id={id}
labelText={labelText}
noBorder={noBorder}
id = {id}
onClick={onClick}
labelText={labelText}
/>
```
Inactive AligmentBox with Label on the right
```js
const active = false;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
const labelPositionRight = true;
const labelText = 'right';
const noBorder = {};
const onClick = () => { return null };
<AlignmentBoxWithLabel
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
id={id}
labelPositionRight={labelPositionRight}
labelText={labelText}
noBorder={noBorder}
onClick={onClick}
/>
```
......@@ -4,31 +4,24 @@ import PropTypes from 'prop-types'
import AlignmentBoxWithLabel from './AlignmentBoxWithLabel'
import classes from './AlignmentTool.local.scss'
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 AlignmentTool = ({ data, onClickAlignmentBox }) => {
const onClick = (event) => {
const id = event.currentTarget.id
onClickAlignmentBox(id)
}
const leftData = data[0]
const rightData = data[1]
const noBorderRight = { right: true }
const noBorderLeft = { left: true }
const leftActive = (chapter.alignment.left)
const rightActive = (chapter.alignment.right)
return (
<div className={classes.alignmentTool}>
<div className={classes.root}>
<AlignmentBoxWithLabel
active={leftActive}
id={'left'}
labelText={labelOptions.labelTextLeft}
active={leftData.active}
id={leftData.id}
labelText={leftData.label}
noBorder={noBorderRight}
onClick={onClick}
/>
......@@ -36,9 +29,9 @@ const AlignmentTool = ({ chapter, labelOptions, onClickAllign }) => {
<div className={classes.middleLine} />
<AlignmentBoxWithLabel
active={rightActive}
id={'right'}
labelText={labelOptions.labelTextRight}
active={rightData.active}
id={rightData.id}
labelText={rightData.label}
labelPositionRight
noBorder={noBorderLeft}
onClick={onClick}
......@@ -48,32 +41,12 @@ const AlignmentTool = ({ chapter, labelOptions, onClickAllign }) => {
}
AlignmentTool.propTypes = {
chapter: PropTypes.shape({
alignment: {
left: PropTypes.bool,
right: PropTypes.bool
}
}),
labelOptions: PropTypes.shape({
labelTextLeft: PropTypes.string,
labelTextRight: PropTypes.string
}),
onClickAllign: PropTypes.func.isRequired
}
AlignmentTool.defaultProps = {
chapter: {
alignment: {
left: true,
right: true
}
},
labelPositionRight: false,
labelOptions: {
labelTextLeft: 'left',
labelTextRight: 'rgiht'
},
onClickAllign: () => null
data: PropTypes.arrayOf(PropTypes.shape({
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})).isRequired,
onClickAlignmentBox: PropTypes.func.isRequired
}
export default AlignmentTool
$main-grey: #666;
.alignmentTool {
.root {
display: flex;
margin-left: auto;
......
AligmentBox with Label on the left
AligmentTool with left box active
```js
const data = [
{
active: true,
id: 'left',
label: 'left'
},
{
active: false,
id: 'right',
label: 'right'
}
];
const labelOptions = { labelTextLeft: 'left', labelTextRight: 'right' };
const onClickAlignmentBox = () => null;
<AlignmentTool
labelOptions={labelOptions}
data={data}
onClickAlignmentBox={onClickAlignmentBox}
/>
```
......@@ -181,7 +181,7 @@ ChapterButtons.propTypes = {
bookId: React.PropTypes.string.isRequired,
chapter: React.PropTypes.object.isRequired,
isRenaming: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
modalContainer: React.PropTypes.object.isRequired,
onClickRename: React.PropTypes.func.isRequired,
onClickSave: React.PropTypes.func.isRequired,
......
......@@ -93,7 +93,7 @@ ChapterTitle.propTypes = {
chapter: React.PropTypes.object.isRequired,
isRenaming: React.PropTypes.bool.isRequired,
isRenameEmpty: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
onSaveRename: React.PropTypes.func.isRequired,
title: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
......
......@@ -92,7 +92,7 @@ class ChapterFirstRow extends React.Component {
ChapterFirstRow.propTypes = {
book: React.PropTypes.object.isRequired,
chapter: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
outerContainer: React.PropTypes.object.isRequired,
remove: React.PropTypes.func.isRequired,
roles: React.PropTypes.array,
......
import { keys, map } from 'lodash'
import React from 'react'
import AlignmentTool from './AlignmentTool'
......@@ -10,32 +11,55 @@ class ChapterSecondRow extends React.Component {
constructor (props) {
super(props)
this.onClickAllign = this.onClickAllign.bind(this)
this.onClickAlignmentBox = this.onClickAlignmentBox.bind(this)
}
onClickAllign (data) {
const { update } = this.props
update(data)
onClickAlignmentBox (id) {
const { chapter, update } = this.props
const patch = {
alignment: chapter.alignment,
id: chapter.id
}
patch.alignment[id] = !chapter.alignment[id]
update(patch)
}
render () {
const { chapter, convertFile, outerContainer, roles, toggleUpload, update, isUploadInProgress } = this.props
const {
chapter,
convertFile,
isUploadInProgress,
outerContainer,
roles,
toggleUpload,
update
} = this.props
const alignmentOptions = []
map(keys(chapter.alignment), (key) => {
const option = {
active: chapter.alignment[key],
id: key,
label: key
}
alignmentOptions.push(option)
})
// TODO -- surrounding divs should go inside the components
const labelOptions = { labelTextLeft: 'left', labelTextRight: 'right' }
return (
<div className={styles.secondLineContainer}>
<UploadButton
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
type='file'
update={update}
/>
<UploadButton
accept='.doc,.docx'
chapter={chapter}
convertFile={convertFile}
isUploadInProgress={isUploadInProgress}
modalContainer={outerContainer}
title=' '
toggleUpload={toggleUpload}
type='file'
update={update}
/>
<ProgressList
chapter={chapter}
......@@ -44,12 +68,10 @@ class ChapterSecondRow extends React.Component {
update={update}
/>
<AlignmentTool
chapter={chapter}
update={update}
labelOptions={labelOptions}
onClickAllign={this.onClickAllign}
/>
<AlignmentTool
data={alignmentOptions}
onClickAlignmentBox={this.onClickAlignmentBox}
/>
<div className={styles.separator} />
</div>
......@@ -61,7 +83,7 @@ ChapterSecondRow.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
outerContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
roles: React.PropTypes.array,
toggleUpload: React.PropTypes.func.isRequired,
update: React.PropTypes.func.isRequired
......
......@@ -98,7 +98,7 @@ export class UploadButton extends React.Component {
title={title}
name='single-file-uploader'
type={type}
disabled={noAction}
disabled={noAction}
/>
</span>
)
......@@ -152,7 +152,7 @@ UploadButton.propTypes = {
chapter: React.PropTypes.object.isRequired,
convertFile: React.PropTypes.func.isRequired,
modalContainer: React.PropTypes.object.isRequired,
isUploadInProgress: React.PropTypes.bool.isRequired,
isUploadInProgress: React.PropTypes.bool,
title: React.PropTypes.string.isRequired,
toggleUpload: React.PropTypes.func.isRequired,
type: React.PropTypes.string.isRequired,
......
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