diff --git a/res/css/_components.scss b/res/css/_components.scss
index 0ba2b609e8..0344074369 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -140,10 +140,10 @@
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
@import "./views/messages/_RoomAvatarEvent.scss";
@import "./views/messages/_SenderProfile.scss";
@import "./views/messages/_TextualEvent.scss";
-@import "./views/messages/_UnknownBody.scss";
@import "./views/messages/_ViewSourceEvent.scss";
@import "./views/messages/_common_CryptoEvent.scss";
@import "./views/right_panel/_EncryptionInfo.scss";
diff --git a/res/css/views/messages/_UnknownBody.scss b/res/css/views/messages/_RedactedBody.scss
similarity index 52%
rename from res/css/views/messages/_UnknownBody.scss
rename to res/css/views/messages/_RedactedBody.scss
index 9036e12bf0..c0001db5d3 100644
--- a/res/css/views/messages/_UnknownBody.scss
+++ b/res/css/views/messages/_RedactedBody.scss
@@ -1,5 +1,6 @@
/*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
@@ -11,6 +12,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-.mx_UnknownBody {
+.mx_RedactedBody {
white-space: pre-wrap;
+ color: $muted-fg-color;
+
+ padding-left: 16px;
+ position: relative;
+
+ &::before {
+ height: 14px;
+ width: 14px;
+ background-color: $muted-fg-color;
+ mask-image: url('$(res)/img/feather-customised/trash (custom).svg');
+ mask-repeat: no-repeat;
+ mask-position: center;
+ mask-size: contain;
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ }
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 0dc60226b8..3f5f039005 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -242,34 +242,6 @@ limitations under the License.
color: $event-notsent-color;
}
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
- --lozenge-color: $event-redacted-fg-color;
- --lozenge-border-color: $event-redacted-border-color;
- display: block;
- height: 22px;
- width: 250px;
- border-radius: 11px;
- background:
- repeating-linear-gradient(
- -45deg,
- var(--lozenge-color),
- var(--lozenge-color) 3px,
- transparent 3px,
- transparent 6px
- );
- box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
- opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
- --lozenge-color: $event-notsent-color;
- --lozenge-border-color: $event-notsent-color;
-}
-
.mx_EventTile_contextual {
opacity: 0.4;
}
diff --git a/res/img/feather-customised/trash (custom).svg b/res/img/feather-customised/trash (custom).svg
new file mode 100644
index 0000000000..dc1985ddb2
--- /dev/null
+++ b/res/img/feather-customised/trash (custom).svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/views/messages/EditHistoryMessage.js b/src/components/views/messages/EditHistoryMessage.js
index 679a8f7471..e0ca23d244 100644
--- a/src/components/views/messages/EditHistoryMessage.js
+++ b/src/components/views/messages/EditHistoryMessage.js
@@ -26,6 +26,7 @@ import * as sdk from '../../../index';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import classNames from 'classnames';
+import RedactedBody from "./RedactedBody";
function getReplacedContent(event) {
const originalContent = event.getOriginalContent();
@@ -132,8 +133,7 @@ export default class EditHistoryMessage extends React.PureComponent {
const content = getReplacedContent(mxEvent);
let contentContainer;
if (mxEvent.isRedacted()) {
- const UnknownBody = sdk.getComponent('messages.UnknownBody');
- contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
+ contentContainer = <RedactedBody mxEvent={this.props.mxEvent} />;
} else {
let contentElements;
if (this.props.previousEdit) {
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index beba986104..f8bd23cbe3 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -20,6 +20,7 @@ import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import SettingsStore from "../../../settings/SettingsStore";
import {Mjolnir} from "../../../mjolnir/Mjolnir";
+import RedactedBody from "./RedactedBody";
export default createReactClass({
displayName: 'MessageEvent',
@@ -61,8 +62,6 @@ export default createReactClass({
},
render: function() {
- const UnknownBody = sdk.getComponent('messages.UnknownBody');
-
const bodyTypes = {
'm.text': sdk.getComponent('messages.TextualBody'),
'm.notice': sdk.getComponent('messages.TextualBody'),
@@ -79,7 +78,7 @@ export default createReactClass({
const content = this.props.mxEvent.getContent();
const type = this.props.mxEvent.getType();
const msgtype = content.msgtype;
- let BodyType = UnknownBody;
+ let BodyType = RedactedBody;
if (!this.props.mxEvent.isRedacted()) {
// only resolve BodyType if event is not redacted
if (type && evTypes[type]) {
diff --git a/src/components/views/messages/RedactedBody.tsx b/src/components/views/messages/RedactedBody.tsx
new file mode 100644
index 0000000000..f219e3bd91
--- /dev/null
+++ b/src/components/views/messages/RedactedBody.tsx
@@ -0,0 +1,45 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, {useContext} from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+ mxEvent: MatrixEvent;
+}
+
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+ const cli: MatrixClient = useContext(MatrixClientContext);
+
+ let text = _t("Message deleted");
+ const redactedBecauseUserId = mxEvent.getUnsigned().redacted_because.sender;
+ if (redactedBecauseUserId !== cli.getUserId()) {
+ const room = cli.getRoom(mxEvent.getRoomId());
+ const sender = room && room.getMember(redactedBecauseUserId);
+ text = _t("Message deleted by %(user)s", { user: sender.name || redactedBecauseUserId });
+ }
+
+ return (
+ <span className="mx_RedactedBody" ref={ref}>
+ { text }
+ </span>
+ );
+});
+
+export default RedactedBody;
diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
deleted file mode 100644
index 2a19f324e8..0000000000
--- a/src/components/views/messages/UnknownBody.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
- displayName: 'UnknownBody',
-
- render: function() {
- let tooltip = _t("Removed or unknown message type");
- if (this.props.mxEvent.isRedacted()) {
- const redactedBecauseUserId = this.props.mxEvent.getUnsigned().redacted_because.sender;
- tooltip = redactedBecauseUserId ?
- _t("Message removed by %(userId)s", { userId: redactedBecauseUserId }) :
- _t("Message removed");
- }
-
- const text = this.props.mxEvent.getContent().body;
- return (
- <span className="mx_UnknownBody" title={tooltip}>
- { text }
- </span>
- );
- },
-});
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3eac055054..356e80afcf 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1328,6 +1328,8 @@
"Reactions": "Reactions",
"<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
+ "Message deleted": "Message deleted",
+ "Message deleted by %(user)s": "Message deleted by %(user)s",
"%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
"%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
"%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -1341,9 +1343,6 @@
"edited": "edited",
"Can't load this message": "Can't load this message",
"Submit logs": "Submit logs",
- "Removed or unknown message type": "Removed or unknown message type",
- "Message removed by %(userId)s": "Message removed by %(userId)s",
- "Message removed": "Message removed",
"Failed to load group members": "Failed to load group members",
"Filter community members": "Filter community members",
"Invite to this community": "Invite to this community",