From c397a21980db5619863871bc214552563ae1583d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Thu, 2 Mar 2017 11:09:13 +0800
Subject: [web] Add mouse support for FilterInput popover.

---
 web/src/css/header.less                      | 7 +++++++
 web/src/js/components/Header/FilterDocs.jsx  | 8 ++++++--
 web/src/js/components/Header/FilterInput.jsx | 7 ++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'web/src')

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()
     }
-- 
cgit v1.2.3


From 6479bd4e76ec46a14a6f0cb7c3c5c7e56f402b50 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Fri, 3 Mar 2017 09:14:46 +0800
Subject: [web] Simplify the code. (#2085)

---
 web/src/js/components/Header/FilterDocs.jsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'web/src')

diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx
index f07b8e24..b471840b 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, selectHandler: props.selectHandler}
+        this.state = { doc: FilterDocs.doc }
     }
 
     componentWillMount() {
@@ -29,10 +29,6 @@ export default class FilterDocs extends Component {
         }
     }
 
-    handleClick(e, value){
-        this.state.selectHandler(value.split(" ")[0] + " ")
-    }
-
     render() {
         const { doc } = this.state
         return !doc ? (
@@ -41,7 +37,7 @@ export default class FilterDocs extends Component {
             <table className="table table-condensed">
                 <tbody>
                     {doc.commands.map(cmd => (
-                        <tr key={cmd[1]} onClick={e => this.handleClick(e, cmd[0])}>
+                        <tr key={cmd[1]} onClick={e => this.props.selectHandler(cmd[0].split(" ")[0] + " ")}>
                             <td>{cmd[0].replace(' ', '\u00a0')}</td>
                             <td>{cmd[1]}</td>
                         </tr>
-- 
cgit v1.2.3


From 6a3497f09c260de63c85ec26d5a366a6c55e3e88 Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Sat, 4 Mar 2017 22:44:13 +0800
Subject: [web] Retain focus on input field after selecting. (#2085)

---
 web/src/js/components/Header/FilterInput.jsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'web/src')

diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index da2ba7e2..12479c10 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/web/src/js/components/Header/FilterInput.jsx
@@ -88,6 +88,7 @@ export default class FilterInput extends Component {
 
     selectFilter(cmd) {
         this.setState({value: cmd})
+        ReactDOM.findDOMNode(this.refs.input).focus()
     }
 
     blur() {
-- 
cgit v1.2.3