Merge pull request #352 from matrix-org/wmwragg/mention-state-indicator

Now showing three dots when hovering over the badge
This commit is contained in:
Matthew Hodgson 2016-07-19 11:12:42 +01:00 committed by GitHub
commit c1fd2f888f

View file

@ -43,7 +43,10 @@ module.exports = React.createClass({
}, },
getInitialState: function() { getInitialState: function() {
return( { hover : false }); return({
hover : false,
badgeHover : false,
});
}, },
onClick: function() { onClick: function() {
@ -61,6 +64,14 @@ module.exports = React.createClass({
this.setState( { hover : false }); this.setState( { hover : false });
}, },
badgeOnMouseEnter: function() {
this.setState( { badgeHover : true } );
},
badgeOnMouseLeave: function() {
this.setState( { badgeHover : false } );
},
render: function() { render: function() {
var myUserId = MatrixClientPeg.get().credentials.userId; var myUserId = MatrixClientPeg.get().credentials.userId;
var me = this.props.room.currentState.members[myUserId]; var me = this.props.room.currentState.members[myUserId];
@ -83,8 +94,14 @@ module.exports = React.createClass({
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
var badge; var badge;
var badgeContent;
if (this.props.highlight || notificationCount > 0) { if (this.props.highlight || notificationCount > 0) {
badge = <div className="mx_RoomTile_badge">{ notificationCount ? notificationCount : '!' }</div>; if (this.state.badgeHover) {
badgeContent = "\u00B7 \u00B7 \u00B7";
} else {
badgeContent = notificationCount ? notificationCount : '!';
}
badge = <div className="mx_RoomTile_badge" onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>;
} }
/* /*
if (this.props.highlight) { if (this.props.highlight) {