added new btn, changed to codemirror

6 files changed, 50 insertions, 39 deletions

diff --git a/web/src/css/app.less b/web/src/css/app.less
index 046d378a..6f27f447 100644
--- a/web/src/css/app.less
+++ b/web/src/css/app.less
@@ -16,4 +16,5 @@ html {
 @import (less) "flowview.less";
 @import (less) "prompt.less";
 @import (less) "eventlog.less";
-@import (less) "footer.less";
\ No newline at end of file
+@import (less) "footer.less";
+@import (less) "codemirror.less";
diff --git a/web/src/css/codemirror.less b/web/src/css/codemirror.less
new file mode 100644
index 00000000..47c766f4
--- /dev/null
+++ b/web/src/css/codemirror.less
@@ -0,0 +1,5 @@
+.ReactCodeMirror {
+	border: 1px solid #ccc;
+}
+
+@import (inline) "../../node_modules/codemirror/lib/codemirror.css";
diff --git a/web/src/css/flowview.less b/web/src/css/flowview.less
index aa8a2df2..328e3a26 100644
--- a/web/src/css/flowview.less
+++ b/web/src/css/flowview.less
@@ -6,4 +6,28 @@
         max-width: 100%;
         max-height: 100%;
     }
-}
\ No newline at end of file
+}
+
+.edit-flow  {
+    position: absolute;
+    right: 25px;
+    top: 140px;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+
+    background-color: white;
+    border: solid 2px rgba(248, 145, 59, 0.7);
+
+    text-align: center;
+    font-size: 22px;
+    line-height: 37px;
+
+    transition: all 100ms ease-in-out;
+}
+
+.edit-flow:hover {
+    background-color: rgba(239, 108, 0, 0.7);
+    color: rgba(0,0,0,0.8);
+    border: solid 2px transparent;
+}
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>
         )
     }