From 390a435ac4b5ce78b1aa32b4b048318c5ef0ba03 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Thu, 18 Sep 2014 23:47:54 +0200 Subject: [PATCH] basic splitter -> kick-ass splitter --- libmproxy/web/static/css/app.css | 23 +++++++++++++++---- libmproxy/web/static/js/app.js | 33 +++++++++++++++++++++------ web/src/css/layout.less | 33 +++++++++++++++++++-------- web/src/js/components/proxyapp.jsx.js | 3 +-- web/src/js/components/utils.jsx.js | 30 ++++++++++++++++++++---- 5 files changed, 94 insertions(+), 28 deletions(-) diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css index 4c8727119..26ed8c3d2 100644 --- a/libmproxy/web/static/css/app.css +++ b/libmproxy/web/static/css/app.css @@ -69,16 +69,29 @@ body, flex: 1 1 auto; } .splitter { - flex: 0 0 4px; - background-color: #ccc; - content: "X"; + flex: 0 0 1px; + background-color: #aaa; + position: relative; } -.splitter-x { +.splitter > div { + position: absolute; +} +.splitter.splitter-x { cursor: col-resize; } -.splitter-y { +.splitter.splitter-x > div { + margin-left: -1px; + width: 4px; + height: 100%; +} +.splitter.splitter-y { cursor: row-resize; } +.splitter.splitter-y > div { + margin-top: -1px; + height: 4px; + width: 100%; +} .nav-tabs { border-bottom: solid #a6a6a6 1px; } diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js index 5e9654bde..8ee7133ee 100644 --- a/libmproxy/web/static/js/app.js +++ b/libmproxy/web/static/js/app.js @@ -403,15 +403,21 @@ var Splitter = React.createClass({displayName: 'Splitter', }); 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; @@ -438,8 +444,8 @@ var Splitter = React.createClass({displayName: 'Splitter', } 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(); @@ -448,6 +454,16 @@ var Splitter = React.createClass({displayName: 'Splitter', prev.style.flex = ""; next.style.flex = ""; + + if(!willUnmount){ + this.setState({ + applied: false + }); + } + + }, + componentWillUnmount: function(){ + this.reset(true); }, render: function(){ var className = "splitter"; @@ -456,7 +472,11 @@ var Splitter = React.createClass({displayName: 'Splitter', } else { className += " splitter-y"; } - return React.DOM.div({className: className, onMouseDown: this.onMouseDown}); + return ( + React.DOM.div({className: className}, + React.DOM.div({onMouseDown: this.onMouseDown, draggable: "true"}) + ) + ); } }); /** @jsx React.DOM */ @@ -991,7 +1011,6 @@ var ProxyAppMain = React.createClass({displayName: 'ProxyAppMain', SettingsStore.removeListener("change", this.onSettingsChange); }, onSettingsChange: function () { - console.log("onSettingsChange"); this.setState({settings: SettingsStore.getAll()}); }, render: function () { @@ -999,7 +1018,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 ? Splitter({axis: "y"}) : null, this.state.settings.showEventLog ? EventLog(null) : null, Footer({settings: this.state.settings}) ) diff --git a/web/src/css/layout.less b/web/src/css/layout.less index 55d6f61e3..510fde6a0 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 b45ec9114..ff6e8da1a 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({
- + {this.state.settings.showEventLog ? : null} {this.state.settings.showEventLog ? : null}
diff --git a/web/src/js/components/utils.jsx.js b/web/src/js/components/utils.jsx.js index d986e24a7..442bef239 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
; + return ( +
+
+
+ ); } }); \ No newline at end of file