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

Commit 6b3098d

Browse files
SimonBrandnerrobintown
SimonBrandner
and
robintown
authored
Further improve replies (#6396)
* Give reply tile an avatar Signed-off-by: Šimon Brandner <[email protected]> * Improve `in reply to` Signed-off-by: Šimon Brandner <[email protected]> * Drop `In reply to` for `Expand thread` Signed-off-by: Šimon Brandner <[email protected]> * Fix avatar alignment Signed-off-by: Šimon Brandner <[email protected]> * Fix default avatar alignment Signed-off-by: Šimon Brandner <[email protected]> * Simplifie code Signed-off-by: Šimon Brandner <[email protected]> * Simplifie some more code Signed-off-by: Šimon Brandner <[email protected]> * Make replies lighter Signed-off-by: Šimon Brandner <[email protected]> * Give replies a hover effect Signed-off-by: Šimon Brandner <[email protected]> * Revert changes to sender profile in replies Signed-off-by: Šimon Brandner <[email protected]> * Improve padding Signed-off-by: Šimon Brandner <[email protected]> * Increase line height of replies to keep descenders from being cut off, and generally give them more room to breathe. Signed-off-by: Robin Townsend <[email protected]> * Replace reply hover effect with a color change Signed-off-by: Robin Townsend <[email protected]> * Replace expand thread hover effect with an opacity change Signed-off-by: Robin Townsend <[email protected]> * Simplify image and sticker reply designs Signed-off-by: Robin Townsend <[email protected]> * Revise file and deleted message padding to match new reply layout Signed-off-by: Robin Townsend <[email protected]> * Remove unneeded CSS Since the download button for files got moved out of the timeline and into the message action bar, hiding it manually is no longer necessary. Signed-off-by: Robin Townsend <[email protected]> * Hide edited indicator from replies There are a few reasons for this: it adds visual noise to what is meant to be a brief preview, it can sometimes add an extra line to the reply preview, and clicking on it inside a reply was broken due to the stacking of event listeners. Signed-off-by: Robin Townsend <[email protected]> * Fix i18n Signed-off-by: Robin Townsend <[email protected]> * "Expand thread" -> "Expand replies" Signed-off-by: Šimon Brandner <[email protected]> * Add a missing import Signed-off-by: Šimon Brandner <[email protected]> * Remove unused import Signed-off-by: Šimon Brandner <[email protected]> * Remove unused import Signed-off-by: Šimon Brandner <[email protected]> * Use `this.state` Signed-off-by: Šimon Brandner <[email protected]> * Fix sender profile confusion Signed-off-by: Šimon Brandner <[email protected]> * Implement suggested changes * Make "In reply to" the same color as reply previews Signed-off-by: Šimon Brandner <[email protected]> Signed-off-by: Robin Townsend <[email protected]> Co-authored-by: Robin Townsend <[email protected]>
1 parent ad090ac commit 6b3098d

File tree

4 files changed

+67
-63
lines changed

4 files changed

+67
-63
lines changed

‎res/css/views/elements/_ReplyChain.pcss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,50 +16,51 @@ limitations under the License.
1616

1717
.mx_ReplyChain {
1818
margin: 0 0 $spacing-8 0;
19-
padding: 0 10px; /* TODO: Use a spacing variable */
20-
border-left: 2px solid $accent;
21-
border-radius: 2px;
19+
padding-left: 10px; // TODO: Use a spacing variable
20+
border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
21+
border-radius: 2px; // TODO: Use a spacing variable
2222

2323
.mx_ReplyChain_show {
2424
&.mx_AccessibleButton_kind_link_inline {
25-
color: unset;
2625
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
26+
color: $secondary-content;
27+
transition: color ease 0.15s;
2728

2829
&:hover {
29-
color: $links;
30+
color: $primary-content;
3031
}
3132
}
3233
}
3334

3435
&.mx_ReplyChain_color1 {
35-
border-left-color: $username-variant1-color;
36+
--username-color: $username-variant1-color;
3637
}
3738

3839
&.mx_ReplyChain_color2 {
39-
border-left-color: $username-variant2-color;
40+
--username-color: $username-variant2-color;
4041
}
4142

4243
&.mx_ReplyChain_color3 {
43-
border-left-color: $username-variant3-color;
44+
--username-color: $username-variant3-color;
4445
}
4546

4647
&.mx_ReplyChain_color4 {
47-
border-left-color: $username-variant4-color;
48+
--username-color: $username-variant4-color;
4849
}
4950

5051
&.mx_ReplyChain_color5 {
51-
border-left-color: $username-variant5-color;
52+
--username-color: $username-variant5-color;
5253
}
5354

5455
&.mx_ReplyChain_color6 {
55-
border-left-color: $username-variant6-color;
56+
--username-color: $username-variant6-color;
5657
}
5758

5859
&.mx_ReplyChain_color7 {
59-
border-left-color: $username-variant7-color;
60+
--username-color: $username-variant7-color;
6061
}
6162

6263
&.mx_ReplyChain_color8 {
63-
border-left-color: $username-variant8-color;
64+
--username-color: $username-variant8-color;
6465
}
6566
}

‎res/css/views/rooms/_ReplyTile.pcss‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@ limitations under the License.
2727
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
2828
}
2929

30-
.mx_MFileBody {
31-
.mx_MFileBody_info {
32-
margin: 5px 0;
33-
}
34-
35-
.mx_MFileBody_download {
36-
display: none;
37-
}
38-
}
39-
4030
> a {
4131
display: flex;
4232
flex-direction: column;
4333
text-decoration: none;
44-
color: $primary-content;
34+
color: $secondary-content;
35+
transition: color ease 0.15s;
36+
gap: 2px;
37+
38+
&:hover {
39+
color: $primary-content;
40+
}
41+
}
42+
43+
.mx_RedactedBody {
44+
line-height: $font-18px;
4545
}
4646

4747
.mx_RedactedBody,
@@ -52,13 +52,14 @@ limitations under the License.
5252
&::before {
5353
height: 13px;
5454
width: 13px;
55-
top: 5px;
55+
top: 3px;
5656
}
5757
}
5858

5959
/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
6060
.mx_EventTile_content {
6161
$reply-lines: 2;
62+
$line-height: $font-18px;
6263

6364
text-overflow: ellipsis;
6465
display: -webkit-box;
@@ -70,8 +71,8 @@ limitations under the License.
7071
font-size: $font-14px !important; /* Override the big emoji override */
7172
}
7273

73-
/* Hide line numbers */
74-
.mx_EventTile_lineNumbers {
74+
// Hide line numbers and edited indicator
75+
.mx_EventTile_lineNumbers, .mx_EventTile_edited {
7576
display: none;
7677
}
7778

@@ -101,7 +102,26 @@ limitations under the License.
101102
padding-top: 0;
102103
}
103104

104-
.mx_DisambiguatedProfile {
105-
line-height: $font-17px;
105+
.mx_ReplyTile_sender {
106+
display: flex;
107+
align-items: center;
108+
gap: 4px;
109+
110+
.mx_DisambiguatedProfile {
111+
font-size: $font-14px;
112+
113+
display: inline-block; // anti-zalgo, with overflow hidden
114+
padding: 0;
115+
margin: 0;
116+
117+
// truncate long display names
118+
overflow: hidden;
119+
white-space: nowrap;
120+
text-overflow: ellipsis;
121+
}
122+
123+
.mx_BaseAvatar {
124+
line-height: 14px; // To match size
125+
}
106126
}
107127
}

‎src/components/views/messages/MImageReplyBody.tsx‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,9 @@ limitations under the License.
1515
*/
1616

1717
import React from "react";
18-
import { EventType } from "matrix-js-sdk/src/@types/event";
1918

2019
import MImageBody from "./MImageBody";
21-
import { presentableTextForFile } from "../../../utils/FileUtils";
2220
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
23-
import SenderProfile from "./SenderProfile";
24-
import { _t } from "../../../languageHandler";
2521

2622
const FORCED_IMAGE_HEIGHT = 44;
2723

@@ -34,34 +30,16 @@ export default class MImageReplyBody extends MImageBody {
3430
return children;
3531
}
3632

37-
// Don't show "Download this_file.png ..."
38-
public getFileBody(): string {
39-
const sticker = this.props.mxEvent.getType() === EventType.Sticker;
40-
return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
41-
}
42-
43-
protected getBanner(content: IMediaEventContent): JSX.Element {
44-
return null; // we don't need a banner, nor have space for one
45-
}
46-
4733
render() {
4834
if (this.state.error) {
4935
return super.render();
5036
}
5137

5238
const content = this.props.mxEvent.getContent<IMediaEventContent>();
5339
const thumbnail = this.messageContent(this.state.contentUrl, this.state.thumbUrl, content, FORCED_IMAGE_HEIGHT);
54-
const fileBody = this.getFileBody();
55-
const sender = <SenderProfile
56-
mxEvent={this.props.mxEvent}
57-
/>;
5840

5941
return <div className="mx_MImageReplyBody">
6042
{ thumbnail }
61-
<div className="mx_MImageReplyBody_info">
62-
<div className="mx_MImageReplyBody_sender">{ sender }</div>
63-
<div className="mx_MImageReplyBody_filename">{ fileBody }</div>
64-
</div>
6543
</div>;
6644
}
6745
}

‎src/components/views/rooms/ReplyTile.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import MImageReplyBody from "../messages/MImageReplyBody";
2929
import { isVoiceMessage } from '../../../utils/EventUtils';
3030
import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
3131
import MFileBody from "../messages/MFileBody";
32+
import MemberAvatar from '../avatars/MemberAvatar';
3233
import MVoiceMessageBody from "../messages/MVoiceMessageBody";
3334
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
3435
import { renderReplyTile } from "../../../events/EventTileFactory";
@@ -106,7 +107,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
106107
render() {
107108
const mxEvent = this.props.mxEvent;
108109
const msgType = mxEvent.getContent().msgtype;
109-
const evType = mxEvent.getType() as EventType;
110+
const evType = mxEvent.getType();
110111

111112
const {
112113
hasRenderer, isInfoMessage, isSeeingThroughMessageHiddenForModeration,
@@ -133,17 +134,21 @@ export default class ReplyTile extends React.PureComponent<IProps> {
133134
}
134135

135136
let sender;
136-
const needsSenderProfile = (
137-
!isInfoMessage
138-
&& msgType !== MsgType.Image
139-
&& evType !== EventType.Sticker
140-
&& evType !== EventType.RoomCreate
141-
);
142-
143-
if (needsSenderProfile) {
144-
sender = <SenderProfile
145-
mxEvent={mxEvent}
146-
/>;
137+
const hasOwnSender = isInfoMessage || evType === EventType.RoomCreate;
138+
if (!hasOwnSender) {
139+
sender = (
140+
<div className="mx_ReplyTile_sender">
141+
<MemberAvatar
142+
member={mxEvent.sender}
143+
fallbackUserId={mxEvent.getSender()}
144+
width={16}
145+
height={16}
146+
/>
147+
<SenderProfile
148+
mxEvent={mxEvent}
149+
/>
150+
</div>
151+
);
147152
}
148153

149154
const msgtypeOverrides: Record<string, typeof React.Component> = {

0 commit comments

Comments
 (0)