e2e look & feel

pull/21833/head
Matthew Hodgson 2016-09-12 01:37:51 +01:00
parent e6b4b8c1cb
commit 3a1159ce12
2 changed files with 33 additions and 8 deletions

View File

@ -248,8 +248,7 @@ module.exports = React.createClass({
if (!actions || !actions.tweaks) { return false; }
// don't show self-highlights from another of our clients
if (this.props.mxEvent.sender &&
this.props.mxEvent.sender.userId === MatrixClientPeg.get().credentials.userId)
if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId)
{
return false;
}
@ -384,21 +383,24 @@ module.exports = React.createClass({
throw new Error("Event type not supported");
}
var e2eEnabled = MatrixClientPeg.get().isRoomEncrypted(this.props.mxEvent.getRoomId());
var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
var classes = classNames({
mx_EventTile: true,
mx_EventTile_info: isInfoMessage,
mx_EventTile_sending: ['sending', 'queued'].indexOf(
this.props.eventSendStatus
) !== -1,
mx_EventTile_encrypting: this.props.eventSendStatus == 'encrypting',
mx_EventTile_sending: isSending,
mx_EventTile_notSent: this.props.eventSendStatus == 'not_sent',
mx_EventTile_highlight: this.props.tileShape === 'notif' ? false : this.shouldHighlight(),
mx_EventTile_highlight: this.props.tileShape == 'notif' ? false : this.shouldHighlight(),
mx_EventTile_selected: this.props.isSelectedEvent,
mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
mx_EventTile_last: this.props.last,
mx_EventTile_contextual: this.props.contextual,
menu: this.state.menu,
mx_EventTile_verified: this.state.verified == true,
mx_EventTile_verified: this.state.verified == true || (e2eEnabled && isSending),
mx_EventTile_unverified: this.state.verified == false,
mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted',
});
var permalink = "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId();
@ -447,13 +449,28 @@ module.exports = React.createClass({
else {
sender = <SenderProfile mxEvent={this.props.mxEvent} />;
}
}
var editButton = (
<img className="mx_EventTile_editButton" src="img/icon_context_message.svg" width="19" height="19" alt="Options" title="Options" onClick={this.onEditClicked} />
);
var e2e;
if (e2eEnabled) {
if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-blocked.png" width="12" height="12"/>;
}
else if (this.state.verified == true) {
e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-verified.png" width="10" height="12" alt="Encrypted by a verified device"/>;
}
else if (this.state.verified == false) {
e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-warning.png" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Encrypted by an unverified device!"/>;
}
else {
e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-unencrypted.png" width="12" height="12"/>;
}
}
if (this.props.tileShape === "notif") {
var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
@ -515,6 +532,7 @@ module.exports = React.createClass({
<a href={ permalink }>
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
</a>
{ e2e }
<EventTileType ref="tile"
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}

View File

@ -201,6 +201,13 @@ export default class MessageComposer extends React.Component {
</div>
);
if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
// FIXME: show a /!\ if there are untrusted devices in the room...
controls.push(
<img className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.png" width="10" height="12" alt="Encrypted room"/>
);
}
var callButton, videoCallButton, hangupButton;
if (this.props.callState && this.props.callState !== 'ended') {
hangupButton =