diff --git a/app/components/BookBuilder/Division.jsx b/app/components/BookBuilder/Division.jsx index 97238b878460ec4b606817afd5962cc5fb39b380..91073891b185e6a8d1855596f681a7b46e6ed800 100644 --- a/app/components/BookBuilder/Division.jsx +++ b/app/components/BookBuilder/Division.jsx @@ -43,7 +43,8 @@ export class Division extends React.Component { status: 'unpublished', author: '', source: '', - comments: {} + comments: {}, + trackChanges: false } add(book, newChapter) diff --git a/app/components/SimpleEditor/SimpleEditor.jsx b/app/components/SimpleEditor/SimpleEditor.jsx index c04ec07d7c74dfd1f8e63d96f54f4f155daf3e44..b653a5f75ac0efb7cfc1fc6c6ca83e743b6b16b5 100644 --- a/app/components/SimpleEditor/SimpleEditor.jsx +++ b/app/components/SimpleEditor/SimpleEditor.jsx @@ -18,6 +18,11 @@ export default class SimpleEditor extends React.Component { constructor (props) { super(props) this.save = this.save.bind(this) + this.toggleTrackChangesStatus = this.toggleTrackChangesStatus.bind(this) + + this.state = { + trackChanges: props.fragment.trackChanges + } } createSession () { @@ -42,6 +47,15 @@ export default class SimpleEditor extends React.Component { } } + toggleTrackChangesStatus () { + const { fragment, update } = this.props + fragment.trackChanges = !fragment.trackChanges + update(fragment) + this.setState({ + trackChanges: fragment.trackChanges + }) + } + save (source, changes, callback) { const { onSave } = this.props const config = this.state.config @@ -101,6 +115,7 @@ export default class SimpleEditor extends React.Component { render () { const { canEdit } = this.props + let viewMode = !canEdit ? ( <Alert bsStyle='warning' className='view-mode'> @@ -109,9 +124,25 @@ export default class SimpleEditor extends React.Component { ) : null + let trackChangeStatus = 'Off' + let trackChangesIconClass = 'fa-eye-slash' + + if (this.state.trackChanges === true) { + trackChangeStatus = 'On' + trackChangesIconClass = 'fa-eye' + } + + let trackChanges = + <Alert bsStyle='warning' className='track-changes'> + <span> + <i className={'fa ' + trackChangesIconClass} onClick={this.toggleTrackChangesStatus} /> + Track Changes is {trackChangeStatus} + </span> + </Alert> + return ( <div className='editor-wrapper'> - {viewMode} + {viewMode} {trackChanges} </div> ) } @@ -123,6 +154,7 @@ SimpleEditor.propTypes = { fragment: React.PropTypes.object.isRequired, history: React.PropTypes.object.isRequired, onSave: React.PropTypes.func.isRequired, + update: React.PropTypes.func.isRequired, updateComments: React.PropTypes.func.isRequired, user: React.PropTypes.object.isRequired } diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss index dc46e4fd5e39a8fbd7b8239bf6df281714008dd6..98652dd0fa6a7ac7d28386b50b9aa83bc05c0333 100644 --- a/app/components/SimpleEditor/SimpleEditor.scss +++ b/app/components/SimpleEditor/SimpleEditor.scss @@ -38,6 +38,27 @@ $white: #fff; top: 10px; } } + + .track-changes { + height: 44px; + position: fixed; + right: 0; + text-align: center; + width: 20%; + z-index: 9999; + + span { + font-size: 14px; + position: relative; + top: 10px; + + i { + font-size: 20px; + padding-right: 10px; + cursor: pointer; + } + } + } } .sc-prose-editor { diff --git a/app/components/SimpleEditor/SimpleEditorWrapper.jsx b/app/components/SimpleEditor/SimpleEditorWrapper.jsx index 550324c65db4801e1267fcc2099fee0a54cc9ff3..b0d0bfd34f0b1e27d772b060e9d241388242a0b7 100644 --- a/app/components/SimpleEditor/SimpleEditorWrapper.jsx +++ b/app/components/SimpleEditor/SimpleEditorWrapper.jsx @@ -12,6 +12,7 @@ export class SimpleEditorWrapper extends React.Component { super(props) this.save = this.save.bind(this) + this.update = this.update.bind(this) this.updateComments = this.updateComments.bind(this) this._checkRights = this._checkRights.bind(this) @@ -65,9 +66,10 @@ export class SimpleEditorWrapper extends React.Component { updateFragment(book, fragment) } - // componentDidUpdate () { - // this._checkRights() - // } + componentDidUpdate () { + console.log('did update wrapper') + // this._checkRights() + } _checkRights () { const { fragment, user } = this.props @@ -99,10 +101,17 @@ export class SimpleEditorWrapper extends React.Component { updateFragment(book, fragment) } + update (newChapter) { + const { book } = this.props + const { updateFragment } = this.props.actions + updateFragment(book, newChapter) + } + render () { + console.log('render wrapper') const { book, fragment, history, user } = this.props - // console.log(fragment) + // TODO -- merge update and updateComments return ( <SimpleEditor book={book} @@ -110,6 +119,7 @@ export class SimpleEditorWrapper extends React.Component { fragment={fragment} history={history} onSave={this.save} + update={this.update} updateComments={this.updateComments} user={user} /> @@ -122,7 +132,8 @@ SimpleEditorWrapper.propTypes = { book: React.PropTypes.object.isRequired, fragment: React.PropTypes.object.isRequired, history: React.PropTypes.object.isRequired, - user: React.PropTypes.object.isRequired + user: React.PropTypes.object.isRequired, + update: React.PropTypes.func.isRequired } function mapStateToProps (state, ownProps) {