add splitter

8 files changed, 100 insertions, 33 deletions

diff --git a/web/gulpfile.js b/web/gulpfile.js
index fc78bd1f..584cc7d3 100644
--- a/web/gulpfile.js
+++ b/web/gulpfile.js
@@ -41,6 +41,7 @@ var path = {
             'js/stores/eventlogstore.js',
             'js/stores/flowstore.js',
             'js/connection.js',
+            'js/components/utils.jsx.js',
             'js/components/header.jsx.js',
             'js/components/flowtable-columns.jsx.js',
             'js/components/flowtable.jsx.js',
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index 19eeecc0..88334391 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -1,4 +1,5 @@
 .flow-detail {
+    width: 100%;
     overflow: auto;
     
     nav {
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 66e8ac8a..5f91beaf 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -7,37 +7,7 @@ header {
     }
 
     @separator-color: lighten(grey, 15%);
-/*
-    nav {
-        border-bottom: solid @separator-color 1px;
-
-        a {
-            display: inline-block;
-            padding: 3px 14px;
-            margin: 0 2px -1px;
-            border: solid transparent 1px;
-            //text-transform: uppercase;
-            //font-family: Lato;
 
-            &.active {
-                border-color: @separator-color;
-                border-bottom-color: white;
-            }
-            &.active, &:hover {
-                text-decoration: none;
-            }
-            &.special {
-                @special-color: #396cad;
-                color: white;
-                background-color: @special-color;
-                border-bottom-color: @special-color;
-                &:hover {
-                    background-color: lighten(@special-color, 10%);
-                }
-            }
-        }
-    }
-*/
     .menu {
         padding: 10px;
         border-bottom: solid @separator-color 1px;
diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index 6e4abd24..55d6f61e 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -25,7 +25,19 @@ html, body, #container {
 
     .flow-detail, .flow-table {
         flex: 1 1 auto;
-        flex-basis: 50%;
     }
 
+}
+
+.splitter {
+    flex: 0 0 4px;
+    background-color: #ccc;
+    content: "X";
+
+}
+.splitter-x {
+    cursor: col-resize;
+}
+.splitter-y {
+    cursor: row-resize;
 }
\ No newline at end of file
diff --git a/web/src/js/components/flowdetail.jsx.js b/web/src/js/components/flowdetail.jsx.js
index 253084c2..acf5e6f4 100644
--- a/web/src/js/components/flowdetail.jsx.js
+++ b/web/src/js/components/flowdetail.jsx.js
@@ -39,13 +39,13 @@ var FlowDetailConnectionInfo = React.createClass({
     render: function(){
         return <div>details</div>;
     }
-})
+});
 
 var tabs = {
     request: FlowDetailRequest,
     response: FlowDetailResponse,
     details: FlowDetailConnectionInfo
-}
+};
 
 var FlowDetail = React.createClass({
     mixins: [StickyHeadMixin],
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 10ecfed0..79eb58ea 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -62,6 +62,7 @@ var MainView = React.createClass({
                            flows={this.state.flows}
                            selectFlow={this.selectFlow}
                            selected={selected} />
+                <Splitter/>
                 {details}
             </div>
         );
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index 6895b852..b45ec911 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -27,6 +27,7 @@ var ProxyAppMain = React.createClass({
             <div id="container">
                 <Header settings={this.state.settings}/>
                 <this.props.activeRouteHandler settings={this.state.settings}/>
+                <Splitter axis="y"/>
                 {this.state.settings.showEventLog ? <EventLog/> : null}
                 <Footer settings={this.state.settings}/>
             </div>
@@ -48,6 +49,7 @@ var ProxyApp = (
             <Route name="flows" path="flows" handler={MainView}/>
             <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
             <Route name="reports" handler={Reports}/>
+            <Redirect path="/" to="flows" />
         </Route>
     </Routes>
     );
\ No newline at end of file
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
new file mode 100644
index 00000000..d986e24a
--- /dev/null
+++ b/web/src/js/components/utils.jsx.js
@@ -0,0 +1,80 @@
+/** @jsx React.DOM */
+
+//React utils. For other utilities, see ../utils.js
+
+var Splitter = React.createClass({
+    getDefaultProps: function () {
+    return {
+        axis: "x"
+        }
+    },
+    getInitialState: function(){
+        return {
+            applied: false,
+            startX: false,
+            startY: false
+        };
+    },
+    onMouseDown: function(e){
+        this.setState({
+            startX: e.pageX,
+            startY: e.pageY
+        });
+        window.addEventListener("mousemove",this.onMouseMove);
+        window.addEventListener("mouseup",this.onMouseUp);
+    },
+    onMouseUp: function(e){
+        window.removeEventListener("mouseup",this.onMouseUp);
+        window.removeEventListener("mousemove",this.onMouseMove);
+
+        var node = this.getDOMNode();
+        var prev = node.previousElementSibling;
+        var next = node.nextElementSibling;
+        this.getDOMNode().style.transform="";
+
+        var dX = e.pageX-this.state.startX;
+        var dY = e.pageY-this.state.startY;
+        var flexBasis;
+        if(this.props.axis === "x"){
+            flexBasis = prev.offsetWidth + dX;
+        } else {
+            flexBasis = prev.offsetHeight + dY;
+        }
+
+        prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";   
+        next.style.flex = "1 1 auto";
+
+        this.setState({
+            applied: true
+        });
+    },
+    onMouseMove: function(e){
+        var dX = 0, dY = 0;
+        if(this.props.axis === "x"){
+            dX = e.pageX-this.state.startX;
+        } else {
+            dY = e.pageY-this.state.startY;
+        }
+        this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
+    },
+    reset: function(){
+        if(!this.state.applied){
+            return;
+        }
+        var node = this.getDOMNode();
+        var prev = node.previousElementSibling;
+        var next = node.nextElementSibling;
+        
+        prev.style.flex = "";
+        next.style.flex = "";
+    },
+    render: function(){
+        var className = "splitter";
+        if(this.props.axis === "x"){
+            className += " splitter-x";
+        } else {
+            className += " splitter-y";
+        }
+        return <div className={className} onMouseDown={this.onMouseDown}></div>;
+    }
+});
\ No newline at end of file