From fd911b75e6a59c1050815a6c183c4eb32aaabb98 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 29 Mar 2015 01:45:37 +0100 Subject: web: global key handling --- web/src/css/header.less | 2 +- web/src/css/layout.less | 4 ++-- web/src/js/components/mainview.js | 4 ++-- web/src/js/components/proxyapp.js | 24 ++++++++++++++++++++++-- web/src/js/utils.js | 1 + 5 files changed, 28 insertions(+), 7 deletions(-) (limited to 'web/src') 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 ( -
+
+
- + {eventlog}
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, -- cgit v1.2.3 From 93d1d0416d6b48506e4579456ad3d7cd9dbd3e91 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 29 Mar 2015 03:24:03 +0200 Subject: web: add more keyboard shortcuts --- web/src/js/components/header.js | 15 +++++++++++---- web/src/js/components/mainview.js | 5 ----- web/src/js/components/proxyapp.js | 36 ++++++++++++++++++++++++++++-------- web/src/js/utils.js | 8 ++++---- 4 files changed, 43 insertions(+), 21 deletions(-) (limited to 'web/src') 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({
- +
); @@ -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 f102ed5e..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); diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index 4013c3e4..ead6f7e8 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -25,16 +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 () { - React.findDOMNode(this).focus(); + 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 () { @@ -50,21 +52,39 @@ var ProxyAppMain = React.createClass({ eventStore: eventStore }; }, + focus: function () { + React.findDOMNode(this).focus(); + }, getMainComponent: function () { return this.refs.view.refs.__routeHandler__; }, onKeydown: function (e) { - switch(e.keyCode){ + + 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: - console.error("unimplemented: intercept"); + selectFilterInput("intercept"); + break; + case Key.L: + selectFilterInput("filter"); + break; + case Key.H: + selectFilterInput("highlight"); break; default: var main = this.getMainComponent(); - if(main && main.onMainKeyDown){ + if (main.onMainKeyDown) { main.onMainKeyDown(e); } + return; // don't prevent default then } - + e.preventDefault(); }, render: function () { var eventlog; @@ -78,7 +98,7 @@ var ProxyAppMain = React.createClass({ } return (
- + {eventlog}