added new btn, changed to codemirror

web/package.json

@@ -29,7 +29,7 @@
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.1.0",
     "shallowequal": "^0.2.2",
-    "react-ace": "^3.5.0"
+    "react-codemirror" : "^0.2.6"
   },
   "devDependencies": {
     "babel-core": "^6.7.7",

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";
+@import (less) "footer.less";
+@import (less) "codemirror.less";

web/src/css/codemirror.less

@@ -0,0 +1,5 @@
+.ReactCodeMirror {
+	border: 1px solid #ccc;
+}
+
+@import (inline) "../../node_modules/codemirror/lib/codemirror.css";

web/src/css/flowview.less

@@ -6,4 +6,28 @@
         max-width: 100%;
         max-height: 100%;
     }
-}
+}
+
+.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;
+}

web/src/js/components/ContentView.jsx

@@ -67,20 +67,14 @@ export default class ContentView extends Component {
 
         return (
             <div>
-                <div className="row">
+                 <ContentLoader flow={flow} message={message}>
-                    <div className="col-sm-12">
+                    <ContentEditor
-                         <ContentLoader flow={flow} message={message}>
+                            onSave={content => {this.props.onContentChange(content);this.setState({contentEditorClosed : true});}}
-                            <ContentEditor
+                            onOpen={() => this.setState({contentEditorClosed : false})}
-                                    onSave={this.props.onContentChange}
+                            isClosed={this.state.contentEditorClosed}
-                                    onClose={() => this.setState({contentEditorClosed : true})}
+                            content=""
-                                    onOpen={() => this.setState({contentEditorClosed : false})}
+                    />
-                                    isClosed={this.state.contentEditorClosed}
+                </ContentLoader>
-                                    content=""
-                            />
-                        </ContentLoader>
-                    </div>
-                </div>
-
                 {this.state.contentEditorClosed && (<div>
                     {View.textView ? (
                         <ContentLoader  flow={flow} message={message}>

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}>
+                    <a  className="edit-flow" onClick={this.props.onOpen}>
-                        <i className="fa fa-pencil-square-o"/>
+                        <i className="fa fa-pencil"/>
                     </a> :
-                    <span>
+                    <a className="edit-flow"  onClick={() => this.props.onSave(this.state.content)}>
-                        <a className="btn btn-default btn-xs pull-right" onClick={this.props.onClose}>
+                        <i className="fa fa-check"/>
-                            <i className="fa fa-times"/>
+                    </a>
-                        </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>
                 }
                 {!this.props.isClosed &&
                     <CodeEditor value={this.state.content} onChange={content => this.setState({content: content})}/>

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
+                <Codemirror value={this.props.value} onChange={this.props.onChange} options={options}/>
-                    mode="javascript"
-                    theme="kuroir"
-                    onChange={this.props.onChange}
-                    name="rea"
-                    value={this.props.value}
-                    width="100%"
-                    editorProps={{$blockScrolling: Infinity}}
-                />
             </div>
         )
     }