aboutsummaryrefslogtreecommitdiffstats
path: root/libmproxy/web
diff options
context:
space:
mode:
authorMaximilian Hils <git@maximilianhils.com>2014-09-15 18:39:25 +0200
committerMaximilian Hils <git@maximilianhils.com>2014-09-15 18:39:25 +0200
commit1d9b1f79a11feb57043be1d9d656f4c1638d3357 (patch)
treeb1339c77d8761f7014424d7f73fb92c6fd600126 /libmproxy/web
parentcbf18320cdbd05197f232da69b3c9a5391735156 (diff)
downloadmitmproxy-1d9b1f79a11feb57043be1d9d656f4c1638d3357.tar.gz
mitmproxy-1d9b1f79a11feb57043be1d9d656f4c1638d3357.tar.bz2
mitmproxy-1d9b1f79a11feb57043be1d9d656f4c1638d3357.zip
web: eventlog ui
Diffstat (limited to 'libmproxy/web')
-rw-r--r--libmproxy/web/static/css/app.css12
-rw-r--r--libmproxy/web/static/js/app.js13
-rw-r--r--libmproxy/web/templates/index.html8
3 files changed, 24 insertions, 9 deletions
diff --git a/libmproxy/web/static/css/app.css b/libmproxy/web/static/css/app.css
index fe8fd79a..e5b9d134 100644
--- a/libmproxy/web/static/css/app.css
+++ b/libmproxy/web/static/css/app.css
@@ -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;
diff --git a/libmproxy/web/static/js/app.js b/libmproxy/web/static/js/app.js
index 7873046a..72bb5ff8 100644
--- a/libmproxy/web/static/js/app.js
+++ b/libmproxy/web/static/js/app.js
@@ -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."
)
)
diff --git a/libmproxy/web/templates/index.html b/libmproxy/web/templates/index.html
index 6cef0d25..4db2ed51 100644
--- a/libmproxy/web/templates/index.html
+++ b/libmproxy/web/templates/index.html
@@ -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>