IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-08-26 21:27:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Highlighting now occurs as you arrow key thru mention list. However some small bugs remain.

Browse Source
This commit is contained in:
Reed Garmsen
2015-07-16 08:10:18 -07:00
parent 59b2a42ac8
commit 9cc3d34285
2 changed files with 31 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/react/components/mention.jsx
+3 -25
View File
@@ -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>
web/react/components/mention_list.jsx
+28 -29
View File
@@ -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 });
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
if (!self.getSelection(self.state.selectedMention)) {
self.setState({ selectedMention: 0 });
self.refs['mention' + self.state.selectedMention].deselect();
}
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 });
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 });
}
}
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;