Clarify non-e2e vs. e2e /w composers placeholder

For E2E rooms, display "Send an encrypted message…" otherwise display "Send a plaintext message…" as the placeholder for the input box in [old] message composer.
This commit is contained in:
Luke Barnard 2017-02-21 15:33:44 +00:00
parent 05d242cb5c
commit fd146a732b
3 changed files with 11 additions and 4 deletions

View file

@ -223,8 +223,8 @@ export default class MessageComposer extends React.Component {
);
let e2eImg, e2eTitle, e2eClass;
if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
if (roomIsEncrypted) {
// FIXME: show a /!\ if there are untrusted devices in the room...
e2eImg = 'img/e2e-verified.svg';
e2eTitle = 'Encrypted room';
@ -286,12 +286,16 @@ export default class MessageComposer extends React.Component {
key="controls_formatting" />
);
const placeholderText = roomIsEncrypted ?
"Send an encrypted message…" : "Send a plaintext message…";
controls.push(
<MessageComposerInput
ref={c => this.messageComposerInput = c}
key="controls_input"
onResize={this.props.onResize}
room={this.props.room}
placeholder={placeholderText}
tryComplete={this._tryComplete}
onUpArrow={this.onUpArrow}
onDownArrow={this.onDownArrow}

View file

@ -721,7 +721,7 @@ export default class MessageComposerInput extends React.Component {
title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
<Editor ref="editor"
placeholder="Type a message…"
placeholder={this.props.placeholder}
editorState={this.state.editorState}
onChange={this.onEditorContentChanged}
blockStyleFn={MessageComposerInput.getBlockStyle}

View file

@ -70,6 +70,9 @@ export default React.createClass({
// js-sdk Room object
room: React.PropTypes.object.isRequired,
// The text to use a placeholder in the input box
placeholder: React.PropTypes.string.isRequired,
},
componentWillMount: function() {
@ -442,7 +445,7 @@ export default React.createClass({
render: function() {
return (
<div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
<textarea autoFocus 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={this.props.placeholder} />
</div>
);
}