Merge pull request #2764 from matrix-org/travis/fix-hover

Fix sticky hover state by listening for hover on the document

res/css/views/rooms/_EntityTile.scss

@@ -28,6 +28,14 @@ limitations under the License.
     padding-right: 30px;
 }
 
+.mx_EntityTile .mx_PresenceLabel {
+    display: none;
+}
+
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
+    display: block;
+}
+
 .mx_EntityTile_invite {
     display: table-cell;
     vertical-align: middle;
@@ -67,7 +75,7 @@ limitations under the License.
     overflow: hidden;
 }
 
-.mx_EntityTile_name_hover {
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
     font-size: 13px;
 }
 
@@ -83,24 +91,20 @@ limitations under the License.
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
 .mx_EntityTile_unavailable .mx_EntityTile_name,
-.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
 .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
 .mx_EntityTile_offline_beenactive .mx_EntityTile_name,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover
 {
     opacity: 0.5;
 }
 
 .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
 .mx_EntityTile_offline_neveractive .mx_EntityTile_name,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }
 
 .mx_EntityTile_unknown .mx_EntityTile_avatar,
 .mx_EntityTile_unknown .mx_EntityTile_name,
-.mx_EntityTile_unknown .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }

src/components/views/rooms/EntityTile.js

@@ -19,11 +19,10 @@ limitations under the License.
 
 const React = require('react');
 import PropTypes from 'prop-types';
-
-const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
+import classNames from "classnames";
 
 
 const PRESENCE_CLASS = {
@@ -97,45 +96,39 @@ const EntityTile = React.createClass({
         return this.props.shouldComponentUpdate(nextProps, nextState);
     },
 
-    mouseEnter: function(e) {
-        this.setState({ 'hover': true });
-    },
-
-    mouseLeave: function(e) {
-        this.setState({ 'hover': false });
-    },
-
     render: function() {
+        const mainClassNames = {
+            "mx_EntityTile": true,
+            "mx_EntityTile_noHover": this.props.suppressOnHover,
+        };
+        if (this.props.className) mainClassNames[this.props.className] = true;
+
         const presenceClass = presenceClassForMember(
             this.props.presenceState, this.props.presenceLastActiveAgo, this.props.showPresence,
         );
+        mainClassNames[presenceClass] = true;
 
-        let mainClassName = "mx_EntityTile ";
-        mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : "");
         let nameEl;
         const {name} = this.props;
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
-        if (this.state.hover && !this.props.suppressOnHover) {
+        if (!this.props.suppressOnHover) {
             const activeAgo = this.props.presenceLastActiveAgo ?
                 (Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)) : -1;
 
-            mainClassName += " mx_EntityTile_hover";
             const PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
             let presenceLabel = null;
-            let nameClasses = 'mx_EntityTile_name';
             if (this.props.showPresence) {
                 presenceLabel = <PresenceLabel activeAgo={activeAgo}
                     currentlyActive={this.props.presenceCurrentlyActive}
                     presenceState={this.props.presenceState} />;
-                nameClasses += ' mx_EntityTile_name_hover';
             }
             if (this.props.subtextLabel) {
                 presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <EmojiText element="div" className={nameClasses} dir="auto">
+                    <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
                         { name }
                     </EmojiText>
                     {presenceLabel}
@@ -183,17 +176,19 @@ const EntityTile = React.createClass({
 
         const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
+        // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
-            <AccessibleButton className={mainClassName} title={this.props.title}
-                    onClick={this.props.onClick} onMouseEnter={this.mouseEnter}
-                    onMouseLeave={this.mouseLeave}>
-                <div className="mx_EntityTile_avatar">
-                    { av }
-                    { power }
-                </div>
-                { nameEl }
-                { inviteButton }
-            </AccessibleButton>
+            <div ref={(c) => this.container = c} >
+                <AccessibleButton className={classNames(mainClassNames)} title={this.props.title}
+                                  onClick={this.props.onClick}>
+                    <div className="mx_EntityTile_avatar">
+                        { av }
+                        { power }
+                    </div>
+                    { nameEl }
+                    { inviteButton }
+                </AccessibleButton>
+            </div>
         );
     },
 });