sort out the membership list

src/skins/vector/css/molecules/EventTile.css

@@ -91,7 +91,7 @@ limitations under the License.
 }
 
 .mx_EventTile_editButton {
-    clear: both;
+    clear: right;
     float: right;
     display: inline-block;
     visibility: hidden;

src/skins/vector/css/molecules/MemberTile.css

@@ -16,48 +16,22 @@ limitations under the License.
 
 .mx_MemberTile {
     display: table-row;
-    height: 49px;
     position: relative;
+    color: #454545;
 }
 
 .mx_MemberTile_avatar {
     display: table-cell;
-    padding-left: 14px;
+    padding-left: 3px;
     padding-right: 12px;
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-top: 2px;
+    padding-bottom: 0px;
     vertical-align: middle;
     width: 36px;
     height: 36px;
     position: relative;
 }
 
-.mx_MemberTile_inviteTile {
-    cursor: pointer;
-}
-
-.mx_MemberTile_inviteEditing {
-    display: initial ! important;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
-    display: none;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_name {
-    width: 200px;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_name input {
-    border-radius: 3px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 14px;
-    padding: 9px;
-    margin-top: 6px;
-    margin-left: 14px;
-}
-
 .mx_MemberTile_power {
     position: absolute;
     width: 44px;
@@ -79,20 +53,18 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_MemberTile_hover {
-    background-color: #f0f0f0;
-    font-size: 12px;
-    color: #747474;    
-}
-
 .mx_MemberTile_userId {
-    font-weight: bold;
+    font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_leave {
-    cursor: pointer;
+.mx_MemberTile_presence {
+    font-size: 12px;
+    opacity: 0.5;
+}
+
+.mx_MemberTile_chevron {
     margin-top: 8px;
     margin-right: -4px;
     margin-left: 6px;
@@ -113,14 +85,14 @@ limitations under the License.
 
 .mx_MemberTile_unavailable .mx_MemberTile_avatar,
 .mx_MemberTile_unavailable .mx_MemberTile_name,
-.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
+.mx_MemberTile_unavailable .mx_MemberTile_userId
 {
     opacity: 0.66;
 }
 
 .mx_MemberTile_offline .mx_MemberTile_avatar,
 .mx_MemberTile_offline .mx_MemberTile_name,
-.mx_MemberTile_offline .mx_MemberTile_nameSpan
+.mx_MemberTile_offline .mx_MemberTile_userId
 {
     opacity: 0.25;
 }

src/skins/vector/css/molecules/RoomHeader.css

@@ -20,7 +20,7 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 960px;
     margin: auto;
-    height: 88px;
+    height: 83px;
     border-bottom: 1px solid #eeeeee;
 
     display: -webkit-box;
@@ -89,7 +89,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 88px;
+    line-height: 83px;
     color: #76cfa6;
     font-weight: 400;
     font-size: 20px;

src/skins/vector/css/organisms/MemberList.css

@@ -44,12 +44,40 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
+.mx_MemberList_invite {
+    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    padding: 9px;
+    color: #454545;
+    margin-left: 3px;
+    font-size: 16px;
+    margin-bottom: 6px;
+    width: 180px;
+}
+
+.mx_MemberList_invite::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+.mx_MessageList_invite::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_MemberList_invited h2 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 14px;
+    padding-left: 3px;
+    padding-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 4px;    
+}
+
 .mx_MemberList_wrapper {
     display: table;
     table-layout: fixed;
     width: 100%;
 }
-
-.mx_MemberList h2 {
-    margin: 14px;
-}

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

@@ -33,29 +33,36 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 66px;
-    flex: 0 0 66px;    
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 18px;
-    height: 48px;
+    margin-top: 32px;
     float: left;
     background-color: #fff;
-    margin-right: 22px;
+    margin-left: 3px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
-    height: 48px;
     display: table-cell;
     vertical-align: middle;    
     padding-left: 8px;
     padding-right: 8px;
 }
 
+.mx_RightPanel_headerButton_highlight {
+    position: relative;
+    bottom: 0px;
+    left: -4px;
+    width: 25px;
+    height: 4px;
+    background-color: #76cfa6;
+}
+
 .mx_RightPanel .mx_MemberList {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;

src/skins/vector/css/organisms/RoomList.css

@@ -20,7 +20,6 @@ limitations under the License.
 
 .mx_RoomList_invites,
 .mx_RoomList_recents {
-    margin-top: -12px;
     display: table;
     table-layout: fixed;
     width: 100%;
@@ -40,4 +39,6 @@ limitations under the License.
     font-size: 14px;
     padding-left: 12px;
     padding-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 4px;
 }

src/skins/vector/css/organisms/RoomView.css

@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 88px;
-    flex: 0 0 88px;
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
 }
 
 .mx_RoomView_fileDropTarget {

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

@@ -119,10 +119,10 @@ module.exports = React.createClass({
         var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId;
 
         var power;
-        if (this.props.member && this.props.member.powerLevelNorm > 0) {
-            var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
-            power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
-        }
+        // if (this.props.member && this.props.member.powerLevelNorm > 0) {
+        //     var img = "img/p/p" + Math.floor(20 * this.props.member.powerLevelNorm / 100) + ".png";
+        //     power = <img src={ img } className="mx_MemberTile_power" width="44" height="44" alt=""/>;
+        // }
         var presenceClass = "mx_MemberTile_offline";
         var mainClassName = "mx_MemberTile ";
         if (this.props.member.user) {
@@ -140,7 +140,7 @@ module.exports = React.createClass({
 
         var name = this.props.member.name;
         // if (isMyUser) name += " (me)"; // this does nothing other than introduce line wrapping and pain
-        var leave = isMyUser ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null;
+        //var leave = isMyUser ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null;
 
         var nameClass = "mx_MemberTile_name";
         if (zalgo.test(name)) {
@@ -161,8 +161,8 @@ module.exports = React.createClass({
 
             nameEl =
                 <div className="mx_MemberTile_details">
-                    { leave }
-                    <div className="mx_MemberTile_userId">{ this.props.member.userId }</div>
+                    <img className="mx_MemberTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
+                    <div className="mx_MemberTile_userId">{ name }</div>
                     { presence }
                 </div>
         }

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

@@ -89,25 +89,13 @@ module.exports = React.createClass({
     },
 
     inviteTile: function() {
-        var classes = classNames({
-            mx_MemberTile: true,
-            mx_MemberTile_inviteTile: true,
-            mx_MemberTile_inviteEditing: this.state.editing,
-        });
-
-        var EditableText = sdk.getComponent("atoms.EditableText");
         if (this.state.inviting) {
             return (
                 <Loader />
             );
         } else {
             return (
-                <div className={ classes } onClick={ this.onClickInvite } >
-                    <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="36" height="36" alt=""/></div>
-                    <div className="mx_MemberTile_name">
-                        <EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
-                    </div>
-                </div>
+                <input className="mx_MemberList_invite" ref="invite" placeholder="Invite another user" onSubmit={this.onPopulateInvite}/>
             );
         }
     },
@@ -117,7 +105,7 @@ module.exports = React.createClass({
         var invitedMemberTiles = this.makeMemberTiles('invite');
         if (invitedMemberTiles.length > 0) {
             invitedSection = (
-                <div>
+                <div className="mx_MemberList_invited">
                     <h2>Invited</h2>
                     <div className="mx_MemberList_wrapper">
                         {invitedMemberTiles}
@@ -128,13 +116,13 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberList">
                 <div className="mx_MemberList_border">
+                    {this.inviteTile()}
                     <div>
                         <div className="mx_MemberList_wrapper">
                             {this.makeMemberTiles('join')}
                         </div>
                     </div>
                     {invitedSection}
-                    {this.inviteTile()}
                 </div>
             </div>
         );

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

@@ -53,14 +53,27 @@ module.exports = React.createClass({
         var buttonGroup;
         var panel;
 
+        var filesHighlight;
+        var membersHighlight;
+        if (!this.props.collapsed) {
+            if (this.state.phase == this.Phase.MemberList) {
+                membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
+            else if (this.state.phase == this.Phase.FileList) {
+                filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
+        }
+
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
                             <img src="img/file.png" width="17" height="22" title="Files" alt="Files"/>
+                            { filesHighlight }
                         </div>
                         <div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
                             <img src="img/members.png" width="17" height="22" title="Members" alt="Members"/>
+                            { membersHighlight }
                         </div>
                     </div>;