From e79ade46b2c43c0a6ee1ecffac91ba348aac790d Mon Sep 17 00:00:00 2001
From: ralder <ralder@yandex.ru>
Date: Fri, 10 Jul 2015 12:20:00 -0700
Subject: [webui] fix incorrect height for mentions list for reply textbox

---
 web/react/components/mention_list.jsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index ba2c53612..103ff29bb 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -9,7 +9,12 @@ var Mention = require('./mention.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
+var MAX_HEIGHT_LIST = 292;
+var MAX_ITEMS_IN_LIST = 25;
+var ITEM_HEIGHT = 36;
+
 module.exports = React.createClass({
+    displayName: "MentionList",
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
 
@@ -72,7 +77,7 @@ module.exports = React.createClass({
     },
     render: function() {
         var mentionText = this.state.mentionText;
-        if (mentionText === '-1') return (<div/>);
+        if (mentionText === '-1') return null;
 
         var profiles = UserStore.getActiveOnlyProfiles();
         var users = [];
@@ -100,8 +105,7 @@ module.exports = React.createClass({
         var mentions = {};
         var index = 0;
 
-        for (var i = 0; i < users.length; i++) {
-            if (Object.keys(mentions).length >= 25) break;
+        for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
             if (this.alreadyMentioned(users[i].username)) continue;
 
             var firstName = "", lastName = "";
@@ -127,17 +131,20 @@ module.exports = React.createClass({
         }
         var numMentions = Object.keys(mentions).length;
 
-        if (numMentions < 1) return (<div/>);
+        if (numMentions < 1) return null;
 
-        var height = (numMentions*36) + 4;
-        var width = $('#'+this.props.id).parent().width();
-        var bottom = $(window).height() - $('#'+this.props.id).offset().top;
-        var left = $('#'+this.props.id).offset().left;
-        var max_height = $('#'+this.props.id).offset().top - 10;
+        var $mention_tab = $('#'+this.props.id);
+        var maxHeight = Math.min(MAX_HEIGHT_LIST, $mention_tab.offset().top - 10);
+        var style = {
+            height: Math.min(maxHeight, (numMentions*ITEM_HEIGHT) + 4),
+            width:  $mention_tab.parent().width(),
+            bottom: $(window).height() - $mention_tab.offset().top,
+            left:   $mention_tab.offset().left
+        };
 
         return (
-            <div className="mentions--top" style={{height: height, width: width, bottom: bottom, left: left}}>
-                <div ref="mentionlist" className="mentions-box" style={{height: height, width: width}}>
+            <div className="mentions--top" style={style}>
+                <div ref="mentionlist" className="mentions-box">
                     { mentions }
                 </div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 6e67be40544f537d624f7f4449b8fcb97e338fb3 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Fri, 19 Jun 2015 16:04:33 -0700
Subject: Added framework for handling up and down arrow key presses to move
 between different @mention choices

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

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 103ff29bb..3796d465f 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -56,6 +56,22 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
+    handleKeyDown: function(e) {
+        var selectedMention = this.state.selectedMention ? this.state.selectedMention : 1;
+
+        // Need to be able to know number of mentions, use in conditionals & still
+        // need to figure out how to highlight the mention I want every time.
+        // Remember separate Mention Ref within for, second if statement in render
+        // Maybe have the call there instead? Ehhh maybe not but need that to be able
+        // to "select" it maybe...
+        if (e.key === "ArrowUp") {
+            selectedMention = selectedMention === ? 1 : selectedMention++;
+        } 
+        else if (e.key === "ArrowDown") {
+            selectedMention = selectedMention === 1 ? : selectedMention--;
+        }
+        this.setState({selectedMention: selectedMention});
+    }
     addFirstMention: function() {
         if (!this.refs.mention0) return;
         this.refs.mention0.handleClick();
@@ -144,7 +160,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box">
+                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown}>
                     { mentions }
                 </div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From f635376aa45e2fbaa30698949a0c991ea06aa320 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Fri, 19 Jun 2015 16:04:56 -0700
Subject: Added comma

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

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 3796d465f..a2c6f0ff7 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -71,7 +71,7 @@ module.exports = React.createClass({
             selectedMention = selectedMention === 1 ? : selectedMention--;
         }
         this.setState({selectedMention: selectedMention});
-    }
+    },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
         this.refs.mention0.handleClick();
-- 
cgit v1.2.3-1-g7c22


From 924fd8609bb0b512cd60c1f345ec22dcb6bf0612 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Mon, 22 Jun 2015 17:39:55 -0700
Subject: Changed parts of framework

---
 web/react/components/mention_list.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index a2c6f0ff7..115ab1b2a 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -56,8 +56,8 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleKeyDown: function(e) {
-        var selectedMention = this.state.selectedMention ? this.state.selectedMention : 1;
+    handleKeyDown: function(e, numMentions) {
+        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
 
         // Need to be able to know number of mentions, use in conditionals & still
         // need to figure out how to highlight the mention I want every time.
@@ -65,10 +65,10 @@ module.exports = React.createClass({
         // Maybe have the call there instead? Ehhh maybe not but need that to be able
         // to "select" it maybe...
         if (e.key === "ArrowUp") {
-            selectedMention = selectedMention === ? 1 : selectedMention++;
+            selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
         } 
         else if (e.key === "ArrowDown") {
-            selectedMention = selectedMention === 1 ? : selectedMention--;
+            selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
         }
         this.setState({selectedMention: selectedMention});
     },
@@ -89,7 +89,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1" };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 1 };
     },
     render: function() {
         var mentionText = this.state.mentionText;
@@ -158,9 +158,11 @@ module.exports = React.createClass({
             left:   $mention_tab.offset().left
         };
 
+        //mentions[this.state.selectedMention].focus();
+
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown}>
+                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown.bind(this, numMentions)}>
                     { mentions }
                 </div>
             </div>
-- 
cgit v1.2.3-1-g7c22


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_list.jsx | 38 ++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 115ab1b2a..c5b4030c8 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -18,6 +18,8 @@ module.exports = React.createClass({
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
 
+        console.log("here!");
+
         var self = this;
         $('body').on('keypress.mentionlist', '#'+this.props.id,
             function(e) {
@@ -26,6 +28,16 @@ module.exports = React.createClass({
                     e.preventDefault();
                     self.addFirstMention();
                 }
+                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    self.handleFocus(0);
+                }
+                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1);
+                }
             }
         );
         $(document).click(function(e) {
@@ -56,21 +68,13 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleKeyDown: function(e, numMentions) {
-        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
-
-        // Need to be able to know number of mentions, use in conditionals & still
-        // need to figure out how to highlight the mention I want every time.
-        // Remember separate Mention Ref within for, second if statement in render
-        // Maybe have the call there instead? Ehhh maybe not but need that to be able
-        // to "select" it maybe...
-        if (e.key === "ArrowUp") {
-            selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
-        } 
-        else if (e.key === "ArrowDown") {
-            selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
-        }
-        this.setState({selectedMention: selectedMention});
+    handleFocus: function(listId) {
+        console.log("here! 1");
+        var mention = this.refs['mention' + index];
+        if (!mention) return;
+        var mentionRef = mention.refs.mention;
+        mentionRef.getDOMNode().focus();
+        console.log("here! 2");
     },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
@@ -140,6 +144,8 @@ module.exports = React.createClass({
                         username={users[i].username}
                         secondary_text={users[i].secondary_text}
                         id={users[i].id}
+                        listId={index}
+                        handleFocus={this.handleFocus}
                         handleClick={this.handleClick} />
                 );
                 index++;
@@ -162,7 +168,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown.bind(this, numMentions)}>
+                <div ref="mentionlist" className="mentions-box">
                     { mentions }
                 </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_list.jsx | 56 ++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 18 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index c5b4030c8..882b0d6ad 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -17,26 +17,44 @@ module.exports = React.createClass({
     displayName: "MentionList",
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
-
-        console.log("here!");
-
         var self = this;
         $('body').on('keypress.mentionlist', '#'+this.props.id,
             function(e) {
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) {
+                if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    self.addCurrentMention();
+                }
+            }
+        );
+        $('body').on('keydown.mentionlist', '#'+this.props.id,
+            function(e) {
+                console.log("here! top");
+                if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
                     e.stopPropagation();
                     e.preventDefault();
-                    self.addFirstMention();
+                    self.addCurrentMention();
                 }
                 if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
+                    console.log("here! 38");
                     e.stopPropagation();
                     e.preventDefault();
-                    self.handleFocus(0);
+
+                    if (self.handleSelection(self.state.selectedMention - 1))
+                        self.setState({ selectedMention: self.state.selectedMention - 1 });
+                    else {
+                        self.setState({ selectedMention: 0});
+                    }
                 }
                 if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
+                    console.log("here! 40");
                     e.stopPropagation();
                     e.preventDefault();
-                    self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1);
+
+                    if (self.handleSelection(self.state.selectedMention + 1))
+                        self.setState({ selectedMention: self.state.selectedMention + 1 });
+                    else
+                        self.setState({ selectedMention: 0 });
                 }
             }
         );
@@ -68,13 +86,17 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleFocus: function(listId) {
+    handleSelection: function(listId) {
         console.log("here! 1");
-        var mention = this.refs['mention' + index];
-        if (!mention) return;
-        var mentionRef = mention.refs.mention;
-        mentionRef.getDOMNode().focus();
-        console.log("here! 2");
+        var mention = this.refs['mention' + listId];
+        if (!mention) 
+            return false;
+        else
+            return true;
+    },
+    addCurrentMention: function() {
+        if (!this.refs['mention' + this.state.selectedMention]) return;
+        this.refs['mention' + this.state.selectedMention].handleClick();
     },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
@@ -93,7 +115,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 1 };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
     },
     render: function() {
         var mentionText = this.state.mentionText;
@@ -138,14 +160,14 @@ module.exports = React.createClass({
 
             if (firstName.lastIndexOf(mentionText,0) === 0
                     || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
-                mentions[i+1] = (
+                mentions[index] = (
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
                         secondary_text={users[i].secondary_text}
                         id={users[i].id}
                         listId={index}
-                        handleFocus={this.handleFocus}
+                        isFocus={this.state.selectedMention === index ? true : false}
                         handleClick={this.handleClick} />
                 );
                 index++;
@@ -164,8 +186,6 @@ module.exports = React.createClass({
             left:   $mention_tab.offset().left
         };
 
-        //mentions[this.state.selectedMention].focus();
-
         return (
             <div className="mentions--top" style={style}>
                 <div ref="mentionlist" className="mentions-box">
-- 
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_list.jsx | 55 +++++++++++++++++------------------
 1 file changed, 27 insertions(+), 28 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 882b0d6ad..0bef41905 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -18,43 +18,42 @@ module.exports = React.createClass({
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
         var self = this;
-        $('body').on('keypress.mentionlist', '#'+this.props.id,
-            function(e) {
-                if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    self.addCurrentMention();
-                }
-            }
-        );
+
         $('body').on('keydown.mentionlist', '#'+this.props.id,
             function(e) {
-                console.log("here! top");
                 if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
                     e.stopPropagation();
                     e.preventDefault();
                     self.addCurrentMention();
                 }
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
-                    console.log("here! 38");
+                else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) {
                     e.stopPropagation();
                     e.preventDefault();
 
-                    if (self.handleSelection(self.state.selectedMention - 1))
-                        self.setState({ selectedMention: self.state.selectedMention - 1 });
+                    if (!self.getSelection(self.state.selectedMention)) {
+                        self.setState({ selectedMention: 0 });
+                        self.refs['mention' + self.state.selectedMention].deselect();
+                    }
                     else {
-                        self.setState({ selectedMention: 0});
+                        self.refs['mention' + self.state.selectedMention].deselect();
+                        if (e.which === 38) {    
+                            if (self.getSelection(self.state.selectedMention - 1))
+                                self.setState({ selectedMention: self.state.selectedMention - 1 });
+                            else {
+                                var tempSelectedMention = -1;
+                                while (self.getSelection(++tempSelectedMention))
+                                    ;
+                                self.setState({ selectedMention: tempSelectedMention - 1 });
+                            }
+                        }
+                        else {
+                            if (self.getSelection(self.state.selectedMention + 1))
+                                self.setState({ selectedMention: self.state.selectedMention + 1 });
+                            else
+                                self.setState({ selectedMention: 0 });
+                        }
                     }
-                }
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
-                    console.log("here! 40");
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                    if (self.handleSelection(self.state.selectedMention + 1))
-                        self.setState({ selectedMention: self.state.selectedMention + 1 });
-                    else
-                        self.setState({ selectedMention: 0 });
+                    self.refs['mention' + self.state.selectedMention].select();
                 }
             }
         );
@@ -86,8 +85,7 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleSelection: function(listId) {
-        console.log("here! 1");
+    getSelection: function(listId) {
         var mention = this.refs['mention' + listId];
         if (!mention) 
             return false;
@@ -95,7 +93,7 @@ module.exports = React.createClass({
             return true;
     },
     addCurrentMention: function() {
-        if (!this.refs['mention' + this.state.selectedMention]) return;
+        if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention();
         this.refs['mention' + this.state.selectedMention].handleClick();
     },
     addFirstMention: function() {
@@ -173,6 +171,7 @@ module.exports = React.createClass({
                 index++;
             }
         }
+
         var numMentions = Object.keys(mentions).length;
 
         if (numMentions < 1) return null;
-- 
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_list.jsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 0bef41905..6b1d98cf6 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -32,7 +32,7 @@ module.exports = React.createClass({
 
                     if (!self.getSelection(self.state.selectedMention)) {
                         self.setState({ selectedMention: 0 });
-                        self.refs['mention' + self.state.selectedMention].deselect();
+                        //self.refs['mention' + self.state.selectedMention].deselect();
                     }
                     else {
                         self.refs['mention' + self.state.selectedMention].deselect();
@@ -54,6 +54,8 @@ module.exports = React.createClass({
                         }
                     }
                     self.refs['mention' + self.state.selectedMention].select();
+
+                    //self.checkIfInView('#'+self.props.id);
                 }
             }
         );
@@ -85,6 +87,13 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
+    handleMouseEnter: function(listId) {
+        if (this.getSelection(this.state.selectedMention)) {
+            this.refs['mention' + this.state.selectedMention].deselect();
+        }
+        this.setState({ selectedMention: listId });
+        this.refs['mention' + listId].select();
+    },
     getSelection: function(listId) {
         var mention = this.refs['mention' + listId];
         if (!mention) 
@@ -103,6 +112,15 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
+    checkIfInView: function(element) {
+        var offset = element.offset().top - $(window).scrollTop();
+        if(offset > window.innerHeight){
+            // Not in view so scroll to it
+            $('body').animate({scrollTop: offset}, 1000);
+            return false;
+        }
+       return true;
+    },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
         for (var i = 0; i < excludeUsers.length; i++) {
@@ -113,7 +131,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
     },
     render: function() {
         var mentionText = this.state.mentionText;
@@ -166,6 +184,7 @@ module.exports = React.createClass({
                         id={users[i].id}
                         listId={index}
                         isFocus={this.state.selectedMention === index ? true : false}
+                        handleMouseEnter={this.handleMouseEnter}
                         handleClick={this.handleClick} />
                 );
                 index++;
-- 
cgit v1.2.3-1-g7c22


From 6f93cbb490b41ec206b66018090f34e690a145a3 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sun, 12 Jul 2015 12:49:33 -0700
Subject: When moving from a mention lower in the list to one higher in the
 list by typing more, now properly highlights

---
 web/react/components/mention_list.jsx | 5 +++++
 1 file changed, 5 insertions(+)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 6b1d98cf6..e6b2f5e04 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -70,6 +70,11 @@ module.exports = React.createClass({
         PostStore.removeMentionDataChangeListener(this._onChange);
         $('body').off('keypress.mentionlist', '#'+this.props.id);
     },
+    componentDidUpdate: function() {
+        if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) {
+            this.refs.mention0.select();
+        }
+    },
     _onChange: function(id, mentionText, excludeList) {
         if (id !== this.props.id) return;
 
-- 
cgit v1.2.3-1-g7c22


From da228fc167494962dd222835510ff3a7db2e3a24 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sun, 12 Jul 2015 18:39:14 -0700
Subject: Minor changes towards getting interior scrolling working with arrow
 keys

---
 web/react/components/mention_list.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index e6b2f5e04..92a843bc5 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -55,7 +55,8 @@ module.exports = React.createClass({
                     }
                     self.refs['mention' + self.state.selectedMention].select();
 
-                    //self.checkIfInView('#'+self.props.id);
+                    self.checkIfInView($('#'+self.props.id));
+                    self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id));
                 }
             }
         );
@@ -118,10 +119,10 @@ module.exports = React.createClass({
         return (!this.refs.mention0);
     },
     checkIfInView: function(element) {
-        var offset = element.offset().top - $(window).scrollTop();
+        var offset = element.offset().top - $(window).scrollTop(); //$(this.props.id) ??
         if(offset > window.innerHeight){
             // Not in view so scroll to it
-            $('body').animate({scrollTop: offset}, 1000);
+            $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ??
             return false;
         }
        return true;
@@ -136,7 +137,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
     },
     render: function() {
         var mentionText = this.state.mentionText;
-- 
cgit v1.2.3-1-g7c22


From 346f727949866083d8fd94763c6df5660424c850 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Mon, 13 Jul 2015 09:53:39 -0700
Subject: Better handling of previous highlight when you backspace (therefore
 re-enlarging the number of mentions)

---
 web/react/components/mention_list.jsx | 57 +++++++++++++++++++++++++++--------
 1 file changed, 45 insertions(+), 12 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 92a843bc5..9dd80ebd5 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -31,32 +31,40 @@ module.exports = React.createClass({
                     e.preventDefault();
 
                     if (!self.getSelection(self.state.selectedMention)) {
-                        self.setState({ selectedMention: 0 });
+                        //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                         //self.refs['mention' + self.state.selectedMention].deselect();
+                        var tempSelectedMention = -1
+                        while (self.getSelection(++tempSelectedMention)) {
+                            if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) {
+                                this.refs['mention' + tempSelectedMention].select();
+                                this.setState({ selectedMention: tempSelectedMention });
+                                break;
+                            }
+                        }
                     }
                     else {
                         self.refs['mention' + self.state.selectedMention].deselect();
                         if (e.which === 38) {    
                             if (self.getSelection(self.state.selectedMention - 1))
-                                self.setState({ selectedMention: self.state.selectedMention - 1 });
+                                self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
                             else {
                                 var tempSelectedMention = -1;
                                 while (self.getSelection(++tempSelectedMention))
                                     ;
-                                self.setState({ selectedMention: tempSelectedMention - 1 });
+                                self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
                             }
                         }
                         else {
                             if (self.getSelection(self.state.selectedMention + 1))
-                                self.setState({ selectedMention: self.state.selectedMention + 1 });
+                                self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
                             else
-                                self.setState({ selectedMention: 0 });
+                                self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                         }
                     }
                     self.refs['mention' + self.state.selectedMention].select();
 
-                    self.checkIfInView($('#'+self.props.id));
-                    self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id));
+                    //self.checkIfInView($('#'+self.props.id));
+                    //self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id));
                 }
             }
         );
@@ -69,11 +77,36 @@ module.exports = React.createClass({
     },
     componentWillUnmount: function() {
         PostStore.removeMentionDataChangeListener(this._onChange);
-        $('body').off('keypress.mentionlist', '#'+this.props.id);
+        $('body').off('keydown.mentionlist', '#'+this.props.id);
+    },
+    componentWillUpdate: function() {
+        if (this.state.mentionText != "-1" && this.getSelection(this.state.selectedMention)) {
+            this.refs['mention' + this.state.selectedMention].deselect();
+        }
     },
     componentDidUpdate: function() {
-        if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) {
-            this.refs.mention0.select();
+        /*if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) {
+        }*/
+        if (this.state.mentionText != "-1" /*&& this.getSelection(this.state.selectedMention)*/) {
+            if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
+                var tempSelectedMention = -1;
+                var foundMatch = false;
+                while (this.getSelection(++tempSelectedMention)) {
+                    if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) {
+                        this.refs['mention' + tempSelectedMention].select();
+                        this.setState({ selectedMention: tempSelectedMention });
+                        foundMatch = true;
+                        break;
+                    }
+                }
+                if (!foundMatch) {
+                    this.refs.mention0.select();
+                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
+                }
+            }
+            else {
+                this.refs['mention' + this.state.selectedMention].select();
+            }
         }
     },
     _onChange: function(id, mentionText, excludeList) {
@@ -97,7 +130,7 @@ module.exports = React.createClass({
         if (this.getSelection(this.state.selectedMention)) {
             this.refs['mention' + this.state.selectedMention].deselect();
         }
-        this.setState({ selectedMention: listId });
+        this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username });
         this.refs['mention' + listId].select();
     },
     getSelection: function(listId) {
@@ -137,7 +170,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
     },
     render: function() {
         var mentionText = this.state.mentionText;
-- 
cgit v1.2.3-1-g7c22


From 4bb2451bd5ac7f570e510a0cb96c14f0b17e4fab Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Mon, 13 Jul 2015 13:11:03 -0700
Subject: Minor changes and tweaks trying to get scrolling to work

---
 web/react/components/mention_list.jsx | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 9dd80ebd5..ab511e424 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -50,7 +50,7 @@ module.exports = React.createClass({
                             else {
                                 var tempSelectedMention = -1;
                                 while (self.getSelection(++tempSelectedMention))
-                                    ;
+                                    ; //Need to find the top of the list
                                 self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
                             }
                         }
@@ -64,7 +64,10 @@ module.exports = React.createClass({
                     self.refs['mention' + self.state.selectedMention].select();
 
                     //self.checkIfInView($('#'+self.props.id));
-                    //self.checkIfInView($('#'+self.refs['mention' + self.state.selectedMention].props.id));
+                    self.checkIfInView();
+                    //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id);
+                    //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id));
+                    //console.log($('#'+self.props.id));
                 }
             }
         );
@@ -85,9 +88,7 @@ module.exports = React.createClass({
         }
     },
     componentDidUpdate: function() {
-        /*if (this.state.mentionText != "-1" && !this.getSelection(this.state.selectedMention)) {
-        }*/
-        if (this.state.mentionText != "-1" /*&& this.getSelection(this.state.selectedMention)*/) {
+        if (this.state.mentionText != "-1") {
             if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
                 var tempSelectedMention = -1;
                 var foundMatch = false;
@@ -141,8 +142,10 @@ module.exports = React.createClass({
             return true;
     },
     addCurrentMention: function() {
-        if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention();
-        this.refs['mention' + this.state.selectedMention].handleClick();
+        if (!this.refs['mention' + this.state.selectedMention]) 
+            this.addFirstMention();
+        else
+            this.refs['mention' + this.state.selectedMention].handleClick();
     },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
@@ -151,14 +154,20 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
-    checkIfInView: function(element) {
-        var offset = element.offset().top - $(window).scrollTop(); //$(this.props.id) ??
-        if(offset > window.innerHeight){
+    checkIfInView: function() {
+        var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id);
+        //var top = $('.mentions-box').position().bottom;
+        //$(".mentions-box").css("bottom", top+303);
+        //$("#"+this.props.id).scrollTop($("#"+this.props.id).scrollTop() + $("div.mentions-name.mentions-focused").position().top);
+        console.log(element.length);
+        console.log(element + " " + element.offset());
+        var offset = element.offset().bottom - $('#'+this.props.id).scrollTop(); //$(this.props.id) ??
+        if(offset > $('#'+this.props.id).innerHeight){
             // Not in view so scroll to it
             $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ??
             return false;
         }
-       return true;
+        return true;
     },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
-- 
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_list.jsx | 57 ++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 15 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index ab511e424..2f4f92e24 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -30,6 +30,8 @@ module.exports = React.createClass({
                     e.stopPropagation();
                     e.preventDefault();
 
+                    var tempSelectedMention = -1
+
                     if (!self.getSelection(self.state.selectedMention)) {
                         //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                         //self.refs['mention' + self.state.selectedMention].deselect();
@@ -64,7 +66,7 @@ module.exports = React.createClass({
                     self.refs['mention' + self.state.selectedMention].select();
 
                     //self.checkIfInView($('#'+self.props.id));
-                    self.checkIfInView();
+                    self.checkIfInView(e.which, tempSelectedMention);
                     //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id);
                     //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id));
                     //console.log($('#'+self.props.id));
@@ -154,20 +156,43 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
-    checkIfInView: function() {
-        var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id);
-        //var top = $('.mentions-box').position().bottom;
-        //$(".mentions-box").css("bottom", top+303);
-        //$("#"+this.props.id).scrollTop($("#"+this.props.id).scrollTop() + $("div.mentions-name.mentions-focused").position().top);
-        console.log(element.length);
-        console.log(element + " " + element.offset());
-        var offset = element.offset().bottom - $('#'+this.props.id).scrollTop(); //$(this.props.id) ??
-        if(offset > $('#'+this.props.id).innerHeight){
-            // Not in view so scroll to it
-            $('body').animate({scrollTop: offset}, 1000); //$(this.props.id) ??
-            return false;
+    checkIfInView: function(keyPressed, ifLoopUp) {
+        var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions");
+        var offset = element.offset().top - $("#mentionsbox").scrollTop();
+        var direction = keyPressed === 38 ? "up" : "down";
+        console.log("element offset top: " + $(element).offset().top + " box offset top: " + $("#mentionsbox").offset().top);
+        var scrollAmount;
+        if (direction === "up" && ifLoopUp !== -1) {
+            /*$("#mentionsbox").animate({
+                scrollTop: ("#mentionsbox").offset().top
+            }, 50);*/
+            scrollAmount = $("#mentionsbox").offset().top;
+        }
+        else if (direction === "down" && !this.refs['mention' + this.state.selectedMention].props.listId) {
+            /*$("#mentionsbox").animate({
+                scrollTop: 0
+            }, 50);*/
+            scrollAmount = 0;
+        }
+        else if (direction === "up") {
+            /*$("#mentionsbox").animate({
+                scrollTop: '-=28'
+            }, 50);*/
+            scrollAmount = "-=28";
+        }
+        else if (direction === "down") {
+            /*$("#mentionsbox").animate({
+                scrollTop: '+=28'
+            }, 50);*/
+            scrollAmount = "+=28";
         }
-        return true;
+        $("#mentionsbox").animate({
+            scrollTop: scrollAmount
+        }, 50);
+        /*$("#mentionsbox").animate({
+            scrollTop: $(element).offset().top - $("#mentionsbox").offset().top
+            //scrollTop: $(element).offset().top - $("#mentionsbox").offset().top
+        }, 50);*/
     },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
@@ -195,12 +220,14 @@ module.exports = React.createClass({
         all.username = "all";
         all.full_name = "";
         all.secondary_text = "Notifies everyone in the team";
+        all.id = "allmention";
         users.push(all);
 
         var channel = {};
         channel.username = "channel";
         channel.full_name = "";
         channel.secondary_text = "Notifies everyone in the channel";
+        channel.id = "channelmention";
         users.push(channel);
 
         users.sort(function(a,b) {
@@ -254,7 +281,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box">
+                <div ref="mentionlist" className="mentions-box" id="mentionsbox">
                     { mentions }
                 </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_list.jsx | 70 ++++++++++++-----------------------
 1 file changed, 24 insertions(+), 46 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 2f4f92e24..7cc90e36f 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -33,9 +33,6 @@ module.exports = React.createClass({
                     var tempSelectedMention = -1
 
                     if (!self.getSelection(self.state.selectedMention)) {
-                        //self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
-                        //self.refs['mention' + self.state.selectedMention].deselect();
-                        var tempSelectedMention = -1
                         while (self.getSelection(++tempSelectedMention)) {
                             if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) {
                                 this.refs['mention' + tempSelectedMention].select();
@@ -50,7 +47,6 @@ module.exports = React.createClass({
                             if (self.getSelection(self.state.selectedMention - 1))
                                 self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
                             else {
-                                var tempSelectedMention = -1;
                                 while (self.getSelection(++tempSelectedMention))
                                     ; //Need to find the top of the list
                                 self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
@@ -65,11 +61,10 @@ module.exports = React.createClass({
                     }
                     self.refs['mention' + self.state.selectedMention].select();
 
-                    //self.checkIfInView($('#'+self.props.id));
-                    self.checkIfInView(e.which, tempSelectedMention);
-                    //console.log('#'+self.refs['mention' + self.state.selectedMention].props.id);
-                    //console.log($('#'+self.refs['mention' + self.state.selectedMention].props.id));
-                    //console.log($('#'+self.props.id));
+                    self.scrollToMention(e.which, tempSelectedMention);
+                }
+                else if (e.which === 46 || e.which === 8) {
+                    self.setState({ lessText: true });
                 }
             }
         );
@@ -94,7 +89,7 @@ module.exports = React.createClass({
             if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
                 var tempSelectedMention = -1;
                 var foundMatch = false;
-                while (this.getSelection(++tempSelectedMention)) {
+                while (!this.state.lessText && this.getSelection(++tempSelectedMention)) {
                     if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) {
                         this.refs['mention' + tempSelectedMention].select();
                         this.setState({ selectedMention: tempSelectedMention });
@@ -102,15 +97,18 @@ module.exports = React.createClass({
                         break;
                     }
                 }
-                if (!foundMatch) {
+                if (this.refs.mention0 != undefined && !foundMatch) {
                     this.refs.mention0.select();
-                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
+                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username, lessText: false });
                 }
             }
-            else {
+            else if (this.refs['mention' + this.state.selectedMention] != undefined) {
                 this.refs['mention' + this.state.selectedMention].select();
             }
         }
+        else if (this.state.selectedMention !== 0) {
+            this.setState({ selectedMention: 0, selectedUsername: "" });
+        }
     },
     _onChange: function(id, mentionText, excludeList) {
         if (id !== this.props.id) return;
@@ -118,6 +116,7 @@ module.exports = React.createClass({
         var newState = this.state;
         if (mentionText != null) newState.mentionText = mentionText;
         if (excludeList != null) newState.excludeUsers = excludeList;
+
         this.setState(newState);
     },
     handleClick: function(name) {
@@ -156,43 +155,22 @@ module.exports = React.createClass({
     isEmpty: function() {
         return (!this.refs.mention0);
     },
-    checkIfInView: function(keyPressed, ifLoopUp) {
-        var element = $('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions");
-        var offset = element.offset().top - $("#mentionsbox").scrollTop();
+    scrollToMention: function(keyPressed, ifLoopUp) {
         var direction = keyPressed === 38 ? "up" : "down";
-        console.log("element offset top: " + $(element).offset().top + " box offset top: " + $("#mentionsbox").offset().top);
-        var scrollAmount;
-        if (direction === "up" && ifLoopUp !== -1) {
-            /*$("#mentionsbox").animate({
-                scrollTop: ("#mentionsbox").offset().top
-            }, 50);*/
-            scrollAmount = $("#mentionsbox").offset().top;
-        }
-        else if (direction === "down" && !this.refs['mention' + this.state.selectedMention].props.listId) {
-            /*$("#mentionsbox").animate({
-                scrollTop: 0
-            }, 50);*/
+        var scrollAmount = 0;
+
+        if (direction === "up" && ifLoopUp !== -1)
+            scrollAmount = $("#mentionsbox").innerHeight() + 10000000; //innerHeight is not the real height of the box in the RHS sometimes; this compensates as it should always go to the bottom anyway
+        else if (direction === "down" && this.refs['mention' + this.state.selectedMention].props.listId === 0)
             scrollAmount = 0;
-        }
-        else if (direction === "up") {
-            /*$("#mentionsbox").animate({
-                scrollTop: '-=28'
-            }, 50);*/
-            scrollAmount = "-=28";
-        }
-        else if (direction === "down") {
-            /*$("#mentionsbox").animate({
-                scrollTop: '+=28'
-            }, 50);*/
-            scrollAmount = "+=28";
-        }
+        else if (direction === "up") 
+            scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
+        else if (direction === "down")
+            scrollAmount = "+=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
+
         $("#mentionsbox").animate({
             scrollTop: scrollAmount
         }, 50);
-        /*$("#mentionsbox").animate({
-            scrollTop: $(element).offset().top - $("#mentionsbox").offset().top
-            //scrollTop: $(element).offset().top - $("#mentionsbox").offset().top
-        }, 50);*/
     },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
@@ -204,7 +182,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "", lessText: false };
     },
     render: function() {
         var mentionText = this.state.mentionText;
-- 
cgit v1.2.3-1-g7c22


From c5c4c0b4de6275ca3f4188c07d2d0d88ba230bd1 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 14 Jul 2015 19:59:09 -0700
Subject: Few minor bug fixes

---
 web/react/components/mention_list.jsx | 50 ++++++++++++-----------------------
 1 file changed, 17 insertions(+), 33 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 7cc90e36f..17c513714 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -31,41 +31,26 @@ module.exports = React.createClass({
                     e.preventDefault();
 
                     var tempSelectedMention = -1
-
-                    if (!self.getSelection(self.state.selectedMention)) {
-                        while (self.getSelection(++tempSelectedMention)) {
-                            if (self.state.selectedUsername === self.refs['mention' + tempSelectedMention].props.username) {
-                                this.refs['mention' + tempSelectedMention].select();
-                                this.setState({ selectedMention: tempSelectedMention });
-                                break;
-                            }
+                    self.refs['mention' + self.state.selectedMention].deselect();
+                    if (e.which === 38) {    
+                        if (self.getSelection(self.state.selectedMention - 1))
+                            self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
+                        else {
+                            while (self.getSelection(++tempSelectedMention))
+                                ; //Need to find the top of the list
+                            self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
                         }
                     }
                     else {
-                        self.refs['mention' + self.state.selectedMention].deselect();
-                        if (e.which === 38) {    
-                            if (self.getSelection(self.state.selectedMention - 1))
-                                self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
-                            else {
-                                while (self.getSelection(++tempSelectedMention))
-                                    ; //Need to find the top of the list
-                                self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
-                            }
-                        }
-                        else {
-                            if (self.getSelection(self.state.selectedMention + 1))
-                                self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
-                            else
-                                self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
-                        }
+                        if (self.getSelection(self.state.selectedMention + 1))
+                            self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
+                        else
+                            self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                     }
-                    self.refs['mention' + self.state.selectedMention].select();
 
+                    self.refs['mention' + self.state.selectedMention].select();
                     self.scrollToMention(e.which, tempSelectedMention);
                 }
-                else if (e.which === 46 || e.which === 8) {
-                    self.setState({ lessText: true });
-                }
             }
         );
         $(document).click(function(e) {
@@ -89,7 +74,7 @@ module.exports = React.createClass({
             if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
                 var tempSelectedMention = -1;
                 var foundMatch = false;
-                while (!this.state.lessText && this.getSelection(++tempSelectedMention)) {
+                while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) {
                     if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) {
                         this.refs['mention' + tempSelectedMention].select();
                         this.setState({ selectedMention: tempSelectedMention });
@@ -99,7 +84,7 @@ module.exports = React.createClass({
                 }
                 if (this.refs.mention0 != undefined && !foundMatch) {
                     this.refs.mention0.select();
-                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username, lessText: false });
+                    this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
                 }
             }
             else if (this.refs['mention' + this.state.selectedMention] != undefined) {
@@ -136,8 +121,7 @@ module.exports = React.createClass({
         this.refs['mention' + listId].select();
     },
     getSelection: function(listId) {
-        var mention = this.refs['mention' + listId];
-        if (!mention) 
+        if (!this.refs['mention' + listId]) 
             return false;
         else
             return true;
@@ -182,7 +166,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "", lessText: false };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
     },
     render: function() {
         var mentionText = this.state.mentionText;
-- 
cgit v1.2.3-1-g7c22


From cbcf44ac8506d316d57a7e0bb30baad258618bdb Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 14 Jul 2015 20:14:23 -0700
Subject: Minor changes to scroll 'feel' and logic flow

---
 web/react/components/mention_list.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 17c513714..1852a3ebc 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -41,7 +41,7 @@ module.exports = React.createClass({
                             self.setState({ selectedMention: tempSelectedMention - 1, selectedUsername: self.refs['mention' + (tempSelectedMention - 1)].props.username });
                         }
                     }
-                    else {
+                    else if (e.which === 40) {
                         if (self.getSelection(self.state.selectedMention + 1))
                             self.setState({ selectedMention: self.state.selectedMention + 1, selectedUsername: self.refs['mention' + (self.state.selectedMention + 1)].props.username });
                         else
@@ -82,12 +82,12 @@ module.exports = React.createClass({
                         break;
                     }
                 }
-                if (this.refs.mention0 != undefined && !foundMatch) {
+                if (this.getSelection(0) && !foundMatch) {
                     this.refs.mention0.select();
                     this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
                 }
             }
-            else if (this.refs['mention' + this.state.selectedMention] != undefined) {
+            else if (this.getSelection(this.state.selectedMention)) {
                 this.refs['mention' + this.state.selectedMention].select();
             }
         }
@@ -144,7 +144,7 @@ module.exports = React.createClass({
         var scrollAmount = 0;
 
         if (direction === "up" && ifLoopUp !== -1)
-            scrollAmount = $("#mentionsbox").innerHeight() + 10000000; //innerHeight is not the real height of the box in the RHS sometimes; this compensates as it should always go to the bottom anyway
+            scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
         else if (direction === "down" && this.refs['mention' + this.state.selectedMention].props.listId === 0)
             scrollAmount = 0;
         else if (direction === "up") 
@@ -154,7 +154,7 @@ module.exports = React.createClass({
 
         $("#mentionsbox").animate({
             scrollTop: scrollAmount
-        }, 50);
+        }, 75);
     },
     alreadyMentioned: function(username) {
         var excludeUsers = this.state.excludeUsers;
-- 
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_list.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 1852a3ebc..1df7a8298 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -30,7 +30,7 @@ module.exports = React.createClass({
                     e.stopPropagation();
                     e.preventDefault();
 
-                    var tempSelectedMention = -1
+                    var tempSelectedMention = -1;
                     self.refs['mention' + self.state.selectedMention].deselect();
                     if (e.which === 38) {    
                         if (self.getSelection(self.state.selectedMention - 1))
-- 
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_list.jsx | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 1df7a8298..fff0c10b8 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -31,7 +31,6 @@ module.exports = React.createClass({
                     e.preventDefault();
 
                     var tempSelectedMention = -1;
-                    self.refs['mention' + self.state.selectedMention].deselect();
                     if (e.which === 38) {    
                         if (self.getSelection(self.state.selectedMention - 1))
                             self.setState({ selectedMention: self.state.selectedMention - 1, selectedUsername: self.refs['mention' + (self.state.selectedMention - 1)].props.username });
@@ -48,7 +47,6 @@ module.exports = React.createClass({
                             self.setState({ selectedMention: 0, selectedUsername: self.refs.mention0.props.username });
                     }
 
-                    self.refs['mention' + self.state.selectedMention].select();
                     self.scrollToMention(e.which, tempSelectedMention);
                 }
             }
@@ -64,11 +62,6 @@ module.exports = React.createClass({
         PostStore.removeMentionDataChangeListener(this._onChange);
         $('body').off('keydown.mentionlist', '#'+this.props.id);
     },
-    componentWillUpdate: function() {
-        if (this.state.mentionText != "-1" && this.getSelection(this.state.selectedMention)) {
-            this.refs['mention' + this.state.selectedMention].deselect();
-        }
-    },
     componentDidUpdate: function() {
         if (this.state.mentionText != "-1") {
             if (this.state.selectedUsername !== "" && (!this.getSelection(this.state.selectedMention) || this.state.selectedUsername !== this.refs['mention' + this.state.selectedMention].props.username)) {
@@ -76,20 +69,15 @@ module.exports = React.createClass({
                 var foundMatch = false;
                 while (tempSelectedMention < this.state.selectedMention && this.getSelection(++tempSelectedMention)) {
                     if (this.state.selectedUsername === this.refs['mention' + tempSelectedMention].props.username) {
-                        this.refs['mention' + tempSelectedMention].select();
                         this.setState({ selectedMention: tempSelectedMention });
                         foundMatch = true;
                         break;
                     }
                 }
                 if (this.getSelection(0) && !foundMatch) {
-                    this.refs.mention0.select();
                     this.setState({ selectedMention: 0, selectedUsername: this.refs.mention0.props.username });
                 }
             }
-            else if (this.getSelection(this.state.selectedMention)) {
-                this.refs['mention' + this.state.selectedMention].select();
-            }
         }
         else if (this.state.selectedMention !== 0) {
             this.setState({ selectedMention: 0, selectedUsername: "" });
@@ -114,11 +102,7 @@ module.exports = React.createClass({
         this.setState({ mentionText: '-1' });
     },
     handleMouseEnter: function(listId) {
-        if (this.getSelection(this.state.selectedMention)) {
-            this.refs['mention' + this.state.selectedMention].deselect();
-        }
         this.setState({ selectedMention: listId, selectedUsername: this.refs['mention' + listId].props.username });
-        this.refs['mention' + listId].select();
     },
     getSelection: function(listId) {
         if (!this.refs['mention' + listId]) 
@@ -127,7 +111,7 @@ module.exports = React.createClass({
             return true;
     },
     addCurrentMention: function() {
-        if (!this.refs['mention' + this.state.selectedMention]) 
+        if (!this.getSelection(this.state.selectedMention)) 
             this.addFirstMention();
         else
             this.refs['mention' + this.state.selectedMention].handleClick();
@@ -169,6 +153,7 @@ module.exports = React.createClass({
         return { excludeUsers: [], mentionText: "-1", selectedMention: 0, selectedUsername: "" };
     },
     render: function() {
+        var self = this;
         var mentionText = this.state.mentionText;
         if (mentionText === '-1') return null;
 
@@ -220,8 +205,8 @@ module.exports = React.createClass({
                         secondary_text={users[i].secondary_text}
                         id={users[i].id}
                         listId={index}
-                        isFocus={this.state.selectedMention === index ? true : false}
-                        handleMouseEnter={this.handleMouseEnter}
+                        isFocused={this.state.selectedMention === index ? "mentions-focus" : ""}
+                        handleMouseEnter={function(value) { return function() { self.handleMouseEnter(value); } }(index)}
                         handleClick={this.handleClick} />
                 );
                 index++;
-- 
cgit v1.2.3-1-g7c22


From 1f87c46360b434335ee4b8eae5162b8d37de6f4b Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Thu, 16 Jul 2015 09:27:18 -0700
Subject: Minor code change for clarity

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

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index fff0c10b8..c5ff82346 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -129,7 +129,7 @@ module.exports = React.createClass({
 
         if (direction === "up" && ifLoopUp !== -1)
             scrollAmount = $("#mentionsbox").height() * 100; //Makes sure that it scrolls all the way to the bottom
-        else if (direction === "down" && this.refs['mention' + this.state.selectedMention].props.listId === 0)
+        else if (direction === "down" && this.state.selectedMention === 0)
             scrollAmount = 0;
         else if (direction === "up") 
             scrollAmount = "-=" + ($('#'+this.refs['mention' + this.state.selectedMention].props.id +"_mentions").innerHeight() - 5);
-- 
cgit v1.2.3-1-g7c22


From 1c7f0be268046d2b509e23268eebcbbef78c5a24 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Thu, 9 Jul 2015 15:49:23 -0400
Subject: Renamed all clientside references from full_name to nickname

---
 web/react/components/mention_list.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index c5ff82346..c04e28849 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -165,14 +165,14 @@ module.exports = React.createClass({
 
         var all = {};
         all.username = "all";
-        all.full_name = "";
+        all.nickname = "";
         all.secondary_text = "Notifies everyone in the team";
         all.id = "allmention";
         users.push(all);
 
         var channel = {};
         channel.username = "channel";
-        channel.full_name = "";
+        channel.nickname = "";
         channel.secondary_text = "Notifies everyone in the channel";
         channel.id = "channelmention";
         users.push(channel);
@@ -189,11 +189,11 @@ module.exports = React.createClass({
             if (this.alreadyMentioned(users[i].username)) continue;
 
             var firstName = "", lastName = "";
-            if (users[i].full_name.length > 0) {
-                var splitName = users[i].full_name.split(' ');
+            if (users[i].nickname.length > 0) {
+                var splitName = users[i].nickname.split(' ');
                 firstName = splitName[0].toLowerCase();
                 lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
-                users[i].secondary_text = users[i].full_name;
+                users[i].secondary_text = users[i].nickname;
             }
 
             if (firstName.lastIndexOf(mentionText,0) === 0
-- 
cgit v1.2.3-1-g7c22


From 079538d9e7d22cd8d5f782f4f7434858bd80d914 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Mon, 13 Jul 2015 15:39:53 -0400
Subject: Use User.FirstName for notifications instead of trying to determine
 it from User.Nickname

---
 web/react/components/mention_list.jsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index c04e28849..524f1b337 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -188,21 +188,13 @@ module.exports = React.createClass({
         for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
             if (this.alreadyMentioned(users[i].username)) continue;
 
-            var firstName = "", lastName = "";
-            if (users[i].nickname.length > 0) {
-                var splitName = users[i].nickname.split(' ');
-                firstName = splitName[0].toLowerCase();
-                lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
-                users[i].secondary_text = users[i].nickname;
-            }
-
-            if (firstName.lastIndexOf(mentionText,0) === 0
-                    || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
+            if (users[i].first_name.lastIndexOf(mentionText,0) === 0
+                    || users[i].last_name.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
                 mentions[index] = (
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
-                        secondary_text={users[i].secondary_text}
+                        secondary_text={users[i].first_name + " " + users[i].last_name}
                         id={users[i].id}
                         listId={index}
                         isFocused={this.state.selectedMention === index ? "mentions-focus" : ""}
-- 
cgit v1.2.3-1-g7c22


From 876ad10f6f14579336a89c36b4937311326149d4 Mon Sep 17 00:00:00 2001
From: =Corey Hulen <corey@hulen.com>
Date: Fri, 17 Jul 2015 15:41:55 -0800
Subject: Fixes javascript console errors

---
 web/react/components/mention_list.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 524f1b337..7e939812d 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -188,8 +188,8 @@ module.exports = React.createClass({
         for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) {
             if (this.alreadyMentioned(users[i].username)) continue;
 
-            if (users[i].first_name.lastIndexOf(mentionText,0) === 0
-                    || users[i].last_name.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
+            if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText,0) === 0)
+                    || (users[i].last_name && users[i].last_name.lastIndexOf(mentionText,0) === 0) || users[i].username.lastIndexOf(mentionText,0) === 0) {
                 mentions[index] = (
                     <Mention
                         ref={'mention' + index}
-- 
cgit v1.2.3-1-g7c22


From d0e4d71ac39bfdbe6d714c6693d3d803bfa811a2 Mon Sep 17 00:00:00 2001
From: hmhealey <harrisonmhealey@gmail.com>
Date: Sat, 18 Jul 2015 16:32:22 -0400
Subject: Fixed the labels on the mention list for users without their
 first/last name configured

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

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

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 7e939812d..71a6083d2 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -7,6 +7,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Mention = require('./mention.jsx');
 
 var Constants = require('../utils/constants.jsx');
+var Utils = require('../utils/utils.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 var MAX_HEIGHT_LIST = 292;
@@ -194,7 +195,7 @@ module.exports = React.createClass({
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
-                        secondary_text={users[i].first_name + " " + users[i].last_name}
+                        secondary_text={Utils.getFullName(users[i])}
                         id={users[i].id}
                         listId={index}
                         isFocused={this.state.selectedMention === index ? "mentions-focus" : ""}
-- 
cgit v1.2.3-1-g7c22

