From 46205ad83ccf594b95f4abac4c3645a3bc597bfb Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 22:49:05 +0100 Subject: [PATCH 1/6] back out small avatars for emotes for now as they conflict with the E2E artwork. they will be reintroduced once we have lozenges --- src/components/structures/MessagePanel.js | 2 ++ src/components/views/rooms/EventTile.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index 6f2d8f038b..31ef15b6dc 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -346,6 +346,7 @@ module.exports = React.createClass({ continuation = true; } +/* // Work out if this is still a continuation, as we are now showing commands // and /me messages with their own little avatar. The case of a change of // event type (commands) is handled above, but we need to handle the /me @@ -357,6 +358,7 @@ module.exports = React.createClass({ && prevEvent.getContent().msgtype === 'm.emote') { continuation = false; } +*/ // local echoes have a fake date, which could even be yesterday. Treat them // as 'today' for the date separators. diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index f3ae3dff7f..b11f9b1291 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -375,7 +375,7 @@ module.exports = React.createClass({ // Info messages are basically information about commands processed on a // room, or emote messages - var isInfoMessage = (msgtype === 'm.emote' || eventType !== 'm.room.message'); + var isInfoMessage = false; // (msgtype === 'm.emote' || eventType !== 'm.room.message'); var EventTileType = sdk.getComponent(eventTileTypes[eventType]); // This shouldn't happen: the caller should check we support this type @@ -422,7 +422,7 @@ module.exports = React.createClass({ needsSenderProfile = false; } else { avatarSize = 30; - needsSenderProfile = true; + needsSenderProfile = (eventType === 'm.room.message'); } if (this.props.mxEvent.sender && avatarSize) { From e6b4b8c1cbcf7e4cf5e54d963b56aaab3f21482f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 11 Sep 2016 23:01:20 +0100 Subject: [PATCH 2/6] bring back small avatars for info msgs otherwise the design breaks --- src/components/views/rooms/EventTile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index b11f9b1291..702cf94a68 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -375,7 +375,7 @@ module.exports = React.createClass({ // Info messages are basically information about commands processed on a // room, or emote messages - var isInfoMessage = false; // (msgtype === 'm.emote' || eventType !== 'm.room.message'); + var isInfoMessage = (eventType !== 'm.room.message'); var EventTileType = sdk.getComponent(eventTileTypes[eventType]); // This shouldn't happen: the caller should check we support this type @@ -412,7 +412,7 @@ module.exports = React.createClass({ avatarSize = 24; needsSenderProfile = true; } else if (isInfoMessage) { - // a small avatar, with no sender profile, for emotes and + // a small avatar, with no sender profile, for // joins/parts/etc avatarSize = 14; needsSenderProfile = false; @@ -422,7 +422,7 @@ module.exports = React.createClass({ needsSenderProfile = false; } else { avatarSize = 30; - needsSenderProfile = (eventType === 'm.room.message'); + needsSenderProfile = true; } if (this.props.mxEvent.sender && avatarSize) { From 3a1159ce12779ca389296bd12125708d9080dd6d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 01:37:51 +0100 Subject: [PATCH 3/6] e2e look & feel --- src/components/views/rooms/EventTile.js | 34 ++++++++++++++----- src/components/views/rooms/MessageComposer.js | 7 ++++ 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 702cf94a68..07981be141 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -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 = ; } - } var editButton = ( Options ); + var e2e; + if (e2eEnabled) { + if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') { + e2e = ; + } + else if (this.state.verified == true) { + e2e = Encrypted by a verified device; + } + else if (this.state.verified == false) { + e2e = Encrypted by an unverified device!; + } + else { + e2e = ; + } + } + if (this.props.tileShape === "notif") { var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId()); @@ -515,6 +532,7 @@ module.exports = React.createClass({ + { e2e } ); + if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) { + // FIXME: show a /!\ if there are untrusted devices in the room... + controls.push( + Encrypted room + ); + } + var callButton, videoCallButton, hangupButton; if (this.props.callState && this.props.callState !== 'ended') { hangupButton = From 8e7b1820b9a018fb4d6ec6e03a5e60fe174f1ae2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 16:28:39 +0100 Subject: [PATCH 4/6] unbreak video thumbs --- src/components/views/messages/MVideoBody.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js index 2494ab9499..d29a3ea53e 100644 --- a/src/components/views/messages/MVideoBody.js +++ b/src/components/views/messages/MVideoBody.js @@ -83,6 +83,7 @@ module.exports = React.createClass({ ); } else { + var TintableSvg = sdk.getComponent("elements.TintableSvg"); download = (
From 9eae1c5bb7fc42a3c61aad31c7ff9f8960ca0155 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 16:51:19 +0100 Subject: [PATCH 5/6] final e2e icons --- src/components/views/rooms/EventTile.js | 8 ++++---- src/components/views/rooms/MessageComposer.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 07981be141..0fffa8cef8 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -458,16 +458,16 @@ module.exports = React.createClass({ var e2e; if (e2eEnabled) { if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') { - e2e = ; + e2e = ; } else if (this.state.verified == true) { - e2e = Encrypted by a verified device; + e2e = Encrypted by a verified device; } else if (this.state.verified == false) { - e2e = Encrypted by an unverified device!; + e2e = Encrypted by an unverified device!; } else { - e2e = ; + e2e = ; } } diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 2255b39289..2f954b908b 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -204,7 +204,7 @@ export default class MessageComposer extends React.Component { if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) { // FIXME: show a /!\ if there are untrusted devices in the room... controls.push( - Encrypted room + Encrypted room ); } From 92b4107174fa8be72293385752dce3e506111a12 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 12 Sep 2016 17:19:58 +0100 Subject: [PATCH 6/6] fix tests --- test/test-utils.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/test-utils.js b/test/test-utils.js index 78349b7824..e4c01d5c52 100644 --- a/test/test-utils.js +++ b/test/test-utils.js @@ -39,6 +39,7 @@ export function stubClient() { loginFlows: sinon.stub(), on: sinon.stub(), removeListener: sinon.stub(), + isRoomEncrypted: sinon.stub().returns(false), paginateEventTimeline: sinon.stub().returns(q()), sendReadReceipt: sinon.stub().returns(q()),