From fe71f69f0afff80643242551469266ca1dc357a9 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 20 Jul 2015 16:31:11 -0700
Subject: [PATCH] rename EditableText's placeHolder parameter to be 'label' to
 avoid colliding with the HTML5 placeholder parameter

---
 skins/base/css/molecules/MemberTile.css      | 19 +++++++++++
 skins/base/views/atoms/EditableText.js       |  5 +--
 skins/base/views/molecules/MemberTile.js     |  3 +-
 skins/base/views/organisms/MemberList.js     | 36 ++++++++++++++++----
 skins/base/views/organisms/UserSettings.js   |  2 +-
 src/controllers/atoms/EditableText.js        |  5 ++-
 src/controllers/molecules/MessageComposer.js |  4 +--
 src/controllers/organisms/MemberList.js      |  2 +-
 8 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index 2f735f624b..af78ce06b8 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@@ -17,6 +17,7 @@ limitations under the License.
 .mx_MemberTile {
     cursor: pointer;
     display: table-row;
+    height: 49px;
 }
 
 .mx_MemberTile_avatar {
@@ -36,6 +37,24 @@ limitations under the License.
     background-color: #dbdbdb;
 }
 
+.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
+    display: none;
+}
+
+.mx_MemberTile_inviteEditing .mx_MemberTile_name {
+    position: absolute;
+    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;
+}
+
 .mx_MemberTile_power {
     z-index: 10;
     position: absolute;
diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js
index a450874468..38aa5c8d87 100644
--- a/skins/base/views/atoms/EditableText.js
+++ b/skins/base/views/atoms/EditableText.js
@@ -33,6 +33,7 @@ module.exports = React.createClass({
     },
 
     onClickDiv: function() {
+        console.log("onClickDiv triggered");
         this.setState({
             phase: this.Phases.Edit,
         })
@@ -57,12 +58,12 @@ module.exports = React.createClass({
             if (this.state.value) {
                 editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
             } else {
-                editable_el = <div ref="display_div" onClick={this.onClickDiv}><i>{this.props.placeHolder}</i></div>;
+                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.props.label}</div>;
             }
         } else if (this.state.phase == this.Phases.Edit) {
             editable_el = (
                 <div>
-                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} autoFocus/>
+                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} placeholder={this.props.placeHolder} autoFocus/>
                 </div>
             );
         }
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index 1286173d38..8dd3f00ab1 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -59,8 +59,7 @@ module.exports = React.createClass({
         mainClassName += presenceClass;
 
         return (
-            <div className={mainClassName} onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }
-            >
+            <div className={mainClassName} onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
                 <div className="mx_MemberTile_avatar">
                     <img className="mx_MemberTile_avatarImg"
                          src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 40, 40, "crop") : null }
diff --git a/skins/base/views/organisms/MemberList.js b/skins/base/views/organisms/MemberList.js
index 3e586e569c..dfeecb0350 100644
--- a/skins/base/views/organisms/MemberList.js
+++ b/skins/base/views/organisms/MemberList.js
@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var classNames = require('classnames');
 
 var MemberListController = require("../../../../src/controllers/organisms/MemberList");
 
@@ -30,6 +31,10 @@ module.exports = React.createClass({
     displayName: 'MemberList',
     mixins: [MemberListController],
 
+    getInitialState: function() {
+        return { editing: false };
+    },
+
     // FIXME: combine this more nicely with the MemberInfo positioning stuff...
     onMemberListScroll: function(ev) {
         if (this.refs.memberListScroll) {
@@ -55,23 +60,40 @@ module.exports = React.createClass({
     onPopulateInvite: function(inputText, shouldSubmit) {
         // reset back to placeholder
         this.refs.invite.setValue("Invite", false, true);
+        this.setState({ editing: false });
         if (!shouldSubmit) {
             return; // enter key wasn't pressed
         }
         this.onInvite(inputText);
     },
 
+    onClickInvite: function(ev) {
+        this.setState({ editing: true });
+        this.refs.invite.onClickDiv();
+        console.log("forcing update on memberlist after having clicked invite");
+        ev.stopPropagation();
+        ev.preventDefault();
+    },
+
     inviteTile: function() {
-        if (this.state.inviting) {
-            return (
-                <div></div>
-            );
-        }
+        // if (this.state.inviting) {
+        //     return (
+        //         <div></div>
+        //     );
+        // }
+
+        var classes = classNames({
+            mx_MemberTile: true,
+            mx_MemberTile_inviteEditing: this.state.editing,
+        });
+
+        console.log("rendering inviteTile, with phase as " + (this.refs.invite ? this.refs.invite.state.phase : "unknown"));
+
         return (
-            <div className="mx_MemberTile">
+            <div className={ classes } onClick={ this.onClickInvite } >
                 <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>            
                 <div className="mx_MemberTile_name">
-                    <EditableText ref="invite" placeHolder="Invite" onValueChanged={this.onPopulateInvite}/>
+                    <EditableText ref="invite" label="Invite" placeHolder="@user:domain.com" initialValue="" onValueChanged={this.onPopulateInvite}/>
                 </div>
             </div>
         );
diff --git a/skins/base/views/organisms/UserSettings.js b/skins/base/views/organisms/UserSettings.js
index 9afa3c0360..7a57ec768e 100644
--- a/skins/base/views/organisms/UserSettings.js
+++ b/skins/base/views/organisms/UserSettings.js
@@ -73,7 +73,7 @@ module.exports = React.createClass({
                                 </div>
 
                                 <div className="mx_UserSettings_DisplayName">
-                                    <EditableText ref="displayname" initialValue={this.state.displayName} placeHolder="Click to set display name." onValueChanged={this.changeDisplayname}/>
+                                    <EditableText ref="displayname" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.changeDisplayname}/>
                                     <div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>Edit</div>
                                 </div>
 
diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js
index 15ee58a7f3..5ea4ce8c4a 100644
--- a/src/controllers/atoms/EditableText.js
+++ b/src/controllers/atoms/EditableText.js
@@ -22,6 +22,7 @@ module.exports = {
     propTypes: {
         onValueChanged: React.PropTypes.func,
         initialValue: React.PropTypes.string,
+        label: React.PropTypes.string,
         placeHolder: React.PropTypes.string,
     },
 
@@ -34,7 +35,8 @@ module.exports = {
         return {
             onValueChanged: function() {},
             initialValue: '',
-            placeHolder: 'Click to set',
+            label: 'Click to set',
+            placeholder: '',
         };
     },
 
@@ -77,6 +79,7 @@ module.exports = {
         this.setState({
             phase: this.Phases.Display,
         });
+        this.onValueChanged(false);
     },
 
     onValueChanged: function(shouldSubmit) {
diff --git a/src/controllers/molecules/MessageComposer.js b/src/controllers/molecules/MessageComposer.js
index a9de008d6f..2ece5636ad 100644
--- a/src/controllers/molecules/MessageComposer.js
+++ b/src/controllers/molecules/MessageComposer.js
@@ -200,7 +200,7 @@ module.exports = {
                 }, function(err) {
                     console.error("Command failure: %s", err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Server Error",
+                        title: "Server error",
                         description: err.message
                     });
                 });
@@ -208,7 +208,7 @@ module.exports = {
             else if (cmd.error) {
                 console.error(cmd.error);
                 Modal.createDialog(ErrorDialog, {
-                    title: "Command Error",
+                    title: "Command error",
                     description: cmd.error
                 });
             }
diff --git a/src/controllers/organisms/MemberList.js b/src/controllers/organisms/MemberList.js
index 0695270066..29d4f20a60 100644
--- a/src/controllers/organisms/MemberList.js
+++ b/src/controllers/organisms/MemberList.js
@@ -101,7 +101,7 @@ module.exports = {
         }, function(err) {
             console.error("Failed to invite: %s", JSON.stringify(err));
             Modal.createDialog(ErrorDialog, {
-                title: "Invite Server Error",
+                title: "Server error whilst inviting",
                 description: err.message
             });
             self.setState({