client/src/components/NoteInput.js
changeset 35 97106bacb24e
parent 29 4cfeabef7d5e
child 46 4aa24724e5b3
--- a/client/src/components/NoteInput.js	Wed Jun 14 16:08:31 2017 +0200
+++ b/client/src/components/NoteInput.js	Wed Jun 14 18:23:18 2017 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap';
+import { Form, FormGroup, FormControl, Button, Label, Row, Col, Panel } from 'react-bootstrap';
 import moment from 'moment';
 
 import PropTypes from 'prop-types';
@@ -67,20 +67,29 @@
   render() {
     return (
       <Form>
-        <Row>
-          <Col md={6}>
-            { this.renderTiming() }
-          </Col>
-          <Col md={6} className="text-right">
-            <Clock />
-          </Col>
-        </Row>
-        <hr />
-        <FormGroup>
-          <div className="editor-wrapper">
+        <Panel>
+            <Row>
+              <Col md={6}>
+                { this.renderTiming() }
+              </Col>
+              <Col md={6} className="text-right">
+                <Clock />
+              </Col>
+            </Row>
+        </Panel>
+        <div className="editor">
+          <div className="editor-left">
             <SlateEditor ref="editor" onChange={this.onEditorChange} />
           </div>
-        </FormGroup>
+          <div className="editor-right">
+            <FormControl
+              name="margin"
+              componentClass="textarea"
+              placeholder="Enter a margin comment for your note"
+              inputRef={ ref => { this.description = ref; } }
+            />
+          </div>
+        </div>
         <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
       </Form>
     );