From 33044d713e7347d41b892d2998e0184e78cdb1c8 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 3 Dec 2019 22:41:22 -0700
Subject: [PATCH] Match e2e icons on events to expectations
Fixes https://github.com/vector-im/riot-web/issues/11547
Steps taken:
* Convert `E2ePadlock` to a class-style component so the hover state can be tracked (tooltips).
* Convert the image mask to a background image to keep the `!` in the shield.
* Update copy.
---
res/css/views/rooms/_EventTile.scss | 19 +++----
src/components/views/rooms/EventTile.js | 68 +++++++++++++++++++++----
src/i18n/strings/en_EN.json | 4 +-
3 files changed, 69 insertions(+), 22 deletions(-)
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index fb85b9cf88..43aed34a23 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -347,27 +347,28 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
}
.mx_EventTile_e2eIcon {
- display: block;
position: absolute;
- top: 8px;
+ top: 6px;
left: 46px;
width: 15px;
height: 15px;
cursor: pointer;
- mask-size: 14px;
- mask-repeat: no-repeat;
- mask-position: 0;
+ display: block;
+ bottom: 0;
+ right: 0;
opacity: 0.2;
+ background-repeat: no-repeat;
+ background-size: contain;
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
- mask-image: url('$(res)/img/e2e/warning.svg');
- background-color: $warning-color;
+ background-image: url('$(res)/img/e2e/warning.svg');
+ opacity: 1;
}
.mx_EventTile_e2eIcon_unencrypted {
- mask-image: url('$(res)/img/e2e/warning.svg');
- background-color: $composer-e2e-icon-color;
+ background-image: url('$(res)/img/e2e/warning.svg');
+ opacity: 1;
}
.mx_EventTile_e2eIcon_hidden {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 8b0e62d8f5..efda6c6d44 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -494,6 +494,9 @@ module.exports = createReactClass({
if (ev.status === EventStatus.NOT_SENT) {
return;
}
+ if (ev.isState()) {
+ return; // we expect this to be unencrypted
+ }
// if the event is not encrypted, but it's an e2e room, show the open padlock
return <E2ePadlockUnencrypted {...props} />;
}
@@ -887,7 +890,7 @@ module.exports.haveTileForEvent = function(e) {
function E2ePadlockUndecryptable(props) {
return (
- <E2ePadlock title={_t("Undecryptable")} icon="undecryptable" {...props} />
+ <E2ePadlock title={_t("This message cannot be decrypted")} icon="undecryptable" {...props} />
);
}
@@ -899,19 +902,62 @@ function E2ePadlockUnverified(props) {
function E2ePadlockUnencrypted(props) {
return (
- <E2ePadlock title={_t("Unencrypted message")} icon="unencrypted" {...props} />
+ <E2ePadlock title={_t("Unencrypted")} icon="unencrypted" {...props} />
);
}
-function E2ePadlock(props) {
- if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
- return (<div
- className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${props.icon}`}
- title={props.title} onClick={props.onClick} />);
- } else {
- return (<div
- className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden mx_EventTile_e2eIcon_${props.icon}`}
- onClick={props.onClick} />);
+class E2ePadlock extends React.Component {
+ static propTypes = {
+ icon: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+ };
+
+ constructor() {
+ super();
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ onClick = (e) => {
+ if (this.props.onClick) this.props.onClick(e);
+ };
+
+ onHoverStart = () => {
+ this.setState({hover: true});
+ };
+
+ onHoverEnd = () => {
+ this.setState({hover: false});
+ };
+
+ render() {
+ let tooltip = null;
+ if (this.state.hover) {
+ const Tooltip = sdk.getComponent("elements.Tooltip");
+ tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} dir="auto" />;
+ }
+ if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
+ return (
+ <div
+ className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${this.props.icon}`}
+ onClick={this.onClick}
+ onMouseEnter={this.onHoverStart}
+ onMouseLeave={this.onHoverEnd}
+ >{tooltip}</div>
+ );
+ } else {
+ return (
+ <div
+ className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden mx_EventTile_e2eIcon_${this.props.icon}`}
+ onClick={this.onClick}
+ onMouseEnter={this.onHoverStart}
+ onMouseLeave={this.onHoverEnd}
+ >{tooltip}</div>
+ );
+ }
}
}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index bacd15a275..9536ac569b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -834,9 +834,9 @@
"If your other devices do not have the key for this message you will not be able to decrypt them.": "If your other devices do not have the key for this message you will not be able to decrypt them.",
"Key request sent.": "Key request sent.",
"<requestLink>Re-request encryption keys</requestLink> from your other devices.": "<requestLink>Re-request encryption keys</requestLink> from your other devices.",
- "Undecryptable": "Undecryptable",
+ "This message cannot be decrypted": "This message cannot be decrypted",
"Encrypted by an unverified device": "Encrypted by an unverified device",
- "Unencrypted message": "Unencrypted message",
+ "Unencrypted": "Unencrypted",
"Please select the destination room for this message": "Please select the destination room for this message",
"Scroll to bottom of page": "Scroll to bottom of page",
"device id: ": "device id: ",