diff options
Diffstat (limited to 'web/src/js/components')
| -rw-r--r-- | web/src/js/components/ContentView.jsx | 22 | ||||
| -rw-r--r-- | web/src/js/components/ContentView/ContentEditor.jsx | 16 | ||||
| -rw-r--r-- | web/src/js/components/common/CodeEditor.jsx | 17 |
3 files changed, 18 insertions, 37 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index fa26a057..70bca249 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -67,20 +67,14 @@ export default class ContentView extends Component { return ( <div> - <div className="row"> - <div className="col-sm-12"> - <ContentLoader flow={flow} message={message}> - <ContentEditor - onSave={this.props.onContentChange} - onClose={() => this.setState({contentEditorClosed : true})} - onOpen={() => this.setState({contentEditorClosed : false})} - isClosed={this.state.contentEditorClosed} - content="" - /> - </ContentLoader> - </div> - </div> - + <ContentLoader flow={flow} message={message}> + <ContentEditor + onSave={content => {this.props.onContentChange(content);this.setState({contentEditorClosed : true});}} + onOpen={() => this.setState({contentEditorClosed : false})} + isClosed={this.state.contentEditorClosed} + content="" + /> + </ContentLoader> {this.state.contentEditorClosed && (<div> {View.textView ? ( <ContentLoader flow={flow} message={message}> diff --git a/web/src/js/components/ContentView/ContentEditor.jsx b/web/src/js/components/ContentView/ContentEditor.jsx index a38e4d6f..ca2f3370 100644 --- a/web/src/js/components/ContentView/ContentEditor.jsx +++ b/web/src/js/components/ContentView/ContentEditor.jsx @@ -6,7 +6,6 @@ export default class ContentEditor extends Component { static propTypes = { content: PropTypes.string.isRequired, onSave: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, onOpen: PropTypes.func.isRequired, isClosed: PropTypes.bool.isRequired } @@ -20,17 +19,12 @@ export default class ContentEditor extends Component { return ( <div> {this.props.isClosed ? - <a className="btn btn-default btn-xs pull-right" onClick={this.props.onOpen}> - <i className="fa fa-pencil-square-o"/> + <a className="edit-flow" onClick={this.props.onOpen}> + <i className="fa fa-pencil"/> </a> : - <span> - <a className="btn btn-default btn-xs pull-right" onClick={this.props.onClose}> - <i className="fa fa-times"/> - </a> - <a className="btn btn-default btn-xs pull-right" onClick={() => this.props.onSave(this.state.content)}> - <i className="fa fa-floppy-o"/> - </a> - </span> + <a className="edit-flow" onClick={() => this.props.onSave(this.state.content)}> + <i className="fa fa-check"/> + </a> } {!this.props.isClosed && <CodeEditor value={this.state.content} onChange={content => this.setState({content: content})}/> diff --git a/web/src/js/components/common/CodeEditor.jsx b/web/src/js/components/common/CodeEditor.jsx index b10b13ed..c122cf94 100644 --- a/web/src/js/components/common/CodeEditor.jsx +++ b/web/src/js/components/common/CodeEditor.jsx @@ -1,9 +1,7 @@ import React, { Component, PropTypes } from 'react' import { render } from 'react-dom'; -import AceEditor from 'react-ace'; +import Codemirror from 'react-codemirror'; -import 'brace/mode/javascript'; -import 'brace/theme/kuroir'; export default class CodeEditor extends Component{ static propTypes = { @@ -12,17 +10,12 @@ export default class CodeEditor extends Component{ } render() { + let options = { + lineNumbers: true + }; return ( <div onKeyDown={e => e.stopPropagation()}> - <AceEditor - mode="javascript" - theme="kuroir" - onChange={this.props.onChange} - name="rea" - value={this.props.value} - width="100%" - editorProps={{$blockScrolling: Infinity}} - /> + <Codemirror value={this.props.value} onChange={this.props.onChange} options={options}/> </div> ) } |