Merge pull request #2085 from MatthewShao/dev

[web] Add mouse support for FilterInput popover.

web/src/css/header.less

@@ -113,5 +113,12 @@ header {
     .popover-content {
         max-height: 500px;
         overflow-y: auto;
+
+        tr {
+            cursor: pointer;
+            &:hover {
+                background-color: hsla(209, 52%, 84%, 0.5) !important;
+            }
+        }
     }
 }

web/src/js/components/Header/FilterDocs.jsx

@@ -37,7 +37,7 @@ export default class FilterDocs extends Component {
             <table className="table table-condensed">
                 <tbody>
                     {doc.commands.map(cmd => (
-                        <tr key={cmd[1]}>
+                        <tr key={cmd[1]} onClick={e => this.props.selectHandler(cmd[0].split(" ")[0] + " ")}>
                             <td>{cmd[0].replace(' ', '\u00a0')}</td>
                             <td>{cmd[1]}</td>
                         </tr>

web/src/js/components/Header/FilterInput.jsx

@@ -21,6 +21,7 @@ export default class FilterInput extends Component {
         this.onKeyDown = this.onKeyDown.bind(this)
         this.onMouseEnter = this.onMouseEnter.bind(this)
         this.onMouseLeave = this.onMouseLeave.bind(this)
+        this.selectFilter = this.selectFilter.bind(this)
     }
 
     componentWillReceiveProps(nextProps) {
@@ -41,7 +42,7 @@ export default class FilterInput extends Component {
 
     getDesc() {
         if (!this.state.value) {
-            return <FilterDocs/>
+            return <FilterDocs selectHandler={this.selectFilter}/>
         }
         try {
             return Filt.parse(this.state.value).desc
@@ -85,6 +86,11 @@ export default class FilterInput extends Component {
         e.stopPropagation()
     }
 
+    selectFilter(cmd) {
+        this.setState({value: cmd})
+        ReactDOM.findDOMNode(this.refs.input).focus()
+    }
+
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
     }