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

View file

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

View file

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