aboutsummaryrefslogtreecommitdiffstats
path: root/web/src
diff options
context:
space:
mode:
Diffstat (limited to 'web/src')
-rw-r--r--web/src/css/header.less2
-rw-r--r--web/src/css/layout.less4
-rw-r--r--web/src/js/components/header.js15
-rw-r--r--web/src/js/components/mainview.js9
-rw-r--r--web/src/js/components/proxyapp.js50
-rw-r--r--web/src/js/utils.js7
6 files changed, 65 insertions, 22 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/header.js b/web/src/js/components/header.js
index b2934df6..0452af3f 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -50,6 +50,7 @@ var FilterDocs = React.createClass({
}
});
var FilterInput = React.createClass({
+ mixins: [common.ChildFocus],
getInitialState: function () {
// Consider both focus and mouseover for showing/hiding the tooltip,
// because onBlur of the input is triggered before the click on the tooltip
@@ -114,11 +115,13 @@ var FilterInput = React.createClass({
// If closed using ESC/ENTER, hide the tooltip.
this.setState({mousefocus: false});
}
+ e.stopPropagation();
},
blur: function () {
this.refs.input.getDOMNode().blur();
+ this.context.returnFocus && this.context.returnFocus();
},
- focus: function () {
+ select: function () {
this.refs.input.getDOMNode().select();
},
render: function () {
@@ -184,18 +187,21 @@ var MainMenu = React.createClass({
<div>
<div className="menu-row">
<FilterInput
+ ref="filter"
placeholder="Filter"
type="filter"
color="black"
value={filter}
onChange={this.onFilterChange} />
<FilterInput
+ ref="highlight"
placeholder="Highlight"
type="tag"
color="hsl(48, 100%, 50%)"
value={highlight}
onChange={this.onHighlightChange}/>
<FilterInput
+ ref="intercept"
placeholder="Intercept"
type="pause"
color="hsl(208, 56%, 53%)"
@@ -357,7 +363,7 @@ var Header = React.createClass({
render: function () {
var header = header_entries.map(function (entry, i) {
var className;
- if(entry === this.state.active){
+ if (entry === this.state.active) {
className = "active";
} else {
className = "";
@@ -379,7 +385,7 @@ var Header = React.createClass({
{header}
</nav>
<div className="menu">
- <this.state.active/>
+ <this.state.active ref="active"/>
</div>
</header>
);
@@ -388,5 +394,6 @@ var Header = React.createClass({
module.exports = {
- Header: Header
+ Header: Header,
+ MainMenu: MainMenu
}; \ No newline at end of file
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 54687373..8f6989ae 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -15,18 +15,13 @@ var MainView = React.createClass({
flowStore: React.PropTypes.object.isRequired,
},
childContextTypes: {
- returnFocus: React.PropTypes.func.isRequired,
view: React.PropTypes.object.isRequired,
},
getChildContext: function () {
return {
- returnFocus: this.returnFocus,
view: this.state.view
};
},
- returnFocus: function () {
- this.getDOMNode().focus();
- },
getInitialState: function () {
var sortKeyFun = false;
var view = new views.StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
@@ -130,7 +125,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 +224,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..ead6f7e8 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.
@@ -24,13 +25,18 @@ var ProxyAppMain = React.createClass({
childContextTypes: {
settingsStore: React.PropTypes.object.isRequired,
flowStore: React.PropTypes.object.isRequired,
- eventStore: React.PropTypes.object.isRequired
+ eventStore: React.PropTypes.object.isRequired,
+ returnFocus: React.PropTypes.func.isRequired,
+ },
+ componentDidMount: function () {
+ this.focus();
},
getChildContext: function () {
return {
settingsStore: this.state.settingsStore,
flowStore: this.state.flowStore,
- eventStore: this.state.eventStore
+ eventStore: this.state.eventStore,
+ returnFocus: this.focus,
};
},
getInitialState: function () {
@@ -46,6 +52,40 @@ var ProxyAppMain = React.createClass({
eventStore: eventStore
};
},
+ focus: function () {
+ React.findDOMNode(this).focus();
+ },
+ getMainComponent: function () {
+ return this.refs.view.refs.__routeHandler__;
+ },
+ onKeydown: function (e) {
+
+ var selectFilterInput = function (name) {
+ var headerComponent = this.refs.header;
+ headerComponent.setState({active: header.MainMenu}, function () {
+ headerComponent.refs.active.refs[name].select();
+ });
+ }.bind(this);
+
+ switch (e.keyCode) {
+ case Key.I:
+ selectFilterInput("intercept");
+ break;
+ case Key.L:
+ selectFilterInput("filter");
+ break;
+ case Key.H:
+ selectFilterInput("highlight");
+ break;
+ default:
+ var main = this.getMainComponent();
+ if (main.onMainKeyDown) {
+ main.onMainKeyDown(e);
+ }
+ return; // don't prevent default then
+ }
+ e.preventDefault();
+ },
render: function () {
var eventlog;
if (this.getQuery()[Query.SHOW_EVENTLOG]) {
@@ -57,9 +97,9 @@ var ProxyAppMain = React.createClass({
eventlog = null;
}
return (
- <div id="container">
- <header.Header/>
- <RouteHandler query={this.getQuery()}/>
+ <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
+ <header.Header ref="header"/>
+ <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..d848ff24 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -2,9 +2,10 @@ var $ = require("jquery");
var _ = require("lodash");
var actions = require("./actions.js");
-//debug
-window.$ = $;
-window._ = _;
+//Debug (don't expose by default, this increases compile time drastically)
+//window.$ = $;
+//window._ = _;
+//window.React = require("React");
var Key = {
UP: 38,
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 08:22:29 +0000