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

Redesign redactions

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-04-24 15:07:39 +01:00
parent 30a409a74e
commit e16f511527
9 changed files with 80 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -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";

23
res/css/views/messages/_UnknownBody.scss → res/css/views/messages/_RedactedBody.scss
View file

@ -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;
}
}

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

@ -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;
}

7
res/img/feather-customised/trash (custom).svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 673 B

4
src/components/views/messages/EditHistoryMessage.js
View file

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

5
src/components/views/messages/MessageEvent.js
View file

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

45
src/components/views/messages/RedactedBody.tsx Normal file
View file

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

40
src/components/views/messages/UnknownBody.js
View file

@ -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>
);
},
});

5
src/i18n/strings/en_EN.json
View file

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