Merge remote-tracking branch 'origin/develop' into dbkr/show_invited_email

src/Modal.js

@@ -35,36 +35,13 @@ module.exports = {
         return container;
     },
 
-    createDialogWithElement: function(element, props, className) {
-        var self = this;
-
-        var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
-            if (props && props.onFinished) props.onFinished.apply(null, arguments);
-        };
-
-        var dialog = (
-            <div className={"mx_Dialog_wrapper " + className}>
-                <div className="mx_Dialog">
-                    {element}
-                </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
-            </div>
-        );
-
-        ReactDOM.render(dialog, this.getOrCreateContainer());
-
-        return {close: closeDialog};
-    },
-
     createDialog: function (Element, props, className) {
         var self = this;
 
+        // never call this via modal.close() from onFinished() otherwise it will loop
         var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
+            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
         };
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
@@ -74,7 +51,7 @@ module.exports = {
                 <div className="mx_Dialog">
                     <Element {...props} onFinished={closeDialog}/>
                 </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+                <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>
         );
 

src/Notifier.js

@@ -205,7 +205,6 @@ var Notifier = {
     },
 
     onSyncStateChange: function(state) {
-        console.log("sync state change: " + state);
         if (state === "PREPARED" || state === "SYNCING") {
             this.isPrepared = true;
         }

src/TabComplete.js

@@ -83,10 +83,39 @@ class TabComplete {
         this._notifyStateChange();
     }
 
-    startTabCompleting() {
+    startTabCompleting(passive) {
+        this.originalText = this.textArea.value; // cache starting text
+
+        // grab the partial word from the text which we'll be tab-completing
+        var res = MATCH_REGEX.exec(this.originalText);
+        if (!res) {
+            this.matchedList = [];
+            return;
+        }
+        // ES6 destructuring; ignore first element (the complete match)
+        var [ , boundaryGroup, partialGroup] = res;
+
+        if (partialGroup.length === 0 && passive) {
+            return;
+        }
+
+        this.isFirstWord = partialGroup.length === this.originalText.length;
+
         this.completing = true;
         this.currentIndex = 0;
-        this._calculateCompletions();
+
+        this.matchedList = [
+            new Entry(partialGroup) // first entry is always the original partial
+        ];
+
+        // find matching entries in the set of entries given to us
+        this.list.forEach((entry) => {
+            if (entry.text.toLowerCase().indexOf(partialGroup.toLowerCase()) === 0) {
+                this.matchedList.push(entry);
+            }
+        });
+
+        // console.log("calculated completions => %s", JSON.stringify(this.matchedList));
     }
 
     /**
@@ -137,7 +166,7 @@ class TabComplete {
         this.inPassiveMode = passive;
 
         if (!this.completing) {
-            this.startTabCompleting();
+            this.startTabCompleting(passive);
         }
 
         if (shiftKey) {
@@ -270,33 +299,6 @@ class TabComplete {
         });
     }
 
-    _calculateCompletions() {
-        this.originalText = this.textArea.value; // cache starting text
-
-        // grab the partial word from the text which we'll be tab-completing
-        var res = MATCH_REGEX.exec(this.originalText);
-        if (!res) {
-            this.matchedList = [];
-            return;
-        }
-        // ES6 destructuring; ignore first element (the complete match)
-        var [ , boundaryGroup, partialGroup] = res;
-        this.isFirstWord = partialGroup.length === this.originalText.length;
-
-        this.matchedList = [
-            new Entry(partialGroup) // first entry is always the original partial
-        ];
-
-        // find matching entries in the set of entries given to us
-        this.list.forEach((entry) => {
-            if (entry.text.toLowerCase().indexOf(partialGroup.toLowerCase()) === 0) {
-                this.matchedList.push(entry);
-            }
-        });
-
-        // console.log("_calculateCompletions => %s", JSON.stringify(this.matchedList));
-    }
-
     _notifyStateChange() {
         if (this.opts.onStateChange) {
             this.opts.onStateChange(this.completing);

src/TextForEvent.js

@@ -55,13 +55,13 @@ function textForMemberEvent(ev) {
                 } else if (!ev.getPrevContent().displayname && ev.getContent().displayname) {
                     return ev.getSender() + " set their display name to " + ev.getContent().displayname;
                 } else if (ev.getPrevContent().displayname && !ev.getContent().displayname) {
-                    return ev.getSender() + " removed their display name";
+                    return ev.getSender() + " removed their display name (" + ev.getPrevContent().displayname + ")";
                 } else if (ev.getPrevContent().avatar_url && !ev.getContent().avatar_url) {
-                    return ev.getSender() + " removed their profile picture";
+                    return senderName + " removed their profile picture";
                 } else if (ev.getPrevContent().avatar_url && ev.getContent().avatar_url && ev.getPrevContent().avatar_url != ev.getContent().avatar_url) {
-                    return ev.getSender() + " changed their profile picture";
+                    return senderName + " changed their profile picture";
                 } else if (!ev.getPrevContent().avatar_url && ev.getContent().avatar_url) {
-                    return ev.getSender() + " set a profile picture";
+                    return senderName + " set a profile picture";
                 }
             } else {
                 if (!ev.target) console.warn("Join message has no target! -- " + ev.getContent().state_key);

src/components/structures/RoomView.js

@@ -525,16 +525,22 @@ module.exports = React.createClass({
                     var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
                     var dialog_defer = q.defer();
                     var dialog_ref;
-                    var modal;
+                    Modal.createDialog(SetDisplayNameDialog, {
-                    var dialog_instance = <SetDisplayNameDialog currentDisplayName={result.displayname} ref={(r) => {
+                        currentDisplayName: result.displayname,
+                        ref: (r) => {
                             dialog_ref = r;
-                    }} onFinished={() => {
+                        },
-                        cli.setDisplayName(dialog_ref.getValue()).done(() => {
+                        onFinished: (submitted) => {
-                            dialog_defer.resolve();
+                            if (submitted) {
-                        });
+                                cli.setDisplayName(dialog_ref.getValue()).done(() => {
-                        modal.close();
+                                    dialog_defer.resolve();
-                    }} />
+                                });
-                    modal = Modal.createDialogWithElement(dialog_instance);
+                            }
+                            else {
+                                dialog_defer.reject();
+                            }
+                        }
+                    });
                     return dialog_defer.promise;
                 }
             });
@@ -565,6 +571,8 @@ module.exports = React.createClass({
                 joining: false,
                 joinError: error
             });
+
+            if (!error) return;
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
@@ -1118,6 +1126,7 @@ module.exports = React.createClass({
                                                 spinner={this.state.joining}
                                                 inviterName={inviterName}
                                                 invitedEmail={invitedEmail}
+                                                room={this.state.room}
                                 />
                             </div>
                             <div className="mx_RoomView_messagePanel"></div>
@@ -1159,6 +1168,7 @@ module.exports = React.createClass({
                                             inviterName={ inviterName }
                                             canJoin={ true } canPreview={ false }
                                             spinner={this.state.joining}
+                                            room={this.state.room}                                            
                             />
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
@@ -1238,6 +1248,7 @@ module.exports = React.createClass({
                                 inviterName={inviterName}
                                 invitedEmail={invitedEmail}
                                 canPreview={this.state.canPeek}
+                                room={this.state.room}                                
                 />
             );
         }

src/components/structures/ScrollPanel.js

@@ -19,7 +19,7 @@ var ReactDOM = require("react-dom");
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var q = require("q");
 
-var DEBUG_SCROLL = false;
+var DEBUG_SCROLL = true;
 
 if (DEBUG_SCROLL) {
     // using bind means that we get to keep useful line numbers in the console

src/components/structures/UserSettings.js

@@ -126,9 +126,7 @@ module.exports = React.createClass({
 
     onLogoutClicked: function(ev) {
         var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
-        this.logoutModal = Modal.createDialog(
+        this.logoutModal = Modal.createDialog(LogoutPrompt);
-            LogoutPrompt, {onCancel: this.onLogoutPromptCancel}
-        );
     },
 
     onPasswordChangeError: function(err) {
@@ -162,10 +160,6 @@ module.exports = React.createClass({
         });
     },
 
-    onLogoutPromptCancel: function() {
-        this.logoutModal.closeDialog();
-    },
-
     onEnableNotificationsChange: function(event) {
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },

src/components/views/dialogs/ErrorDialog.js

@@ -31,6 +31,10 @@ module.exports = React.createClass({
     displayName: 'ErrorDialog',
     propTypes: {
         title: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,

src/components/views/dialogs/QuestionDialog.js

@@ -20,7 +20,10 @@ module.exports = React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
         title: React.PropTypes.string,
-        description: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
         onFinished: React.PropTypes.func.isRequired,

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -54,7 +54,7 @@ module.exports = React.createClass({
 
     onFormSubmit: function(ev) {
         ev.preventDefault();
-        this.props.onFinished();
+        this.props.onFinished(true);
         return false;
     },
 

src/components/views/dialogs/TextInputDialog.js

@@ -20,7 +20,10 @@ module.exports = React.createClass({
     displayName: 'TextInputDialog',
     propTypes: {
         title: React.PropTypes.string,
-        description: React.PropTypes.string,
+        description: React.PropTypes.oneOfType([
+            React.PropTypes.element,
+            React.PropTypes.string,
+        ]),
         value: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,

src/components/views/rooms/EventTile.js

@@ -268,10 +268,17 @@ module.exports = React.createClass({
         this.readAvatarNode = ReactDom.findDOMNode(node);
     },
 
-    onMemberAvatarClicked: function(sender) {
+    onMemberAvatarClick: function(event) {
         dispatcher.dispatch({
             action: 'view_user',
-            member: sender
+            member: this.props.mxEvent.sender,
+        });
+    },
+
+    onSenderProfileClick: function(event) {
+        dispatcher.dispatch({
+            action: 'insert_displayname',
+            displayname: this.props.mxEvent.sender.name,
         });
     },
 
@@ -318,12 +325,12 @@ module.exports = React.createClass({
                 avatar = (
                     <div className="mx_EventTile_avatar">
                         <MemberAvatar member={this.props.mxEvent.sender} width={24} height={24}
-                         onClick={ this.onMemberAvatarClicked.bind(this, this.props.mxEvent.sender) } />
+                         onClick={ this.onMemberAvatarClick } />
                     </div>
                 );
             }
             if (EventTileType.needsSenderProfile()) {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} aux={aux} />;
+                sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} aux={aux} />;
             }
         }
         return (

src/components/views/rooms/MemberList.js

@@ -217,11 +217,8 @@ module.exports = React.createClass({
         console.log(
             "Invite %s to %s - isEmail=%s", inputText, this.props.roomId, isEmailAddress
         );
-        promise.done(function(res) {
+        promise.then(function(res) {
             console.log("Invited %s", inputText);
-            self.setState({
-                inviting: false
-            });
         }, function(err) {
             if (err !== null) {
                 console.error("Failed to invite: %s", JSON.stringify(err));
@@ -230,9 +227,17 @@ module.exports = React.createClass({
                     description: err.message
                 });
             }
+        }).finally(function() {
             self.setState({
                 inviting: false
             });
+            // XXX: hacky focus on the invite box
+            setTimeout(function() {
+                var inviteBox = document.getElementById("mx_SearchableEntityList_query");
+                if (inviteBox) {
+                    inviteBox.focus();
+                }
+            }, 0);
         });
     },
 

src/components/views/rooms/MessageComposer.js

@@ -192,9 +192,29 @@ module.exports = React.createClass({
     },
 
     onAction: function(payload) {
+        var textarea = this.refs.textarea;
         switch (payload.action) {
             case 'focus_composer':
-                this.refs.textarea.focus();
+                textarea.focus();
+                break;
+            case 'insert_displayname':
+                if (textarea.value.length) {
+                    var left = textarea.value.substring(0, textarea.selectionStart);
+                    var right = textarea.value.substring(textarea.selectionEnd);
+                    if (right.length) {
+                        left += payload.displayname;
+                    }
+                    else {
+                        left = left.replace(/( ?)$/, " " + payload.displayname);
+                    }
+                    textarea.value = left + right;
+                    textarea.focus();
+                    textarea.setSelectionRange(left.length, left.length);
+                }
+                else {
+                    textarea.value = payload.displayname + ": ";
+                    textarea.focus();
+                }
                 break;
         }
     },
@@ -497,7 +517,7 @@ module.exports = React.createClass({
                         <MemberAvatar member={me} width={24} height={24} />
                     </div>
                     <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
-                        <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
+                        <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
                         <TintableSvg src="img/upload.svg" width="19" height="24"/>

src/components/views/rooms/RoomPreviewBar.js

@@ -36,6 +36,7 @@ module.exports = React.createClass({
         canJoin: React.PropTypes.bool,
         canPreview: React.PropTypes.bool,
         spinner: React.PropTypes.bool,
+        room: React.PropTypes.object,
     },
 
     getDefaultProps: function() {
@@ -110,10 +111,13 @@ module.exports = React.createClass({
 
         }
         else if (this.props.canJoin) {
+            var name = this.props.room ? this.props.room.name : "";
+            name = name ? <b>{ name }</b> : "a room";
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        Would you like to <a onClick={ this.props.onJoinClick }>join</a> this room?
+                        You are trying to access { name }.<br/>
+                        Would you like to <a onClick={ this.props.onJoinClick }>join</a> in order to participate in the discussion?
                     </div>
                 </div>
             );