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.
This commit is contained in:
Travis Ralston 2019-12-03 22:41:22 -07:00
parent f34347b08c
commit 33044d713e
3 changed files with 69 additions and 22 deletions

View file

@ -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 {

View file

@ -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) {
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_${props.icon}`}
title={props.title} onClick={props.onClick} />);
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_${props.icon}`}
onClick={props.onClick} />);
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>
);
}
}
}

View file

@ -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: ",