quick implementation of all new MemberInfo

src/skins/vector/css/molecules/MemberInfo.css

@@ -14,3 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MemberInfo {
+    height: 100%;
+}
+
+.mx_MemberInfo_cancel {
+    float: right;
+}

src/skins/vector/css/organisms/RightPanel.css

@@ -78,7 +78,8 @@ limitations under the License.
     padding-top: 2px;
 }
 
-.mx_RightPanel .mx_MemberList {
+.mx_RightPanel .mx_MemberList,
+.mx_RightPanel .mx_MemberInfo {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;

src/skins/vector/views/molecules/MemberInfo.js

@@ -19,46 +19,66 @@ limitations under the License.
 var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var sdk = require('matrix-react-sdk')
+var dis = require('matrix-react-sdk/lib/dispatcher');
 var MemberInfoController = require('matrix-react-sdk/lib/controllers/molecules/MemberInfo')
 
+// FIXME: this should probably be an organism, to match with MemberList, not a molecule
+
 module.exports = React.createClass({
     displayName: 'MemberInfo',
     mixins: [MemberInfoController],
 
+    onCancel: function(e) {
+        dis.dispatch({
+            action: "view_user",
+            member: null
+        });
+    },
+
     render: function() {
         var interactButton, kickButton, banButton, muteButton, giveModButton;
         if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
-            interactButton = <div className="mx_ContextualMenu_field" onClick={this.onLeaveClick}>Leave room</div>;
+            interactButton = <div className="mx_MemberInfo_field" onClick={this.onLeaveClick}>Leave room</div>;
         }
         else {
-            interactButton = <div className="mx_ContextualMenu_field" onClick={this.onChatClick}>Start chat</div>;
+            interactButton = <div className="mx_MemberInfo_field" onClick={this.onChatClick}>Start chat</div>;
         }
 
         if (this.state.can.kick) {
-            kickButton = <div className="mx_ContextualMenu_field" onClick={this.onKick}>
+            kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
                 Kick
             </div>;
         }
         if (this.state.can.ban) {
-            banButton = <div className="mx_ContextualMenu_field" onClick={this.onBan}>
+            banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}>
                 Ban
             </div>;
         }
         if (this.state.can.mute) {
             var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <div className="mx_ContextualMenu_field" onClick={this.onMuteToggle}>
+            muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
                 {muteLabel}
             </div>;
         }
         if (this.state.can.modifyLevel) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Mod" : "Make Mod";
-            giveModButton = <div className="mx_ContextualMenu_field" onClick={this.onModToggle}>
+            giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
             </div>
         }
 
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
         return (
-            <div>
+            <div className="mx_MemberInfo">
+                <img className="mx_MemberInfo_cancel" src="img/cancel.png" width="18" height="18" onClick={this.onCancel}/>
+                <div className="mx_MemberInfo_avatar">
+                    <MemberAvatar member={this.props.member} width={48} height={48} />
+                </div>
+                <h2>{ this.props.member.name }</h2>
+                <div className="mx_MemberInfo_profileField">
+                    { this.props.member.userId }
+                </div>
                 {interactButton}
                 {muteButton}
                 {kickButton}

src/skins/vector/views/molecules/MemberTile.js

@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk')
-var ContextualMenu = require('../../../../ContextualMenu');
+var dis = require('matrix-react-sdk/lib/dispatcher');
 var MemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MemberTile')
 
 // The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
@@ -58,16 +58,9 @@ module.exports = React.createClass({
     },
 
     onClick: function(e) {
-        var self = this;
+        dis.dispatch({
-        self.setState({ 'menu': true });
+            action: 'view_user',
-        var MemberInfo = sdk.getComponent('molecules.MemberInfo');
+            member: this.props.member,
-        ContextualMenu.createMenu(MemberInfo, {
-            member: self.props.member,
-            right: window.innerWidth - e.pageX,
-            top: e.pageY,
-            onFinished: function() {
-                self.setState({ 'menu': false });
-            }
         });
     },
 
@@ -134,7 +127,7 @@ module.exports = React.createClass({
             }
         }
         mainClassName += presenceClass;
-        if (this.state.hover || this.state.menu) {
+        if (this.state.hover) {
             mainClassName += " mx_MemberTile_hover";
         }
 
@@ -148,7 +141,7 @@ module.exports = React.createClass({
         }
 
         var nameEl;
-        if (this.state.hover || this.state.menu) {
+        if (this.state.hover) {
             var presence;
             // FIXME: make presence data update whenever User.presence changes...
             var active = this.props.member.user ? ((Date.now() - (this.props.member.user.lastPresenceTs - this.props.member.user.lastActiveAgo)) || -1) : -1;

src/skins/vector/views/organisms/RightPanel.js

@@ -27,14 +27,17 @@ module.exports = React.createClass({
     Phase : {
         MemberList: 'MemberList',
         FileList: 'FileList',
+        MemberInfo: 'MemberInfo',
     },
 
     componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
         var cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
     },
 
     componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);        
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
@@ -67,6 +70,22 @@ module.exports = React.createClass({
         }
     },
 
+    onAction: function(payload) {
+        if (payload.action === "view_user") {
+            if (payload.member) {
+                this.setState({
+                    phase: this.Phase.MemberInfo,
+                    member: payload.member,
+                });
+            }
+            else {
+                this.setState({
+                    phase: this.Phase.MemberList
+                });
+            }
+        }
+    },
+
     render: function() {
         var MemberList = sdk.getComponent('organisms.MemberList');
         var buttonGroup;
@@ -75,7 +94,7 @@ module.exports = React.createClass({
         var filesHighlight;
         var membersHighlight;
         if (!this.props.collapsed) {
-            if (this.state.phase == this.Phase.MemberList) {
+            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                 membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
             else if (this.state.phase == this.Phase.FileList) {
@@ -84,7 +103,7 @@ module.exports = React.createClass({
         }
 
         var membersBadge;
-        if (this.state.phase == this.Phase.MemberList && this.props.roomId) {
+        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
             var cli = MatrixClientPeg.get();
             var room = cli.getRoom(this.props.roomId);
             if (room) {
@@ -106,9 +125,16 @@ module.exports = React.createClass({
                         </div>
                     </div>;
 
-            if (!this.props.collapsed && this.state.phase == this.Phase.MemberList) {
+            if (!this.props.collapsed) {
+                if(this.state.phase == this.Phase.MemberList) {
                     panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
                 }
+                else if(this.state.phase == this.Phase.MemberInfo) {
+                    var MemberInfo = sdk.getComponent('molecules.MemberInfo');
+                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
+                }
+            }
+
         }
 
         var classes = "mx_RightPanel";