Merge branch 'develop' into travis/granular-settings

src/components/structures/GroupView.js

@@ -407,6 +407,10 @@ export default React.createClass({
     getInitialState: function() {
         return {
             summary: null,
+            isGroupPublicised: null,
+            isUserPrivileged: null,
+            groupRooms: null,
+            groupRoomsLoading: null,
             error: null,
             editing: false,
             saving: false,
@@ -458,8 +462,14 @@ export default React.createClass({
             }
             this.setState({
                 summary,
+                summaryLoading: !this._groupStore.isStateReady(GroupStore.STATE_KEY.Summary),
                 isGroupPublicised: this._groupStore.getGroupPublicity(),
                 isUserPrivileged: this._groupStore.isUserPrivileged(),
+                groupRooms: this._groupStore.getGroupRooms(),
+                groupRoomsLoading: !this._groupStore.isStateReady(GroupStore.STATE_KEY.GroupRooms),
+                isUserMember: this._groupStore.getGroupMembers().some(
+                    (m) => m.userId === MatrixClientPeg.get().credentials.userId,
+                ),
                 error: null,
             });
         });
@@ -650,6 +660,7 @@ export default React.createClass({
         const RoomDetailList = sdk.getComponent('rooms.RoomDetailList');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const Spinner = sdk.getComponent('elements.Spinner');
 
         const addRoomRow = this.state.editing ?
             (<AccessibleButton className="mx_GroupView_rooms_header_addRow"
@@ -667,7 +678,10 @@ export default React.createClass({
                 <h3>{ _t('Rooms') }</h3>
                 { addRoomRow }
             </div>
-            <RoomDetailList rooms={this._groupStore.getGroupRooms()} />
+            { this.state.groupRoomsLoading ?
+                <Spinner /> :
+                <RoomDetailList rooms={this.state.groupRooms} />
+            }
         </div>;
     },
 
@@ -863,7 +877,7 @@ export default React.createClass({
         const Spinner = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        if (this.state.summary === null && this.state.error === null || this.state.saving) {
+        if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
         } else if (this.state.summary) {
             const summary = this.state.summary;
@@ -884,6 +898,7 @@ export default React.createClass({
                 } else {
                     const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
                     avatarImage = <GroupAvatar groupId={this.props.groupId}
+                        groupName={this.state.profileForm.name}
                         groupAvatarUrl={this.state.profileForm.avatar_url}
                         width={48} height={48} resizeMethod='crop'
                     />;
@@ -927,25 +942,28 @@ export default React.createClass({
                      tabIndex="2"
                      dir="auto" />;
             } else {
+                const onGroupHeaderItemClick = this.state.isUserMember ? this._onEditClick : null;
                 const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
+                const groupName = summary.profile ? summary.profile.name : null;
                 avatarNode = <GroupAvatar
                     groupId={this.props.groupId}
                     groupAvatarUrl={groupAvatarUrl}
-                    onClick={this._onEditClick}
+                    groupName={groupName}
+                    onClick={onGroupHeaderItemClick}
                     width={48} height={48}
                 />;
                 if (summary.profile && summary.profile.name) {
-                    nameNode = <div onClick={this._onEditClick}>
+                    nameNode = <div onClick={onGroupHeaderItemClick}>
                         <span>{ summary.profile.name }</span>
                         <span className="mx_GroupView_header_groupid">
                             ({ this.props.groupId })
                         </span>
                     </div>;
                 } else {
-                    nameNode = <span onClick={this._onEditClick}>{ this.props.groupId }</span>;
+                    nameNode = <span onClick={onGroupHeaderItemClick}>{ this.props.groupId }</span>;
                 }
                 if (summary.profile && summary.profile.short_description) {
-                    shortDescNode = <span onClick={this._onEditClick}>{ summary.profile.short_description }</span>;
+                    shortDescNode = <span onClick={onGroupHeaderItemClick}>{ summary.profile.short_description }</span>;
                 }
             }
             if (this.state.editing) {
@@ -986,6 +1004,7 @@ export default React.createClass({
             const headerClasses = {
                 mx_GroupView_header: true,
                 mx_GroupView_header_view: !this.state.editing,
+                mx_GroupView_header_isUserMember: this.state.isUserMember,
             };
 
             return (

src/components/structures/MyGroups.js

@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 import {MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../index';
 import { _t, _tJsx } from '../../languageHandler';
 import withMatrixClient from '../../wrappers/withMatrixClient';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import dis from '../../dispatcher';
-import PropTypes from 'prop-types';
 import Modal from '../../Modal';
 
 import FlairStore from '../../stores/FlairStore';
@@ -115,18 +116,17 @@ export default withMatrixClient(React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let content;
+        let contentHeader;
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
                 groupNodes.push(<GroupTile groupId={g} />);
             });
+            contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <div>
-                    <h3>{ _t('Your Communities') }</h3>
-                    <div className="mx_MyGroups_joinedGroups">
-                        { groupNodes }
-                    </div>
-                </div> :
+                <GeminiScrollbar className="mx_MyGroups_joinedGroups">
+                    { groupNodes }
+                </GeminiScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",
@@ -176,6 +176,7 @@ export default withMatrixClient(React.createClass({
                 </div>
             </div>
             <div className="mx_MyGroups_content">
+                { contentHeader }
                 { content }
             </div>
         </div>;

src/components/structures/RoomView.js

@@ -43,8 +43,6 @@ const Rooms = require('../../Rooms');
 
 import KeyCode from '../../KeyCode';
 
-import UserProvider from '../../autocomplete/UserProvider';
-
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
 import SettingsStore from "../../settings/SettingsStore";
@@ -539,12 +537,6 @@ module.exports = React.createClass({
                 });
             }
         }
-
-        // update the tab complete list as it depends on who most recently spoke,
-        // and that has probably just changed
-        if (ev.sender) {
-            UserProvider.getInstance().onUserSpoke(ev.sender);
-        }
     },
 
     onRoomName: function(room) {
@@ -566,7 +558,6 @@ module.exports = React.createClass({
         this._warnAboutEncryption(room);
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
-        UserProvider.getInstance().setUserListFromRoom(room);
     },
 
     _warnAboutEncryption: function(room) {
@@ -690,9 +681,6 @@ module.exports = React.createClass({
         // refresh the conf call notification state
         this._updateConfCallNotification();
 
-        // refresh the tab complete list
-        UserProvider.getInstance().setUserListFromRoom(this.state.room);
-
         // if we are now a member of the room, where we were not before, that
         // means we have finished joining a room we were previously peeking
         // into.

src/components/structures/login/ForgotPassword.js

@@ -166,7 +166,7 @@ module.exports = React.createClass({
         } else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
                 <div>
-                    { _t('An email has been sent to') } { this.state.email }. { _t("Once you've followed the link it contains, click below") }.
+                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.", { emailAddress: this.state.email }) }
                     <br />
                     <input className="mx_Login_submit" type="button" onClick={this.onVerify}
                         value={_t('I have verified my email address')} />