diff options
Diffstat (limited to 'web/src')
| -rw-r--r-- | web/src/css/flowdetail.less | 1 | ||||
| -rw-r--r-- | web/src/css/header.less | 30 | ||||
| -rw-r--r-- | web/src/css/layout.less | 14 | ||||
| -rw-r--r-- | web/src/js/components/flowdetail.jsx.js | 4 | ||||
| -rw-r--r-- | web/src/js/components/mainview.jsx.js | 1 | ||||
| -rw-r--r-- | web/src/js/components/proxyapp.jsx.js | 2 | ||||
| -rw-r--r-- | web/src/js/components/utils.jsx.js | 80 |
7 files changed, 99 insertions, 33 deletions
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 |