basic splitter -> kick-ass splitter

3 files changed, 50 insertions, 16 deletions

diff --git a/web/src/css/layout.less b/web/src/css/layout.less
index 55d6f61e..510fde6a 100644
--- a/web/src/css/layout.less
+++ b/web/src/css/layout.less
@@ -30,14 +30,29 @@ html, body, #container {
 }
 
 .splitter {
-    flex: 0 0 4px;
-    background-color: #ccc;
-    content: "X";
+    flex: 0 0 1px;
+    background-color: #aaa;
+    position: relative;
 
+    > div {
+        position: absolute;
+        //debug: background-color: orange;
+    }
+
+    &.splitter-x {
+        cursor: col-resize;
+        > div {
+            margin-left: -1px;
+            width: 4px;
+            height: 100%;
+        }
+    }
+    &.splitter-y {
+        cursor: row-resize;
+        > div {
+            margin-top: -1px;
+            height: 4px;
+            width: 100%;
+        }
+    }
 }
-.splitter-x {
-    cursor: col-resize;
-}
-.splitter-y {
-    cursor: row-resize;
-}
\ No newline at end of file
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index b45ec911..ff6e8da1 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -19,7 +19,6 @@ var ProxyAppMain = React.createClass({
         SettingsStore.removeListener("change", this.onSettingsChange);
     },
     onSettingsChange: function () {
-        console.log("onSettingsChange");
         this.setState({settings: SettingsStore.getAll()});
     },
     render: function () {
@@ -27,7 +26,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 ? <Splitter axis="y"/> : null}
                 {this.state.settings.showEventLog ? <EventLog/> : null}
                 <Footer settings={this.state.settings}/>
             </div>
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js
index d986e24a..442bef23 100644
--- a/web/src/js/components/utils.jsx.js
+++ b/web/src/js/components/utils.jsx.js
@@ -22,15 +22,21 @@ var Splitter = React.createClass({
         });
         window.addEventListener("mousemove",this.onMouseMove);
         window.addEventListener("mouseup",this.onMouseUp);
+        // Occasionally, only a dragEnd event is triggered, but no mouseUp.
+        window.addEventListener("dragend",this.onDragEnd);
     },
-    onMouseUp: function(e){
+    onDragEnd: function(){
+        this.getDOMNode().style.transform="";
+        window.removeEventListener("dragend",this.onDragEnd);
         window.removeEventListener("mouseup",this.onMouseUp);
         window.removeEventListener("mousemove",this.onMouseMove);
+    },
+    onMouseUp: function(e){
+        this.onDragEnd();
 
         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;
@@ -57,8 +63,8 @@ var Splitter = React.createClass({
         }
         this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
     },
-    reset: function(){
-        if(!this.state.applied){
+    reset: function(willUnmount) {
+        if (!this.state.applied) {
             return;
         }
         var node = this.getDOMNode();
@@ -67,6 +73,16 @@ var Splitter = React.createClass({
         
         prev.style.flex = "";
         next.style.flex = "";
+
+        if(!willUnmount){
+            this.setState({
+                applied: false
+            });
+        }
+
+    },
+    componentWillUnmount: function(){
+        this.reset(true);
     },
     render: function(){
         var className = "splitter";
@@ -75,6 +91,10 @@ var Splitter = React.createClass({
         } else {
             className += " splitter-y";
         }
-        return <div className={className} onMouseDown={this.onMouseDown}></div>;
+        return (
+            <div className={className}>
+                <div onMouseDown={this.onMouseDown} draggable="true"></div>
+            </div>
+        );
     }
 });
\ No newline at end of file