split up css, update class names

This commit is contained in:
Bruno Windels 2019-08-06 16:31:21 +02:00
parent 341fdcd761
commit 505846ce53
5 changed files with 89 additions and 65 deletions

View file

@ -206,7 +206,7 @@ export default class BasicMessageEditor extends React.Component {
if (this.state.autoComplete) {
const query = this.state.query;
const queryLen = query.length;
autoComplete = <div className="mx_MessageEditor_AutoCompleteWrapper">
autoComplete = (<div className="mx_BasicMessageComposer_AutoCompleteWrapper">
<Autocomplete
ref={ref => this._autocompleteRef = ref}
query={query}
@ -215,18 +215,18 @@ export default class BasicMessageEditor extends React.Component {
selection={{beginning: true, end: queryLen, start: queryLen}}
room={this.props.room}
/>
</div>;
</div>);
}
return <div className={this.props.className}>
{ autoComplete }
<div
className="mx_MessageEditor_editor"
contentEditable="true"
tabIndex="1"
onKeyDown={this._onKeyDown}
ref={ref => this._editorRef = ref}
aria-label={_t("Edit message")}
></div>
</div>;
return (<div className="mx_BasicMessageComposer">
{ autoComplete }
<div
className="mx_BasicMessageComposer_input"
contentEditable="true"
tabIndex="1"
onKeyDown={this._onKeyDown}
ref={ref => this._editorRef = ref}
aria-label={_t("Edit message")}
></div>
</div>);
}
}

View file

@ -249,17 +249,17 @@ export default class EditMessageComposer extends React.Component {
render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return <div className={classNames("mx_MessageEditor", this.props.className)} onKeyDown={this._onKeyDown}>
<BasicMessageComposer
ref={this._setEditorRef}
model={this.model}
room={this._getRoom()}
initialCaret={this.props.editState.getCaret()}
/>
<div className="mx_MessageEditor_buttons">
<AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
<AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
</div>
</div>;
return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>
<BasicMessageComposer
ref={this._setEditorRef}
model={this.model}
room={this._getRoom()}
initialCaret={this.props.editState.getCaret()}
/>
<div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
<AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
</div>
</div>);
}
}