add splitter

2026-04-26 13:24:58 +08:00 · 2014-09-18 23:22:02 +02:00
parent d1ba150ea7
commit e66f240e81
10 changed files with 210 additions and 100 deletions
--- a/libmproxy/web/static/css/app.css
+++ b/libmproxy/web/static/css/app.css
@@ -1,12 +1,10 @@
 html {
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
+  box-sizing: border-box;
 }
 *,
 *:before,
 *:after {
-  -moz-box-sizing: inherit;
-       box-sizing: inherit;
+  box-sizing: inherit;
 }
 .resource-icon {
  width: 32px;
@@ -50,44 +48,36 @@ body,
  overflow: hidden;
 }
 #container {
-  display: -webkit-flex;
-  display: -ms-flexbox;
  display: flex;
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 #container > header,
 #container > footer,
 #container > .eventlog {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
 }
 .main-view {
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  display: -webkit-flex;
-  display: -ms-flexbox;
+  flex: 1 1 auto;
  display: flex;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
 }
 .main-view.vertical {
-  -webkit-flex-direction: column;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 .main-view .flow-detail,
 .main-view .flow-table {
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
-  -webkit-flex-basis: 50%;
-      -ms-flex-preferred-size: 50%;
-          flex-basis: 50%;
+  flex: 1 1 auto;
+}
+.splitter {
+  flex: 0 0 4px;
+  background-color: #ccc;
+  content: "X";
+}
+.splitter-x {
+  cursor: col-resize;
+}
+.splitter-y {
+  cursor: row-resize;
 }
 .nav-tabs {
  border-bottom: solid #a6a6a6 1px;
@@ -120,37 +110,6 @@ body,
 }
 header {
  background-color: white;
-  /*
-    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%);
-                }
-            }
-        }
-    }
-*/
 }
 header .title-bar {
  line-height: 25px;
@@ -215,15 +174,14 @@ header .menu {
  text-align: right;
 }
 .flow-detail {
+  width: 100%;
  overflow: auto;
 }
 .flow-detail nav {
  background-color: #F2F2F2;
 }
 .eventlog {
-  -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
+  flex: 0 0 auto;
  margin: 0;
  border-radius: 0;
  height: 200px;
@@ -233,4 +191,6 @@ header .menu {
 footer {
  box-shadow: 0 -1px 3px #d3d3d3;
  padding: 0px 10px 3px;
-}
+}
+
+/*# sourceMappingURL=../css/app.css.map */
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -381,6 +381,86 @@ var Connection = new _Connection(location.origin + "/updates");

 /** @jsx React.DOM */

+//React utils. For other utilities, see ../utils.js
+
+var Splitter = React.createClass({displayName: 'Splitter',
+    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 React.DOM.div({className: className, onMouseDown: this.onMouseDown});
+    }
+});
+/** @jsx React.DOM */
+
 var MainMenu = React.createClass({displayName: 'MainMenu',
    statics: {
        title: "Traffic",
@@ -745,13 +825,13 @@ var FlowDetailConnectionInfo = React.createClass({displayName: 'FlowDetailConnec
    render: function(){
        return React.DOM.div(null, "details");
    }
-})
+});

 var tabs = {
    request: FlowDetailRequest,
    response: FlowDetailResponse,
    details: FlowDetailConnectionInfo
-}
+};

 var FlowDetail = React.createClass({displayName: 'FlowDetail',
    mixins: [StickyHeadMixin],
@@ -830,6 +910,7 @@ var MainView = React.createClass({displayName: 'MainView',
                           flows: this.state.flows, 
                           selectFlow: this.selectFlow, 
                           selected: selected}), 
+                Splitter(null), 
                details
            )
        );
@@ -918,6 +999,7 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain',
            React.DOM.div({id: "container"}, 
                Header({settings: this.state.settings}), 
                this.props.activeRouteHandler({settings: this.state.settings}), 
+                Splitter({axis: "y"}), 
                this.state.settings.showEventLog ? EventLog(null) : null, 
                Footer({settings: this.state.settings})
            )
@@ -938,7 +1020,8 @@ var ProxyApp = (
        Route({path: "/", handler: ProxyAppMain}, 
            Route({name: "flows", path: "flows", handler: MainView}), 
            Route({name: "flow", path: "flows/:flowId/:detailTab", handler: MainView}), 
-            Route({name: "reports", handler: Reports})
+            Route({name: "reports", handler: Reports}), 
+            Redirect({path: "/", to: "flows"})
        )
    )
    );