improve css and dummy color picker

Author: Pedro Scaff

dist/index.js

@@ -8,6 +8,7 @@
     <div id="panes-layout">
         <div id="session"></div>
         <div id="canvas"></div>
+        <div id="styling"></div>
     </div>
     <script type="text/javascript" src="./dist/index.js"></script>
 </body>

index.html

@@ -11,6 +11,8 @@
   "license": "ISC",
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "prop-types": "^15.5.8",
+    "rc-color-picker": "^1.1.4",
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
   },

package.json

@@ -0,0 +1,6 @@
+.StylingPane {
+    display: flex;
+    flex-direction: column;
+    padding: 4px;
+    height: 100%;
+}

src/CanvasControl.css

@@ -0,0 +1,42 @@
+import './css/bootstrap.css';
+import './../node_modules/rc-color-picker/assets/index.css';
+import './CanvasControl.css';
+
+import {Panel as ColorPickerPanel} from 'rc-color-picker';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PROP_TYPES = {
+    onStyleChange: PropTypes.func,
+    canvas: PropTypes.object
+};
+
+class CanvasControl extends React.Component {
+    constructor(props) {
+        super(props);
+        // this.onColorChange = this.onColorChange.bind(this);
+    }
+
+    static get propTypes() {
+        return PROP_TYPES;
+    }
+
+    onColorChange(obj) {
+        this.props.canvas.updateOptions({colour: obj.color});
+    }
+
+    render() {
+        return (
+            <div className='StylingPane'>
+                <ColorPickerPanel
+                    mode='RGB'
+                    color={'#36c'}
+                    onChange={this.onColorChange.bind(this)}
+                />
+            </div>
+        );
+    }
+}
+
+export default CanvasControl;

src/CanvasControl.jsx

@@ -14,21 +14,28 @@
 input {
     width: 100%;
     background-color: rgba(31, 38, 42, 0.8);
-    color: white;
+    color: #c0d3db;
+    border: 0;
+}
+
+input:focus {
+    outline: none;
+}
+
+.Submit {
+    outline: 1px solid #c0d3db;
 }
 
 .AddressField {
     flex: 3;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
 }
 
 .PortField {
     flex: 1;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
+}
+
+.PortField > label > input {
+    text-align: center;
 }
 
 .SessionId {

src/ServerConfiguration.css

@@ -2,9 +2,10 @@ import './css/bootstrap.css';
 import './ServerConfiguration.css';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 const PROP_TYPES = {
-    clientCallback: React.PropTypes.func
+    clientCallback: PropTypes.func
 };
 
 class ServerConfiguration extends React.Component {

src/ServerConfiguration.jsx

@@ -9,6 +9,7 @@
 
 #canvas {
     flex: 4;
+    width: 100%;
 }
 
 #session {
@@ -17,3 +18,10 @@
     display: flex;
     flex-direction: column;
 }
+
+#styling {
+    flex: 1;
+    background-color: rgba(31, 38, 42, 0.8);
+    display: flex;
+    flex-direction: column;
+}

src/index.css

@@ -3,6 +3,7 @@ import './index.css';
 
 import drawr from 'drawr';
 import ServerConfiguration from './ServerConfiguration.jsx';
+import CanvasControl from './CanvasControl.jsx';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -49,3 +50,8 @@ ReactDOM.render(
     <ServerConfiguration clientCallback={handleConnectionInput}/>,
     document.getElementById('session')
 );
+
+ReactDOM.render(
+    <CanvasControl canvas={canvas}/>,
+    document.getElementById('styling')
+);