From 63b9dd85b6efd9d292d4d79240e00b7d27e6616c Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Fri, 10 Jul 2015 09:49:44 -0700
Subject: Changed model of handling key down and focus change

---
 web/react/components/mention.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 520b81cbb..7a8045134 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,6 +6,23 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
+    handleKeyDown: function(e) {
+        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
+
+        console.log("Here: keyDown");
+
+        if (e.key === "ArrowUp") {
+            //selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
+            this.props.handleFocus(this.props.listId);
+        } 
+        else if (e.key === "ArrowDown") {
+            //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
+            this.props.handleFocus(this.props.listId);
+        }
+        else if (e.key === "Enter") {
+            this.handleClick();
+        }
+    },
     render: function() {
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
@@ -15,7 +32,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className="mentions-name" onClick={this.handleClick}>
+            <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 59b2a42ac89ca03a196bf5d20d617174a5bc30bb Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sat, 11 Jul 2015 12:57:28 -0700
Subject: Have arrow key selection working, but visually does not highlight
 correct mention.  Also if user continues to type things might get weird.

---
 web/react/components/mention.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 7a8045134..abb6ae5c6 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,22 +6,41 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
-    handleKeyDown: function(e) {
+    /*handleUp: function(e) {
         var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
 
         console.log("Here: keyDown");
 
         if (e.key === "ArrowUp") {
             //selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
+            e.preventDefault();
             this.props.handleFocus(this.props.listId);
         } 
         else if (e.key === "ArrowDown") {
             //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
+            e.preventDefault();
             this.props.handleFocus(this.props.listId);
         }
         else if (e.key === "Enter") {
+            e.preventDefault();
             this.handleClick();
         }
+    },*/
+    handleFocus: function() {
+        console.log("Entering " + this.props.listId);
+        this.setState({ isFocused: "mentions-focus" })
+    },
+    handleBlur: function() {
+        console.log("Leaving " + this.props.listId);
+        this.setState({ isFocused: "" });
+    },
+    getInitialState: function() {
+        if (this.props.isFocus) {
+            return { isFocused: "mentions-focus" };
+        }
+        else {
+            return { isFocused: "" };
+        }
     },
     render: function() {
         var icon;
@@ -32,7 +51,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
+            <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 9cc3d3428521fbc3a31def4f4780275d763a4011 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sat, 11 Jul 2015 14:25:18 -0700
Subject: Highlighting now occurs as you arrow key thru mention list.  However
 some small bugs remain.

---
 web/react/components/mention.jsx | 28 +++-------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index abb6ae5c6..4abf8d0df 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,32 +6,10 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
-    /*handleUp: function(e) {
-        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
-
-        console.log("Here: keyDown");
-
-        if (e.key === "ArrowUp") {
-            //selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
-            e.preventDefault();
-            this.props.handleFocus(this.props.listId);
-        } 
-        else if (e.key === "ArrowDown") {
-            //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
-            e.preventDefault();
-            this.props.handleFocus(this.props.listId);
-        }
-        else if (e.key === "Enter") {
-            e.preventDefault();
-            this.handleClick();
-        }
-    },*/
-    handleFocus: function() {
-        console.log("Entering " + this.props.listId);
+    select: function() {
         this.setState({ isFocused: "mentions-focus" })
     },
-    handleBlur: function() {
-        console.log("Leaving " + this.props.listId);
+    deselect: function() {
         this.setState({ isFocused: "" });
     },
     getInitialState: function() {
@@ -51,7 +29,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From ce9756e44dcdc1dedb46337f492f4ede8719fdd8 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sun, 12 Jul 2015 12:34:51 -0700
Subject: Improved selection logic when using both the mouse and arrow keys

---
 web/react/components/mention.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 4abf8d0df..1f6d1bcf1 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -21,6 +21,7 @@ module.exports = React.createClass({
         }
     },
     render: function() {
+        var self = this;
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
         if (this.props.id != null) {
@@ -29,7 +30,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick}>
+            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick} onMouseEnter={function(){self.props.handleMouseEnter(self.props.listId)}}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 61e7b9b2be969212dbb3577ef734a27620a525be Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 14 Jul 2015 16:13:31 -0700
Subject: Getting scrolling working with the arrow keys

---
 web/react/components/mention.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 1f6d1bcf1..3f6ec4a7b 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -30,7 +30,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick} onMouseEnter={function(){self.props.handleMouseEnter(self.props.listId)}}>
+            <div className={"mentions-name " + this.state.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={function(){self.props.handleMouseEnter(self.props.listId)}}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 9747053a4e017e64a21278981fe43573385488a0 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 14 Jul 2015 18:36:54 -0700
Subject: Fixes not selecting an element that hasn't been scrolled to

---
 web/react/components/mention.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 3f6ec4a7b..24098516e 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -24,7 +24,9 @@ module.exports = React.createClass({
         var self = this;
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
-        if (this.props.id != null) {
+        if (this.props.id === "allmention" || this.props.id === "channelmention") {
+            icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+        } else if (this.props.id != null) {
             icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image?time=" + timestamp}/></span>;
         } else {
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
-- 
cgit v1.2.3-1-g7c22


From 15b90ff72f7db4d611c5c5035e2d8cd310d4deff Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 14 Jul 2015 20:35:52 -0700
Subject: Added missing semi-colons

---
 web/react/components/mention.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 24098516e..f5ca4ce6d 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -7,7 +7,7 @@ module.exports = React.createClass({
         this.props.handleClick(this.props.username);
     },
     select: function() {
-        this.setState({ isFocused: "mentions-focus" })
+        this.setState({ isFocused: "mentions-focus" });
     },
     deselect: function() {
         this.setState({ isFocused: "" });
-- 
cgit v1.2.3-1-g7c22


From cb4cd741a45fc86a7c2d96e61abd65ad4bd728e1 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Thu, 16 Jul 2015 09:21:51 -0700
Subject: Code simplification and rebasing

---
 web/react/components/mention.jsx | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

(limited to 'web/react/components/mention.jsx')

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index f5ca4ce6d..114dc183f 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,19 +6,8 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
-    select: function() {
-        this.setState({ isFocused: "mentions-focus" });
-    },
-    deselect: function() {
-        this.setState({ isFocused: "" });
-    },
     getInitialState: function() {
-        if (this.props.isFocus) {
-            return { isFocused: "mentions-focus" };
-        }
-        else {
-            return { isFocused: "" };
-        }
+        return null;
     },
     render: function() {
         var self = this;
@@ -32,7 +21,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.state.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={function(){self.props.handleMouseEnter(self.props.listId)}}>
+            <div className={"mentions-name " + this.props.isFocused} id={this.props.id + "_mentions"} onClick={this.handleClick} onMouseEnter={this.props.handleMouseEnter}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
-- 
cgit v1.2.3-1-g7c22