PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

update message e2e icons

Browse source 
also remove encrypted icon as header/composer already indicate encryption
This commit is contained in:
Bruno Windels 2019-02-01 16:43:12 +01:00
parent 2596a0ffc2
commit 88ad780b6b
3 changed files with 36 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/views/rooms/_EventTile.scss
View file

@ -281,9 +281,24 @@ limitations under the License.
.mx_EventTile_e2eIcon {
display: block;
position: absolute;
top: 9px;
top: 8px;
left: 46px;
width: 15px;
height: 15px;
cursor: pointer;
mask-size: 14px;
mask-repeat: no-repeat;
mask-position: 0;
}
.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
background-color: $warning-color;
}
.mx_EventTile_e2eIcon_unencrypted {
mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
background-color: $composer-e2e-icon-color;
}
.mx_EventTile_e2eIcon_hidden {

6
res/img/feather-icons/e2e/warning.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
<defs>
<path id="a" d="M5 10A5 5 0 1 0 5 0a5 5 0 0 0 0 10zM5 .5A1.5 1.5 0 0 1 6.5 2v3a1.5 1.5 0 0 1-3 0V2A1.5 1.5 0 0 1 5 .5zm0 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</defs>
<use fill="#F56679" fill-rule="evenodd" stroke="#F56679" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" transform="translate(1 1)" xlink:href="#a"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 500 B

52
src/components/views/rooms/EventTile.js
View file

@ -459,17 +459,21 @@ module.exports = withMatrixClient(React.createClass({
// event is encrypted, display padlock corresponding to whether or not it is verified
if (ev.isEncrypted()) {
return this.state.verified ? <E2ePadlockVerified {...props} /> : <E2ePadlockUnverified {...props} />;
if (this.state.verified) {
return; // no icon for verified
} else {
return (<E2ePadlockUnverified {...props} />);
}
}
if (this.props.matrixClient.isRoomEncrypted(ev.getRoomId())) {
// else if room is encrypted
// and event is being encrypted or is not_sent (Unknown Devices/Network Error)
if (ev.status === EventStatus.ENCRYPTING) {
return <E2ePadlockEncrypting {...props} />;
return;
}
if (ev.status === EventStatus.NOT_SENT) {
return <E2ePadlockNotSent {...props} />;
return;
}
// if the event is not encrypted, but it's an e2e room, show the open padlock
return <E2ePadlockUnencrypted {...props} />;
@ -767,57 +771,29 @@ module.exports.haveTileForEvent = function(e) {
function E2ePadlockUndecryptable(props) {
return (
<E2ePadlock alt={_t("Undecryptable")}
src={require("../../../../res/img/e2e-blocked.svg")} width="12" height="12"
style={{ marginLeft: "-1px" }} {...props} />
);
}
function E2ePadlockEncrypting(props) {
return (
<E2ePadlock alt={_t("Encrypting")}
src={require("../../../../res/img/e2e-encrypting.svg")} width="10" height="12"
{...props} />
);
}
function E2ePadlockNotSent(props) {
return (
<E2ePadlock alt={_t("Encrypted, not sent")}
src={require("../../../../res/img/e2e-not_sent.svg")} width="10" height="12"
{...props} />
);
}
function E2ePadlockVerified(props) {
return (
<E2ePadlock alt={_t("Encrypted by a verified device")}
src={require("../../../../res/img/e2e-verified.svg")} width="10" height="12"
{...props} />
<E2ePadlock title={_t("Undecryptable")} icon="undecryptable" />
);
}
function E2ePadlockUnverified(props) {
return (
<E2ePadlock alt={_t("Encrypted by an unverified device")}
src={require("../../../../res/img/e2e-warning.svg")} width="15" height="12"
style={{ marginLeft: "-2px" }} {...props} />
<E2ePadlock title={_t("Encrypted by an unverified device")} icon="unverified" />
);
}
function E2ePadlockUnencrypted(props) {
return (
<E2ePadlock alt={_t("Unencrypted message")}
src={require("../../../../res/img/e2e-unencrypted.svg")} width="12" height="12"
{...props} />
<E2ePadlock title={_t("Unencrypted message")} icon="unencrypted" />
);
}
function E2ePadlock(props) {
if (SettingsStore.getValue("alwaysShowEncryptionIcons")) {
return <img className="mx_EventTile_e2eIcon" {...props} />;
return <div
className={`mx_EventTile_e2eIcon mx_EventTile_e2eIcon_${props.icon}`}
title={props.title} onClick={props.onClick} />;
} else {
return <img className="mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden" {...props} />;
return <div className="mx_EventTile_e2eIcon mx_EventTile_e2eIcon_hidden" onClick={props.onClick} />;
}
}