[web] Add mouse support for FilterInput popover.

3 files changed, 19 insertions, 3 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index 042d6811..97c69930 100644
--- a/web/src/css/header.less
+++ b/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;
+            }
+        }
     }
 }
diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx
index 49fb5fbc..f07b8e24 100644
--- a/web/src/js/components/Header/FilterDocs.jsx
+++ b/web/src/js/components/Header/FilterDocs.jsx
@@ -11,7 +11,7 @@ export default class FilterDocs extends Component {
 
     constructor(props, context) {
         super(props, context)
-        this.state = { doc: FilterDocs.doc }
+        this.state = { doc: FilterDocs.doc, selectHandler: props.selectHandler}
     }
 
     componentWillMount() {
@@ -29,6 +29,10 @@ export default class FilterDocs extends Component {
         }
     }
 
+    handleClick(e, value){
+        this.state.selectHandler(value.split(" ")[0] + " ")
+    }
+
     render() {
         const { doc } = this.state
         return !doc ? (
@@ -37,7 +41,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.handleClick(e, cmd[0])}>
                             <td>{cmd[0].replace(' ', '\u00a0')}</td>
                             <td>{cmd[1]}</td>
                         </tr>
diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index e421f1a4..da2ba7e2 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/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,10 @@ export default class FilterInput extends Component {
         e.stopPropagation()
     }
 
+    selectFilter(cmd) {
+        this.setState({value: cmd})
+    }
+
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
     }