From bb06484732a30dd6fedf9419836b3438926f9738 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 20 Jul 2015 08:24:38 -0700
Subject: [PATCH] fix up MemberInfo behaviour

---
 skins/base/css/molecules/MemberInfo.css  | 14 ++++++++++++--
 skins/base/views/molecules/MemberInfo.js | 11 +++++++++++
 skins/base/views/organisms/MemberList.js | 14 +++++++++++++-
 skins/base/views/organisms/RoomView.js   |  2 +-
 skins/base/views/templates/Register.js   |  2 +-
 5 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/skins/base/css/molecules/MemberInfo.css b/skins/base/css/molecules/MemberInfo.css
index 32442305..db41c51e 100644
--- a/skins/base/css/molecules/MemberInfo.css
+++ b/skins/base/css/molecules/MemberInfo.css
@@ -22,7 +22,7 @@ limitations under the License.
     position: absolute;
     width: 200px;
     margin-left: -295px;
-    margin-top: -12px;
+    margin-top: 0px;
     z-index: 1000;
     padding: 6px;
 }
@@ -34,6 +34,17 @@ limitations under the License.
     top: 0px;
 }
 
+/*
+ * a hacky shim to extend the hitmask of the overlay to overlap
+ * better with the main menu itself
+ */
+.mx_MemberInfo_shim {
+    position: absolute;
+    left: 212px;
+    width: 40px;
+    height: 100%;
+}
+
 .mx_MemberInfo_avatar {
     padding: 6px;
 }
@@ -44,7 +55,6 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     padding: 6px;
-    font-weight: bold;
 }
 
 .mx_MemberInfo_button {
diff --git a/skins/base/views/molecules/MemberInfo.js b/skins/base/views/molecules/MemberInfo.js
index d8559dbb..3a81185b 100644
--- a/skins/base/views/molecules/MemberInfo.js
+++ b/skins/base/views/molecules/MemberInfo.js
@@ -25,6 +25,16 @@ module.exports = React.createClass({
     displayName: 'MemberInfo',
     mixins: [MemberInfoController],
 
+    componentDidMount: function() {
+        var self = this;
+
+        var memberInfo = this.getDOMNode();
+        var memberListScroll = document.getElementsByClassName("mx_MemberList_border")[0];
+        if (memberListScroll) {
+            memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
+        }
+    },
+
     getDuration: function(time) {
         if (!time) return;
         var t = parseInt(time / 1000);
@@ -61,6 +71,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberInfo">
                 <img className="mx_MemberInfo_chevron" src="img/chevron-right.png" width="9" height="16" />
+                <div className="mx_MemberInfo_shim"></div>
                 <div className="mx_MemberInfo_avatar">
                     <img className="mx_MemberInfo_avatarImg"
                          src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 128, 128, "crop") : null }
diff --git a/skins/base/views/organisms/MemberList.js b/skins/base/views/organisms/MemberList.js
index 9283a928..a08a03c3 100644
--- a/skins/base/views/organisms/MemberList.js
+++ b/skins/base/views/organisms/MemberList.js
@@ -30,6 +30,18 @@ module.exports = React.createClass({
     displayName: 'MemberList',
     mixins: [MemberListController],
 
+    // FIXME: combine this more nicely with the MemberInfo positioning stuff...
+    onMemberListScroll: function(ev) {
+        if (this.refs.memberListScroll) {
+            var memberListScroll = this.refs.memberListScroll.getDOMNode();
+            // offset the current MemberInfo bubble
+            var memberInfo = document.getElementsByClassName("mx_MemberInfo")[0];
+            if (memberInfo) {
+                memberInfo.style.top = (memberInfo.parentElement.offsetTop - memberListScroll.scrollTop) + "px";
+            }
+        }
+    },
+
     makeMemberTiles: function() {
         var self = this;
         return Object.keys(self.state.memberDict).map(function(userId) {
@@ -71,7 +83,7 @@ module.exports = React.createClass({
                 <div className="mx_MemberList_chevron">
                     <img src="img/chevron.png" width="24" height="13"/>
                 </div>
-                <div className="mx_MemberList_border">
+                <div className="mx_MemberList_border" ref="memberListScroll" onScroll={ this.onMemberListScroll }>
                     <h2>Members</h2>
                     <div className="mx_MemberList_wrapper">
                         {this.makeMemberTiles()}
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index a93937f0..9130dcc0 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -109,7 +109,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomView_auxPanel">
                         <CallView room={this.state.room}/>
                     </div>
-                    <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}>
+                    <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
                         <div className="mx_RoomView_messageListWrapper">
                             <div className="mx_RoomView_MessageList" aria-live="polite">
                                 <div className={scrollheader_classes}>
diff --git a/skins/base/views/templates/Register.js b/skins/base/views/templates/Register.js
index 346b40f8..784db4cf 100644
--- a/skins/base/views/templates/Register.js
+++ b/skins/base/views/templates/Register.js
@@ -182,7 +182,7 @@ module.exports = React.createClass({
             <div className="mx_Login">
                 <div className="mx_Login_box">
                     <div className="mx_Login_logo">
-                        <img  src="img/logo.png" width="249" height="76" alt="vector"/>
+                        <img src="img/logo.png" width="249" height="76" alt="vector"/>
                     </div>
                     {this.registerContent()}
                 </div>