Further improve replies

[SimonBrandner]

Main issue which this fixes element-hq/element-web#19074
Fixes element-hq/element-web#18194
Fixes element-hq/element-web#18027
Fixes element-hq/element-web#19179

---

Peek.2021-10-16.16-55.mp4

---

Here's what your changelog entry will look like:

✨ Features

• Further improve replies (#6396). Fixes Improve replies  element-hq/element-web#19074, New-style reply design is harder to grok element-hq/element-web#18194 indicate replied-to messages are clickable in new reply UI element-hq/element-web#18027 and Replies to images with long names overflow the timeline element-hq/element-web#19179.

Preview: https://pr6396--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[robintown]

They're looking even better! 😍 Some thoughts:

The avatar is slightly off-center:

"In reply to themselves" overall sounds fine, but it feels weird when the message is coming from you. Maybe it should say "In reply to yourself" for that special case?

And while this does significantly improve the style of the "In reply to" bit to make it feel more clickable, I don't feel that it totally resolves element-hq/element-web#7159, since the overall layout is still confusing to read. Perhaps it would be clearer if the "In reply to" text were just replaced with "Expand thread"?

[SimonBrandner]

And while this does significantly improve the style of the "In reply to" bit to make it feel more clickable, I don't feel that it totally resolves element-hq/element-web#7159, since the overall layout is still confusing to read. Perhaps it would be clearer if the "In reply to" text were just replaced with "Expand thread"?

Yeah, "Expand thread" sounds so much better!

[robintown]

For some reason avatar alignment is still broken for people without avatars:

[robintown]

Also closes element-hq/element-web#18194 nevermind, they added additional concerns to the issue

[robintown]

The display names not being in bold looks a little strange to me IMO

[robintown]

Some more design comments:

The hover effect doesn't look great in light mode, and I wonder if there's something other than a brightness change that might look better in general. I feel like the hover effect, if any, should be some kind of background color change, but I get that that's tricky since there's already a hover effect on the overall event tile, sooo idk 🤷‍♀️

Also, the quoted messages appear to have sliiightly more padding on the bottom than on the top, even though they technically are symmetrical just going by the CSS, so that might benefit from some tuning

[SimonBrandner]

The hover effect doesn't look great in light mode, and I wonder if there's something other than a brightness change that might look better in general. I feel like the hover effect, if any, should be some kind of background color change, but I get that that's tricky since there's already a hover effect on the overall event tile, sooo idk

Yeah, it's not perfect, but I don't know how to solve it either. Let's if design has any ideas

Also, the quoted messages appear to have sliiightly more padding on the bottom than on the top, even though they technically are symmetrical just going by the CSS, so that might benefit from some tuning

Hopefully, that's better now

[robintown]

Padding looks good now, though the line height should be loosened up a little bit since descenders on certain letters get cut off now:

(something like line-height: $font-18px looks reasonable to me)

[robintown]

Also I had some inspiration for the hover effect: since the quoted message now has blockquote coloring, what if the effect of hovering over it was to remove that blockquote coloring, and return it back to the normal text color? I also tried out replacing the brightness(1.5) on the "Expand text" button with opacity(0.65). These hover effects are of course a bit more subtle than the current brightness change you have, but I personally think the subtlety works out really well:

Unhovered

"Expand thread" hovered

Quoted message hovered

[robintown]

I also wonder if replies to images could be improved while we're here, as they currently look a bit weird.

My initial thoughts are, since the filename and filesize labels were removed recently when the download button for images got moved, could we just get rid of the "unknown.png (x KB)" text entirely and unify this with the rest of the reply layouts?

[janogarcia]

I'll refer to the issues listed on #19074 for easier reference:

The copy is a bit weird when replying to oneself (In reply to ) - we can use Expand replies
The In reply to copy is super confusing - we can use Expand replies
Reply threads look confusing - change the copy as mentioned above and add a hover effect to Expand replies

I would suggest not changing the rendering of the reply chain label in this PR. Let's keep it following the In reply to {name} format for now, as it's more consistent with other platforms (iOS, Android), offers a bit more context than "Expand replies", and doesn't get into conflict with the label for the "Expand replies/quotes" contextual action.

New-style reply design can be harder to grok - make the messages being replied to a bit light/grayer

Use Compound's secondary color (#737D8C) instead of lower-contrast tertiary color.

We should indicate replied-to messages are clickable in new reply UI - add a hover effect

Keep the hover effect for text, but add a really short transition to text color: color ease 0.15s

Replies don't have an avatar - add a small avatar

• Change avatar size to 16px.
• Change .mx_ReplyTile > a gap from 4px to 2px.

The Edited sign doesn't seem to be necessary in replies - we can remove it

I don't think we're rendering it anymore. Let me know otherwise! 👍

[robintown]

@janogarcia Here's what it looks like now:

Modern layout	Bubble layout

[janogarcia]

@robintown Some further tweaks after testing it across more contexts:

Let's give "In reply to" (.mx_ReplyChain_show) the same color and hover treatment as the quotes.

That is, secondary text color by default that transitions to primary color on hover. This way the actual message always stands out against the quoted message in the visual hierarchy.

[robintown]

@janogarcia Done, please take another look when you get the chance

[janogarcia]

@robintown Thanks for updating it!