Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2025-01-30 23:09:44 +00:00
Code Issues Projects Releases Wiki Activity

add splitter

Browse Source
This commit is contained in:
Maximilian Hils 2014-09-18 23:22:02 +02:00
parent d1ba150ea7
commit e66f240e81
10 changed files with 210 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
libmproxy/web/static/css/app.css
View File

@ -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 */

89
libmproxy/web/static/js/app.js
View File

@ -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"})
)
)
);

1
web/gulpfile.js
View File

@ -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',

1
web/src/css/flowdetail.less
View File

@ -1,4 +1,5 @@
.flow-detail {
width: 100%;
overflow: auto;
nav {

30
web/src/css/header.less
View File

@ -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;

14
web/src/css/layout.less
View File

@ -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;
}

4
web/src/js/components/flowdetail.jsx.js
View File

@ -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],

1
web/src/js/components/mainview.jsx.js
View File

@ -62,6 +62,7 @@ var MainView = React.createClass({
flows={this.state.flows}
selectFlow={this.selectFlow}
selected={selected} />
<Splitter/>
{details}
</div>
);

2
web/src/js/components/proxyapp.jsx.js
View File

@ -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>
);

80
web/src/js/components/utils.jsx.js Normal file
View File

@ -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>;
}
});