mirror of
https://github.com/Grasscutters/mitmproxy.git
synced 2025-01-30 14:58:38 +00:00
web: add more keyboard shortcuts
This commit is contained in:
Maximilian Hils
parent
fd911b75e6
commit
93d1d0416d
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
};
|
||||
@ -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);
|
||||
|
||||
@ -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 (
|
||||
<div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
|
||||
<header.Header/>
|
||||
<header.Header ref="header"/>
|
||||
<RouteHandler ref="view" query={this.getQuery()}/>
|
||||
{eventlog}
|
||||
<Footer/>
|
||||
|
||||
@ -2,10 +2,10 @@ var $ = require("jquery");
|
||||
var _ = require("lodash");
|
||||
var actions = require("./actions.js");
|
||||
|
||||
//debug
|
||||
window.$ = $;
|
||||
window._ = _;
|
||||
window.React = require("React/addons");
|
||||
//Debug (don't expose by default, this increases compile time drastically)
|
||||
//window.$ = $;
|
||||
//window._ = _;
|
||||
//window.React = require("React");
|
||||
|
||||
var Key = {
|
||||
UP: 38,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user