added new btn, changed to codemirror

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>
         )
     }