Grasscutters/mitmproxy
3
0
Fork 0
mirror of https://github.com/Grasscutters/mitmproxy.git synced 2024-11-22 07:08:10 +00:00
Code Issues Projects Releases Wiki Activity

web: eventlog ui

Browse Source
This commit is contained in:
Maximilian Hils 2014-09-15 18:39:25 +02:00
parent cbf18320cd
commit 1d9b1f79a1
9 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,7 +64,7 @@ header nav a.special:hover {
background-color: #5386c6;
}
header .menu {
height: 100px;
padding: 10px;
border-bottom: solid #a6a6a6 1px;
}
.eventlog {
@ -76,6 +76,16 @@ header .menu {
height: 200px;
overflow: auto;
}
.eventlog .close-button {
float: right;
margin: -9px;
padding: 4px;
cursor: pointer;
color: grey;
}
.eventlog .close-button:hover {
color: black;
}
footer {
box-shadow: 0 -1px 3px #d3d3d3;
padding: 0px 10px 3px;

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

@ -232,14 +232,13 @@ var MainMenu = React.createClass({displayName: 'MainMenu',
mixins: [SettingsMixin],
handleSettingsChange:function() {
SettingsActions.update({
showEventLog: this.refs.showEventLogInput.getDOMNode().checked
showEventLog: !this.state.settings.showEventLog
});
},
render:function(){
return React.DOM.div(null,
React.DOM.label(null,
React.DOM.input({type: "checkbox", ref: "showEventLogInput", checked: this.state.settings.showEventLog, onChange: this.handleSettingsChange}),
"Show Event Log"
React.DOM.button({className: "btn " + (this.state.settings.showEventLog ? "btn-primary" : "btn-default"), onClick: this.handleSettingsChange},
React.DOM.i({className: "fa fa-database"}), " Display Event Log"
)
);
}
@ -355,10 +354,16 @@ var TrafficTable = React.createClass({displayName: 'TrafficTable',
/** @jsx React.DOM */
var EventLog = React.createClass({displayName: 'EventLog',
close:function(){
SettingsActions.update({
showEventLog: false
});
},
render:function(){
return (
React.DOM.div({className: "eventlog"},
React.DOM.pre(null,
React.DOM.i({className: "fa fa-close close-button", onClick: this.close}),
"much log."
)
)

8
libmproxy/web/templates/index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8">
<title>mitmproxy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/vendor.css"/>
<link rel="stylesheet" href="css/app.css"/>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="/static/css/vendor.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
<script src="/static/js/vendor.js"></script>
<script src="/static/js/app.js"></script>
</head>
<body>
<div id="mitmproxy"></div>

2
web/gulpfile.js
View File

@ -106,7 +106,7 @@ gulp.task("jshint", function () {
gulp.task("html", function () {
return gulp.src(path.html)
.pipe(gulp.dest(path.dist + "static"))
.pipe(gulp.dest(path.dist + "templates"))
.pipe(livereload({ auto: false }));
});

11
web/src/css/eventlog.less
View File

@ -8,4 +8,15 @@
height: 200px;
overflow: auto;
}
.close-button {
float: right;
margin: -9px;
padding: 4px;
cursor: pointer;
color: grey;
&:hover {
color: black;
}
}
}

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

@ -45,7 +45,7 @@ header {
}
.menu {
height: 100px;
padding: 10px;
border-bottom: solid @separator-color 1px;
}
}

8
web/src/index.html
View File

@ -4,10 +4,10 @@
<meta charset="UTF-8">
<title>mitmproxy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/vendor.css"/>
<link rel="stylesheet" href="css/app.css"/>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="/static/css/vendor.css"/>
<link rel="stylesheet" href="/static/css/app.css"/>
<script src="/static/js/vendor.js"></script>
<script src="/static/js/app.js"></script>
</head>
<body>
<div id="mitmproxy"></div>

6
web/src/js/components/EventLog.react.js
View File

@ -1,10 +1,16 @@
/** @jsx React.DOM */
var EventLog = React.createClass({
close(){
SettingsActions.update({
showEventLog: false
});
},
render(){
return (
<div className="eventlog">
<pre>
<i className="fa fa-close close-button" onClick={this.close}></i>
much log.
</pre>
</div>

9
web/src/js/components/Header.react.js
View File

@ -4,15 +4,14 @@ var MainMenu = React.createClass({
mixins: [SettingsMixin],
handleSettingsChange() {
SettingsActions.update({
showEventLog: this.refs.showEventLogInput.getDOMNode().checked
showEventLog: !this.state.settings.showEventLog
});
},
render(){
return <div>
<label>
<input type="checkbox" ref="showEventLogInput" checked={this.state.settings.showEventLog} onChange={this.handleSettingsChange}/>
Show Event Log
</label>
<button className={"btn " + (this.state.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.handleSettingsChange}>
<i className="fa fa-database"></i> Display Event Log
</button>
</div>;
}
});