one big commit, sorry

changing looks of input & buttons
changing background color of right panels
moving invite button around
change margins and paddings in memberlist

src/components/structures/RightPanel.js

@@ -53,6 +53,10 @@ class HeaderButton extends React.Component {
             mx_RightPanel_headerButton: true,
             mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
         })
+        // will probably use this later on for notifications, etc ...
+        /* <div className="mx_RightPanel_headerButton_badge">
+            { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
+        </div> */
 
         return <AccessibleButton
             aria-label={this.props.title}
@@ -60,10 +64,7 @@ class HeaderButton extends React.Component {
             title={this.props.title}
             className={classes}
             onClick={this.onClick} >
-                <div className="mx_RightPanel_headerButton_badge">
-                    { this.props.badge ? this.props.badge : <span>&nbsp;</span> }
-                </div>
-                <TintableSvg src={this.props.iconSrc} width="25" height="25" />
+                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
             </AccessibleButton>;
     }
 }
@@ -161,19 +162,6 @@ module.exports = React.createClass({
         });
     },
 
-    onInviteButtonClick: function() {
-        if (this.context.matrixClient.isGuest()) {
-            dis.dispatch({action: 'require_registration'});
-            return;
-        }
-
-        // call AddressPickerDialog
-        dis.dispatch({
-            action: 'view_invite',
-            roomId: this.props.roomId,
-        });
-    },
-
     onInviteToGroupButtonClick: function() {
         showGroupInviteDialog(this.props.groupId).then(() => {
             this.setState({
@@ -279,29 +267,6 @@ module.exports = React.createClass({
 
         let membersBadge;
         let membersTitle = _t('Members');
-        if ((this.state.phase === this.Phase.RoomMemberList || this.state.phase === this.Phase.RoomMemberInfo)
-            && this.props.roomId
-        ) {
-            const cli = this.context.matrixClient;
-            const room = cli.getRoom(this.props.roomId);
-            let isUserInRoom;
-            if (room) {
-                const numMembers = room.getJoinedMemberCount();
-                membersTitle = _t('%(count)s Members', { count: numMembers });
-                membersBadge = <div title={membersTitle}>{ formatCount(numMembers) }</div>;
-                isUserInRoom = room.hasMembershipState(this.context.matrixClient.credentials.userId, 'join');
-            }
-
-            if (isUserInRoom) {
-                inviteGroup =
-                    <AccessibleButton className="mx_RightPanel_invite" onClick={this.onInviteButtonClick}>
-                        <div className="mx_RightPanel_icon" >
-                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
-                        </div>
-                        <div className="mx_RightPanel_message">{ _t('Invite to this room') }</div>
-                    </AccessibleButton>;
-            }
-        }
 
         const isPhaseGroup = [
             this.Phase.GroupMemberInfo,
@@ -418,9 +383,6 @@ module.exports = React.createClass({
                     </div>
                 </div>
                 { panel }
-                <div className="mx_RightPanel_footer">
-                    { inviteGroup }
-                </div>
             </aside>
         );
     },

src/components/views/rooms/MemberList.js

@@ -19,6 +19,7 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import dis from '../../../dispatcher';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
 const rate_limited_func = require('../../../ratelimitedfunc');
@@ -420,42 +421,68 @@ module.exports = React.createClass({
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
-        let invitedSection = null;
-        if (this._getChildCountInvited() > 0) {
-            invitedSection = (
-                <div className="mx_MemberList_invited">
-                    <h2>{ _t("Invited") }</h2>
-                    <div className="mx_MemberList_wrapper">
-                        <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtInvited}
-                                createOverflowElement={this._createOverflowTileInvited}
-                                getChildren={this._getChildrenInvited}
-                                getChildCount={this._getChildCountInvited}
-                        />
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.roomId);
+        let inviteButton;
+        if (room.getMyMembership() === 'join') {
+            const TintableSvg = sdk.getComponent("elements.TintableSvg");
+            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+            inviteButton =
+                <AccessibleButton className="mx_MemberList_invite" onClick={this.onInviteButtonClick}>
+                    <div className="mx_MemberList_inviteIcon" >
+                        <TintableSvg src="img/icon-invite-people.svg" width="16" height="16" />
                     </div>
-                </div>
-            );
+                    <div>{ _t('Invite to this room') }</div>
+                </AccessibleButton>;
         }
 
-        const inputBox = (
+        let invitedHeader;
+        let invitedSection;
+        if (this._getChildCountInvited() > 0) {
+            invitedHeader = <h2>{ _t("Invited") }</h2>;
+            invitedSection = <TruncatedList className="mx_MemberList_section mx_MemberList_invited" truncateAt={this.state.truncateAtInvited}
+                        createOverflowElement={this._createOverflowTileInvited}
+                        getChildren={this._getChildrenInvited}
+                        getChildCount={this._getChildCountInvited}
+                />;
+        }
+
+        const filterAndButtons = (
             <form autoComplete="off">
-                <input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
+                <input className="mx_MemberList_query" id="mx_MemberList_query" type="search"
                         onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
                         placeholder={_t('Filter room members')} />
+                { inviteButton }
             </form>
         );
 
         return (
             <div className="mx_MemberList">
-                { inputBox }
-                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
-                    <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
+                { filterAndButtons }
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
+                    <div className="mx_MemberList_wrapper">
+                        <TruncatedList className="mx_MemberList_section mx_MemberList_joined" truncateAt={this.state.truncateAtJoined}
                             createOverflowElement={this._createOverflowTileJoined}
                             getChildren={this._getChildrenJoined}
-                            getChildCount={this._getChildCountJoined}
-                    />
-                    { invitedSection }
+                            getChildCount={this._getChildCountJoined} />
+                        { invitedHeader }
+                        { invitedSection }
+                    </div>
                 </GeminiScrollbarWrapper>
             </div>
         );
     },
+
+    onInviteButtonClick: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            dis.dispatch({action: 'require_registration'});
+            return;
+        }
+
+        // call AddressPickerDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.roomId,
+        });
+    },
 });

src/components/views/rooms/RoomHeader.js

@@ -396,7 +396,7 @@ module.exports = React.createClass({
         let rightPanelButtons;
         if (this.props.collapsedRhs) {
             rightPanelButtons =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
+                <AccessibleButton className="mx_RoomHeader_button mx_RoomHeader_showPanel" onClick={this.onShowRhsClick} title={_t('Show panel')}>
                     <TintableSvg src="img/maximise.svg" width="10" height="16" />
                 </AccessibleButton>;
         }