Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve reply rendering #3553

Merged
merged 114 commits into from
Jul 15, 2021
Merged
Show file tree
Hide file tree
Changes from 26 commits
Commits
Show all changes
114 commits
Select commit Hold shift + click to select a range
d282675
Improve reply rendering
tulir Oct 13, 2019
a8c5574
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Mar 5, 2020
03d36f3
Fix lint errors
tulir Mar 5, 2020
26a4a23
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Apr 10, 2020
03299a2
Fix import/export things
tulir Apr 10, 2020
e64ff0f
Change score color to match sender name
tulir Apr 10, 2020
9b023fb
Add missing semicolon
tulir Apr 10, 2020
25af263
Make image reply rendering even more compact
tulir Apr 10, 2020
ec7acd1
Fix rendering reply after event is decrypted
tulir Apr 10, 2020
da3bd5e
Disable pointer events inside replies
tulir Apr 10, 2020
6b96a16
Add absolute max height and some improvements for <pre> replies
tulir Apr 10, 2020
e7ad9b8
Fix stylelint issue and update header
tulir Apr 10, 2020
b554d59
Prevent reply thumbnail image from overflowing
tulir Apr 10, 2020
4e5680d
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir May 25, 2020
dfe277b
Remove unnecessary right margin in reply blockquote
tulir May 25, 2020
c604837
Fix dispatcher import in ReplyTile.js
tulir May 25, 2020
4521e9f
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jun 7, 2020
db5121a
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Aug 3, 2020
75a0178
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Sep 4, 2020
987cdf1
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Sep 19, 2020
2bb7b65
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Oct 2, 2020
dfcf701
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Feb 19, 2021
8c8b46b
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Mar 12, 2021
99717db
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Mar 19, 2021
cdf8f09
Remove unused import and run yarn i18n
tulir Mar 20, 2021
c31967d
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Mar 26, 2021
b8ef67e
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Apr 19, 2021
09f9916
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir May 1, 2021
330f222
Remove redundant code and move presentableTextForFile out of MFileBody
tulir May 1, 2021
cc91945
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir May 6, 2021
059241b
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jun 7, 2021
cdd2773
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jun 15, 2021
9f66bd0
Remove extra space
tulir Jun 15, 2021
c1bc4b0
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jun 19, 2021
29eff06
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jun 20, 2021
5240209
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
tulir Jul 2, 2021
598689b
Run eslint
tulir Jul 2, 2021
38710ea
Export IProps
SimonBrandner Jul 2, 2021
869f31d
Convert MImageBody to TS
SimonBrandner Jul 2, 2021
969be09
Add a few things to IMediaEventContent
SimonBrandner Jul 2, 2021
5f49b2d
Missing args
SimonBrandner Jul 2, 2021
5d78eb4
Member delimiter rules
SimonBrandner Jul 2, 2021
6645036
Convert MImageReplyBody to TS
SimonBrandner Jul 2, 2021
0fe10e4
Fix replies to deleted messages
SimonBrandner Jul 2, 2021
9a1b73f
Convert ReplyTile to TS
SimonBrandner Jul 2, 2021
2308ed6
i18n
SimonBrandner Jul 2, 2021
e582b15
Fix redacted messages (again)
SimonBrandner Jul 2, 2021
0d8f84c
Delete lozenge effect
SimonBrandner Jul 2, 2021
259b36c
Remove unused code
SimonBrandner Jul 2, 2021
090acc4
Unused import
SimonBrandner Jul 2, 2021
b7af39f
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
SimonBrandner Jul 8, 2021
2e295a9
Don't export IProps
SimonBrandner Jul 13, 2021
7bd7f70
Extend IDialogProps
SimonBrandner Jul 13, 2021
cbe94c3
Kill-off sdk.getComponent
SimonBrandner Jul 13, 2021
5f81cfe
Nicer formatting
SimonBrandner Jul 13, 2021
ae5e10f
Burn sdk.getComponent
SimonBrandner Jul 13, 2021
04098dc
Remove unnecessary constructor
SimonBrandner Jul 13, 2021
b5baf40
Don't use as
SimonBrandner Jul 13, 2021
70e94f9
Formatting
SimonBrandner Jul 13, 2021
8f8377a
Types
SimonBrandner Jul 13, 2021
5fc3556
More TS
SimonBrandner Jul 13, 2021
2a403f6
Remove additional ?
SimonBrandner Jul 13, 2021
bdbd03c
Types
SimonBrandner Jul 13, 2021
fa4977c
Use current target
SimonBrandner Jul 13, 2021
6193bc2
Types
SimonBrandner Jul 13, 2021
86580f3
current target
SimonBrandner Jul 13, 2021
af7769c
Types!
SimonBrandner Jul 13, 2021
4cf4ab2
Return type
SimonBrandner Jul 13, 2021
e4d1859
Ret type
SimonBrandner Jul 13, 2021
ef1a1eb
TS
SimonBrandner Jul 13, 2021
931bba7
Replaceable component
SimonBrandner Jul 13, 2021
63ad952
EventType enum!
SimonBrandner Jul 13, 2021
22b029d
Relation type
SimonBrandner Jul 13, 2021
0bf595d
Enums
SimonBrandner Jul 13, 2021
b1fb089
More compact classNames
SimonBrandner Jul 13, 2021
c44de3b
Enums
SimonBrandner Jul 13, 2021
069180b
Remove contructor
SimonBrandner Jul 13, 2021
43cf7bc
Remove 0px
SimonBrandner Jul 13, 2021
e01d157
Formatting
SimonBrandner Jul 13, 2021
562d43e
Font
SimonBrandner Jul 13, 2021
9455a6d
Import replaceableComponent
SimonBrandner Jul 13, 2021
bc7a8f8
Handle redaction
SimonBrandner Jul 13, 2021
fca5125
Improve redacted body look
SimonBrandner Jul 13, 2021
866a11d
Fix image alignment issues
SimonBrandner Jul 13, 2021
75e7948
Handle event edits
SimonBrandner Jul 13, 2021
b4ae54d
Remove unused CSS
SimonBrandner Jul 13, 2021
8fc90e1
Fix isInfoMessage regression
SimonBrandner Jul 13, 2021
d149cea
Remove unused CSS
SimonBrandner Jul 13, 2021
8e456b0
More unused CSS
SimonBrandner Jul 13, 2021
2660e25
Deduplicate some code
SimonBrandner Jul 13, 2021
1ec4ead
Unused imports
SimonBrandner Jul 13, 2021
8f831a8
Remove unused code
SimonBrandner Jul 13, 2021
1bca537
Fix redacted messages for the 100th #*&@*%^ time
SimonBrandner Jul 13, 2021
0bbdfef
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
SimonBrandner Jul 13, 2021
9aae33e
Use string[]
SimonBrandner Jul 14, 2021
74ff85a
Remove m.sticker since it's not a message type
SimonBrandner Jul 14, 2021
58dedbe
Add missing type
SimonBrandner Jul 14, 2021
7b35d2c
FORCED_IMAGE_HEIGHT into a const
SimonBrandner Jul 14, 2021
bde26a8
Omit onFinished
SimonBrandner Jul 14, 2021
4afd985
Kill off _afterComponentWillUnmount
SimonBrandner Jul 14, 2021
1835559
Fix senderProfile getting cutoff
SimonBrandner Jul 14, 2021
586e85c
Use MFileBody in replies
SimonBrandner Jul 14, 2021
f26c75b
Use margin instead of padding
SimonBrandner Jul 14, 2021
ae4d8c2
It's not an override
SimonBrandner Jul 14, 2021
04db6be
Remove stale comment
SimonBrandner Jul 14, 2021
782563a
Override audio and video body with file body
SimonBrandner Jul 14, 2021
6c801fe
Use MImageReplyBody for stickers
SimonBrandner Jul 14, 2021
54d2784
Remove unused import
SimonBrandner Jul 14, 2021
acd37d2
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
SimonBrandner Jul 14, 2021
7f9f2db
Merge remote-tracking branch 'upstream/develop' into compact-reply-re…
SimonBrandner Jul 15, 2021
375e279
Add speaker icon
SimonBrandner Jul 15, 2021
68640a4
Fix icon postion
SimonBrandner Jul 15, 2021
88da0f4
Give audio and video replies an icon
SimonBrandner Jul 15, 2021
5d0afdb
Don't show line number in replies
SimonBrandner Jul 15, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
@import "./views/messages/_MImageReplyBody.scss";
@import "./views/messages/_MJitsiWidgetEvent.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
Expand Down Expand Up @@ -201,6 +202,7 @@
@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
@import "./views/rooms/_ReplyTile.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
Expand Down
44 changes: 35 additions & 9 deletions res/css/views/elements/_ReplyThread.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,46 @@ limitations under the License.
margin-top: 0;
}

.mx_ReplyThread .mx_DateSeparator {
font-size: 1em !important;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 1px;
bottom: -5px;
}

.mx_ReplyThread_show {
cursor: pointer;
}

blockquote.mx_ReplyThread {
margin-left: 0;
margin-right: 0;
margin-bottom: 8px;
padding-left: 10px;
border-left: 4px solid $blockquote-bar-color;
border-left: 4px solid $button-bg-color;

&.mx_ReplyThread_color1 {
border-left-color: $username-variant1-color;
}

&.mx_ReplyThread_color2 {
border-left-color: $username-variant2-color;
}

&.mx_ReplyThread_color3 {
border-left-color: $username-variant3-color;
}

&.mx_ReplyThread_color4 {
border-left-color: $username-variant4-color;
}

&.mx_ReplyThread_color5 {
border-left-color: $username-variant5-color;
}

&.mx_ReplyThread_color6 {
border-left-color: $username-variant6-color;
}

&.mx_ReplyThread_color7 {
border-left-color: $username-variant7-color;
}

&.mx_ReplyThread_color8 {
border-left-color: $username-variant8-color;
}
}
40 changes: 40 additions & 0 deletions res/css/views/messages/_MImageReplyBody.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
Copyright 2020 Tulir Asokan <tulir@maunium.net>

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.
*/

.mx_MImageReplyBody {
display: grid;
grid-template:
"image sender" 20px
"image filename" 20px
/ 44px auto;
grid-gap: 4px;
}

.mx_MImageReplyBody_thumbnail {
grid-area: image;

.mx_MImageBody_thumbnail_container {
max-height: 44px !important;
}
}

.mx_MImageReplyBody_sender {
grid-area: sender;
}

.mx_MImageReplyBody_filename {
grid-area: filename;
}
7 changes: 6 additions & 1 deletion res/css/views/rooms/_ReplyPreview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,24 @@ limitations under the License.
}

.mx_ReplyPreview_header {
margin: 12px;
margin: 8px;
color: $primary-fg-color;
font-weight: 400;
opacity: 0.4;
}

.mx_ReplyPreview_tile {
margin: 0 8px;
}

.mx_ReplyPreview_title {
float: left;
}

.mx_ReplyPreview_cancel {
float: right;
cursor: pointer;
display: flex;
}

.mx_ReplyPreview_clear {
Expand Down
113 changes: 113 additions & 0 deletions res/css/views/rooms/_ReplyTile.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
/*
Copyright 2020 Tulir Asokan <tulir@maunium.net>

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.
*/

.mx_ReplyTile {
max-width: 100%;
clear: both;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
padding-top: 2px;
padding-bottom: 2px;
font-size: 14px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
position: relative;
line-height: 16px;
}

.mx_ReplyTile > a {
display: block;
text-decoration: none;
color: $primary-fg-color;
}

// We do reply size limiting with CSS to avoid duplicating the TextualBody component.
.mx_ReplyTile .mx_EventTile_content {
$reply-lines: 2;
$line-height: 22px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
$max-height: 66px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved

pointer-events: none;

text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $reply-lines;
line-height: $line-height;
max-height: $max-height;

.mx_EventTile_body.mx_EventTile_bigEmoji {
line-height: $line-height !important;
// Override the big emoji override
font-size: 14px !important;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
}

// Hack to cut content in <pre> tags too
.mx_EventTile_pre_container > pre {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $reply-lines;
padding: 4px;
}
.markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
margin-bottom: 4px;
}
}

.mx_ReplyTile.mx_ReplyTile_info {
padding-top: 0px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
}

.mx_ReplyTile .mx_SenderProfile {
color: $primary-fg-color;
font-size: 14px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
display: inline-block; /* anti-zalgo, with overflow hidden */
overflow: hidden;
cursor: pointer;
padding-left: 0px; /* left gutter */
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
line-height: 17px;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
/* the next three lines, along with overflow hidden, truncate long display names */
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 65px);
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
}

.mx_ReplyTile_redacted .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_ReplyTile_sending.mx_ReplyTile_redacted .mx_UnknownBody {
opacity: 0.4;
}

.mx_ReplyTile_contextual {
opacity: 0.4;
}
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
23 changes: 9 additions & 14 deletions src/components/views/elements/ReplyThread.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ import * as sdk from '../../../index';
import {_t} from '../../../languageHandler';
import PropTypes from 'prop-types';
import dis from '../../../dispatcher/dispatcher';
import {wantsDateSeparator} from '../../../DateUtils';
import {MatrixEvent} from 'matrix-js-sdk/src/models/event';
import {makeUserPermalink, RoomPermalinkCreator} from "../../../utils/permalinks/Permalinks";
import SettingsStore from "../../../settings/SettingsStore";
import {LayoutPropType} from "../../../settings/Layout";
import escapeHtml from "escape-html";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { getUserNameColorClass } from "../../../utils/FormattingUtils";
import {Action} from "../../../dispatcher/actions";
import sanitizeHtml from "sanitize-html";
import {UIFeature} from "../../../settings/UIFeature";
Expand Down Expand Up @@ -337,6 +337,10 @@ export default class ReplyThread extends React.Component {
dis.fire(Action.FocusComposer);
}

getReplyThreadColorClass(ev) {
return getUserNameColorClass(ev.getSender()).replace("Username", "ReplyThread");
}

render() {
let header = null;

Expand All @@ -351,7 +355,7 @@ export default class ReplyThread extends React.Component {
const ev = this.state.loadedEv;
const Pill = sdk.getComponent('elements.Pill');
const room = this.context.getRoom(ev.getRoomId());
header = <blockquote className="mx_ReplyThread">
header = <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`}>
{
_t('<a>In reply to</a> <pill>', {}, {
'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
Expand All @@ -371,20 +375,11 @@ export default class ReplyThread extends React.Component {
header = <Spinner w={16} h={16} />;
}

const EventTile = sdk.getComponent('views.rooms.EventTile');
const DateSeparator = sdk.getComponent('messages.DateSeparator');
const ReplyTile = sdk.getComponent('views.rooms.ReplyTile');
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
const evTiles = this.state.events.map((ev) => {
let dateSep = null;

if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
}

return <blockquote className="mx_ReplyThread" key={ev.getId()}>
{ dateSep }
<EventTile
return <blockquote className={`mx_ReplyThread ${this.getReplyThreadColorClass(ev)}`} key={ev.getId()}>
<ReplyTile
mxEvent={ev}
tileShape="reply"
onHeightChanged={this.props.onHeightChanged}
permalinkCreator={this.props.permalinkCreator}
isRedacted={ev.isRedacted()}
Expand Down
59 changes: 59 additions & 0 deletions src/components/views/messages/MImageReplyBody.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/*
Copyright 2020 Tulir Asokan <tulir@maunium.net>

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 { _td } from "../../../languageHandler";
import * as sdk from "../../../index";
import MImageBody from './MImageBody';
import MFileBody from "./MFileBody";

export default class MImageReplyBody extends MImageBody {
onClick(ev) {
ev.preventDefault();
}

wrapImage(contentUrl, children) {
return children;
}

// Don't show "Download this_file.png ..."
getFileBody() {
return MFileBody.prototype.presentableTextForFile.call(this, this.props.mxEvent.getContent());
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
}

render() {
if (this.state.error !== null) {
return super.render();
}

const content = this.props.mxEvent.getContent();

const contentUrl = this._getContentUrl();
const thumbnail = this._messageContent(contentUrl, this._getThumbUrl(), content);
const fileBody = this.getFileBody();
const SenderProfile = sdk.getComponent('messages.SenderProfile');
const sender = <SenderProfile onClick={this.onSenderProfileClick}
mxEvent={this.props.mxEvent}
enableFlair={false}
text={_td('%(senderName)s sent an image')} />;

return <div className="mx_MImageReplyBody">
<div className="mx_MImageReplyBody_thumbnail">{ thumbnail }</div>
<div className="mx_MImageReplyBody_sender">{ sender }</div>
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
</div>;
}
}
Loading