Merge branch 'develop' into luke/groups-are-communities

src/components/structures/RoomStatusBar.js

@@ -43,6 +43,10 @@ module.exports = React.createClass({
         // the end of the live timeline.
         atEndOfLiveTimeline: React.PropTypes.bool,
 
+        // This is true when the user is alone in the room, but has also sent a message.
+        // Used to suggest to the user to invite someone
+        sentMessageAndIsAlone: React.PropTypes.bool,
+
         // true if there is an active call in this room (means we show
         // the 'Active Call' text in the status bar if there is nothing
         // more interesting)
@@ -60,6 +64,14 @@ module.exports = React.createClass({
         // 'unsent messages' bar
         onCancelAllClick: React.PropTypes.func,
 
+        // callback for when the user clicks on the 'invite others' button in the
+        // 'you are alone' bar
+        onInviteClick: React.PropTypes.func,
+
+        // callback for when the user clicks on the 'stop warning me' button in the
+        // 'you are alone' bar
+        onStopWarningClick: React.PropTypes.func,
+
         // callback for when the user clicks on the 'scroll to bottom' button
         onScrollToBottomClick: React.PropTypes.func,
 
@@ -140,7 +152,8 @@ module.exports = React.createClass({
             (this.state.usersTyping.length > 0) ||
             this.props.numUnreadMessages ||
             !this.props.atEndOfLiveTimeline ||
-            this.props.hasActiveCall
+            this.props.hasActiveCall ||
+            this.props.sentMessageAndIsAlone
         ) {
             return STATUS_BAR_EXPANDED;
         } else if (this.props.unsentMessageError) {
@@ -305,6 +318,21 @@ module.exports = React.createClass({
             );
         }
 
+        // If you're alone in the room, and have sent a message, suggest to invite someone
+        if (this.props.sentMessageAndIsAlone) {
+            return (
+                <div className="mx_RoomStatusBar_isAlone">
+                    { _tJsx("There's no one else here! Would you like to <a>invite others</a> or <a>stop warning about the empty room</a>?",
+                        [/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/],
+                        [
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="invite" onClick={this.props.onInviteClick}>{ sub }</a>,
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="nowarn" onClick={this.props.onStopWarningClick}>{ sub }</a>,
+                        ],
+                    ) }
+                </div>
+            );
+        }
+
         return null;
     },
 

src/components/structures/RoomView.js

@@ -117,6 +117,7 @@ module.exports = React.createClass({
             guestsCanJoin: false,
             canPeek: false,
             showApps: false,
+            isAlone: false,
             isPeeking: false,
 
             // error object, as from the matrix client/server API
@@ -461,6 +462,8 @@ module.exports = React.createClass({
         switch (payload.action) {
             case 'message_send_failed':
             case 'message_sent':
+                this._checkIfAlone(this.state.room);
+                // no break; to intentionally fall through
             case 'message_send_cancelled':
                 this.setState({
                     unsentMessageError: this._getUnsentMessageError(this.state.room),
@@ -740,6 +743,20 @@ module.exports = React.createClass({
         }
     }, 500),
 
+    _checkIfAlone: function(room) {
+        let warnedAboutLonelyRoom = false;
+        if (localStorage) {
+            warnedAboutLonelyRoom = localStorage.getItem('mx_user_alone_warned_' + this.state.room.roomId);
+        }
+        if (warnedAboutLonelyRoom) {
+            if (this.state.isAlone) this.setState({isAlone: false});
+            return;
+        }
+
+        const joinedMembers = room.currentState.getMembers().filter(m => m.membership === "join" || m.membership === "invite");
+        this.setState({isAlone: joinedMembers.length === 1});
+    },
+
     _getUnsentMessageError: function(room) {
         const unsentMessages = this._getUnsentMessages(room);
         if (!unsentMessages.length) return "";
@@ -821,6 +838,22 @@ module.exports = React.createClass({
         Resend.cancelUnsentEvents(this.state.room);
     },
 
+    onInviteButtonClick: function() {
+        // call AddressPickerDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.state.room.roomId,
+        });
+        this.setState({isAlone: false}); // there's a good chance they'll invite someone
+    },
+
+    onStopAloneWarningClick: function() {
+        if (localStorage) {
+            localStorage.setItem('mx_user_alone_warned_' + this.state.room.roomId, true);
+        }
+        this.setState({isAlone: false});
+    },
+
     onJoinButtonClicked: function(ev) {
         const cli = MatrixClientPeg.get();
 
@@ -1144,6 +1177,10 @@ module.exports = React.createClass({
         return ret;
     },
 
+    onPinnedClick: function() {
+        this.setState({showingPinned: !this.state.showingPinned, searching: false});
+    },
+
     onSettingsClick: function() {
         this.showSettings(true);
     },
@@ -1263,7 +1300,7 @@ module.exports = React.createClass({
     },
 
     onSearchClick: function() {
-        this.setState({ searching: true });
+        this.setState({ searching: true, showingPinned: false });
     },
 
     onCancelSearchClick: function() {
@@ -1462,6 +1499,7 @@ module.exports = React.createClass({
         const RoomSettings = sdk.getComponent("rooms.RoomSettings");
         const AuxPanel = sdk.getComponent("rooms.AuxPanel");
         const SearchBar = sdk.getComponent("rooms.SearchBar");
+        const PinnedEventsPanel = sdk.getComponent("rooms.PinnedEventsPanel");
         const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const RoomPreviewBar = sdk.getComponent("rooms.RoomPreviewBar");
@@ -1581,9 +1619,12 @@ module.exports = React.createClass({
                 numUnreadMessages={this.state.numUnreadMessages}
                 unsentMessageError={this.state.unsentMessageError}
                 atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
+                sentMessageAndIsAlone={this.state.isAlone}
                 hasActiveCall={inCall}
                 onResendAllClick={this.onResendAllClick}
                 onCancelAllClick={this.onCancelAllClick}
+                onInviteClick={this.onInviteButtonClick}
+                onStopWarningClick={this.onStopAloneWarningClick}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
@@ -1603,6 +1644,9 @@ module.exports = React.createClass({
         } else if (this.state.searching) {
             hideCancel = true; // has own cancel
             aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress} onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch} />;
+        } else if (this.state.showingPinned) {
+            hideCancel = true; // has own cancel
+            aux = <PinnedEventsPanel room={this.state.room} onCancelClick={this.onPinnedClick} />;
         } else if (!myMember || myMember.membership !== "join") {
             // We do have a room object for this room, but we're not currently in it.
             // We may have a 3rd party invite to it.
@@ -1776,6 +1820,7 @@ module.exports = React.createClass({
                     collapsedRhs={this.props.collapsedRhs}
                     onSearchClick={this.onSearchClick}
                     onSettingsClick={this.onSettingsClick}
+                    onPinnedClick={this.onPinnedClick}
                     onSaveClick={this.onSettingsSaveClick}
                     onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
                     onForgetClick={(myMember && myMember.membership === "leave") ? this.onForgetClick : null}

src/components/structures/UserSettings.js

@@ -114,6 +114,10 @@ const SETTINGS_LABELS = [
         id: 'Pill.shouldHidePillAvatar',
         label: _td('Hide avatars in user and room mentions'),
     },
+    {
+        id: 'TextualBody.disableBigEmoji',
+        label: _td('Disable big emoji in chat'),
+    },
 /*
     {
         id: 'useFixedWidthFont',
@@ -423,6 +427,11 @@ module.exports = React.createClass({
         });
     },
 
+    onAvatarRemoveClick: function() {
+        MatrixClientPeg.get().setAvatarUrl(null);
+        this.setState({avatarUrl: null}); // the avatar update will complete async for us
+    },
+
     onLogoutClicked: function(ev) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
@@ -1318,7 +1327,11 @@ module.exports = React.createClass({
                     </div>
 
                     <div className="mx_UserSettings_avatarPicker">
-                        <div onClick={this.onAvatarPickerClick}>
+                        <div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
+                            <img src="img/cancel.svg" width="15" height="15"
+                                 alt={_t("Remove avatar")} title={_t("Remove avatar")} />
+                        </div>
+                        <div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">
                             <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
                                 showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
                         </div>