web: global key handling

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,