diff options
author | Maximilian Hils <git@maximilianhils.com> | 2015-03-29 01:45:37 +0100 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2015-03-29 01:45:37 +0100 |
commit | fd911b75e6a59c1050815a6c183c4eb32aaabb98 (patch) | |
tree | 18900dfaaef7ae2b788b9774e94903e44a428701 /web | |
parent | 1913975fa60c76bfb7e79a908b18e7e93793f71f (diff) | |
download | mitmproxy-fd911b75e6a59c1050815a6c183c4eb32aaabb98.tar.gz mitmproxy-fd911b75e6a59c1050815a6c183c4eb32aaabb98.tar.bz2 mitmproxy-fd911b75e6a59c1050815a6c183c4eb32aaabb98.zip |
web: global key handling
Diffstat (limited to 'web')
-rw-r--r-- | web/src/css/header.less | 2 | ||||
-rw-r--r-- | web/src/css/layout.less | 4 | ||||
-rw-r--r-- | web/src/js/components/mainview.js | 4 | ||||
-rw-r--r-- | web/src/js/components/proxyapp.js | 24 | ||||
-rw-r--r-- | web/src/js/utils.js | 1 |
5 files changed, 28 insertions, 7 deletions
diff --git a/web/src/css/header.less b/web/src/css/header.less index 73326288..8fa5e37f 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -17,7 +17,7 @@ header { } .filter-input { - .make-md-column(3, @menu-row-gutter-width); + .make-sm-column(3, @menu-row-gutter-width); } .filter-input .popover { diff --git a/web/src/css/layout.less b/web/src/css/layout.less index 4e96609b..5869411c 100644 --- a/web/src/css/layout.less +++ b/web/src/css/layout.less @@ -8,6 +8,8 @@ html, body, #container { display: flex; flex-direction: column; + outline: none; // our root element is focused by default. + > header, > footer, > .eventlog { flex: 0 0 auto; } @@ -19,8 +21,6 @@ html, body, #container { display: flex; flex-direction: row; - outline: 0; - &.vertical { flex-direction: column; } diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 54687373..f102ed5e 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -130,7 +130,7 @@ var MainView = React.createClass({ } this.selectFlow(flows[index]); }, - onKeyDown: function (e) { + onMainKeyDown: function (e) { var flow = this.getSelected(); if (e.ctrlKey) { return; @@ -229,7 +229,7 @@ var MainView = React.createClass({ } return ( - <div className="main-view" onKeyDown={this.onKeyDown} tabIndex="0"> + <div className="main-view"> <FlowTable ref="flowTable" selectFlow={this.selectFlow} setSortKeyFun={this.setSortKeyFun} diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 411e1be8..4013c3e4 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -9,6 +9,7 @@ var header = require("./header.js"); var EventLog = require("./eventlog.js"); var store = require("../store/store.js"); var Query = require("../actions.js").Query; +var Key = require("../utils.js").Key; //TODO: Move out of here, just a stub. @@ -26,6 +27,9 @@ var ProxyAppMain = React.createClass({ flowStore: React.PropTypes.object.isRequired, eventStore: React.PropTypes.object.isRequired }, + componentDidMount: function () { + React.findDOMNode(this).focus(); + }, getChildContext: function () { return { settingsStore: this.state.settingsStore, @@ -46,6 +50,22 @@ var ProxyAppMain = React.createClass({ eventStore: eventStore }; }, + getMainComponent: function () { + return this.refs.view.refs.__routeHandler__; + }, + onKeydown: function (e) { + switch(e.keyCode){ + case Key.I: + console.error("unimplemented: intercept"); + break; + default: + var main = this.getMainComponent(); + if(main && main.onMainKeyDown){ + main.onMainKeyDown(e); + } + } + + }, render: function () { var eventlog; if (this.getQuery()[Query.SHOW_EVENTLOG]) { @@ -57,9 +77,9 @@ var ProxyAppMain = React.createClass({ eventlog = null; } return ( - <div id="container"> + <div id="container" tabIndex="0" onKeyDown={this.onKeydown}> <header.Header/> - <RouteHandler query={this.getQuery()}/> + <RouteHandler ref="view" query={this.getQuery()}/> {eventlog} <Footer/> </div> diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 6fc11f9e..7aaf213f 100644 --- a/web/src/js/utils.js +++ b/web/src/js/utils.js @@ -5,6 +5,7 @@ var actions = require("./actions.js"); //debug window.$ = $; window._ = _; +window.React = require("React/addons"); var Key = { UP: 38, |