Reduce amount of DOM nodes

pull/21833/head
Germain Souquet 2021-05-20 15:39:25 +01:00
parent 171539d42d
commit f058fd8869
3 changed files with 16 additions and 12 deletions

View File

@ -115,8 +115,7 @@ $irc-line-height: $font-18px;
.mx_EventTile_line { .mx_EventTile_line {
.mx_EventTile_e2eIcon, .mx_EventTile_e2eIcon,
.mx_TextualEvent, .mx_TextualEvent,
.mx_MTextBody, .mx_MTextBody {
.mx_ReplyThread_wrapper_empty {
display: inline-block; display: inline-block;
} }
} }

View File

@ -214,7 +214,7 @@ export default class ReplyThread extends React.Component {
static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) { static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, layout) {
if (!ReplyThread.getParentEventId(parentEv)) { if (!ReplyThread.getParentEventId(parentEv)) {
return <div className="mx_ReplyThread_wrapper_empty" />; return null;
} }
return <ReplyThread return <ReplyThread
parentEv={parentEv} parentEv={parentEv}

View File

@ -649,6 +649,11 @@ export default class EventTile extends React.Component<IProps, IState> {
let left = 0; let left = 0;
const receipts = this.props.readReceipts || []; const receipts = this.props.readReceipts || [];
if (receipts.length === 0) {
return null;
}
for (let i = 0; i < receipts.length; ++i) { for (let i = 0; i < receipts.length; ++i) {
const receipt = receipts[i]; const receipt = receipts[i];
@ -699,10 +704,14 @@ export default class EventTile extends React.Component<IProps, IState> {
} }
} }
return <span className="mx_EventTile_readAvatars"> return (
{ remText } <div className="mx_EventTile_msgOption">
{ avatars } <span className="mx_EventTile_readAvatars">
</span>; { remText }
{ avatars }
</span>;
</div>
)
} }
onSenderProfileClick = event => { onSenderProfileClick = event => {
@ -1032,11 +1041,7 @@ export default class EventTile extends React.Component<IProps, IState> {
let msgOption; let msgOption;
if (this.props.showReadReceipts) { if (this.props.showReadReceipts) {
const readAvatars = this.getReadAvatars(); const readAvatars = this.getReadAvatars();
msgOption = ( msgOption = readAvatars;
<div className="mx_EventTile_msgOption">
{ readAvatars }
</div>
);
} }
switch (this.props.tileShape) { switch (this.props.tileShape) {