PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

fix editing visuals on groupview header

Browse source
This commit is contained in:
Matthew Hodgson 2017-10-18 17:32:46 +01:00
parent 9160b70e12
commit 1087b36597
1 changed files with 30 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/components/structures/GroupView.js
View file

@ -490,15 +490,15 @@ export default React.createClass({
}); });
}, },
_onNameChange: function(e) { _onNameChange: function(value) {
const newProfileForm = Object.assign(this.state.profileForm, { name: e.target.value }); const newProfileForm = Object.assign(this.state.profileForm, { name: value });
this.setState({ this.setState({
profileForm: newProfileForm, profileForm: newProfileForm,
}); });
}, },
_onShortDescChange: function(e) { _onShortDescChange: function(value) {
const newProfileForm = Object.assign(this.state.profileForm, { short_description: e.target.value }); const newProfileForm = Object.assign(this.state.profileForm, { short_description: value });
this.setState({ this.setState({
profileForm: newProfileForm, profileForm: newProfileForm,
}); });
@ -878,18 +878,29 @@ export default React.createClass({
</div> </div>
</div> </div>
); );
nameNode = <input type="text"
value={this.state.profileForm.name} const EditableText = sdk.getComponent("elements.EditableText");
onChange={this._onNameChange}
placeholder={_t('Group Name')} nameNode = <EditableText ref="nameEditor"
className="mx_GroupView_editable"
placeholderClassName="mx_GroupView_placeholder"
placeholder={_t("Group Name")}
blurToCancel={false}
initialValue={this.state.profileForm.name}
onValueChanged={this._onNameChange}
tabIndex="1" tabIndex="1"
/>; dir="auto" />;
shortDescNode = <input type="text"
value={this.state.profileForm.short_description} shortDescNode = <EditableText ref="descriptionEditor"
onChange={this._onShortDescChange} className="mx_GroupView_editable"
placeholder={_t('Description')} placeholderClassName="mx_GroupView_placeholder"
placeholder={_t("Description")}
blurToCancel={false}
initialValue={this.state.profileForm.short_description}
onValueChanged={this._onShortDescChange}
tabIndex="2" tabIndex="2"
/>; dir="auto" />
rightButtons.push( rightButtons.push(
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onSaveClick} key="_saveButton" onClick={this._onSaveClick} key="_saveButton"
@ -911,17 +922,17 @@ export default React.createClass({
width={48} height={48} width={48} height={48}
/>; />;
if (summary.profile && summary.profile.name) { if (summary.profile && summary.profile.name) {
nameNode = <div> nameNode = <div onClick={this._onEditClick}>
<span>{ summary.profile.name }</span> <span>{ summary.profile.name }</span>
<span className="mx_GroupView_header_groupid"> <span className="mx_GroupView_header_groupid">
({ this.props.groupId }) ({ this.props.groupId })
</span> </span>
</div>; </div>;
} else { } else {
nameNode = <span>{ this.props.groupId }</span>; nameNode = <span onClick={this._onEditClick}>{ this.props.groupId }</span>;
} }
if (summary.profile && summary.profile.short_description) { if (summary.profile && summary.profile.short_description) {
shortDescNode = <span>{ summary.profile.short_description }</span>; shortDescNode = <span onClick={this._onEditClick}>{ summary.profile.short_description }</span>;
} }
rightButtons.push( rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" <AccessibleButton className="mx_GroupHeader_button"