rename EditableText's placeHolder parameter to be 'label' to avoid colliding with the HTML5 placeholder parameter

This commit is contained in:
Matthew Hodgson 2015-07-20 16:31:11 -07:00
parent e0673eee29
commit fe71f69f0a
8 changed files with 60 additions and 16 deletions

View File

@ -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;

View File

@ -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>
);
}

View File

@ -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 }

View File

@ -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) {
// 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></div>
);
}
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>
);

View File

@ -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>

View File

@ -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) {

View File

@ -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
});
}

View File

@ -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({