diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-12 12:34:51 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-07-16 08:10:18 -0700 |
commit | ce9756e44dcdc1dedb46337f492f4ede8719fdd8 (patch) | |
tree | aeee6c8d169274a37965a1f7a9c6b0313691e49c /web/react | |
parent | 9cc3d3428521fbc3a31def4f4780275d763a4011 (diff) | |
download | chat-ce9756e44dcdc1dedb46337f492f4ede8719fdd8.tar.gz chat-ce9756e44dcdc1dedb46337f492f4ede8719fdd8.tar.bz2 chat-ce9756e44dcdc1dedb46337f492f4ede8719fdd8.zip |
Improved selection logic when using both the mouse and arrow keys
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/mention.jsx | 3 | ||||
-rw-r--r-- | web/react/components/mention_list.jsx | 23 |
2 files changed, 23 insertions, 3 deletions
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> 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++; |