From 87797d7ac07108ce5fd00902918e4900907b94b6 Mon Sep 17 00:00:00 2001
From: Clemens <cle1000.cb@gmail.com>
Date: Fri, 15 Jul 2016 14:41:30 +0200
Subject: [PATCH] added new btn, changed to codemirror

---
 web/package.json                              |  2 +-
 web/src/css/app.less                          |  3 ++-
 web/src/css/codemirror.less                   |  5 ++++
 web/src/css/flowview.less                     | 26 ++++++++++++++++++-
 web/src/js/components/ContentView.jsx         | 22 ++++++----------
 .../components/ContentView/ContentEditor.jsx  | 16 ++++--------
 web/src/js/components/common/CodeEditor.jsx   | 17 ++++--------
 7 files changed, 51 insertions(+), 40 deletions(-)
 create mode 100644 web/src/css/codemirror.less

diff --git a/web/package.json b/web/package.json
index 7cfd3d909..81b96adca 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/css/app.less b/web/src/css/app.less
index 046d378a1..6f27f4474 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 000000000..47c766f49
--- /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 aa8a2df27..328e3a261 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 fa26a057a..70bca249c 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 a38e4d6fc..ca2f33702 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 b10b13edf..c122cf942 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>
         )
     }