💭 Message bubble layout

[germain-gg]

Fixes element-hq/element-web#4635
Fixes element-hq/element-web#17773
Fixes element-hq/element-web#16220
Fixes element-hq/element-web#7687

Superseeds #6174
Requires element-hq/element-web#17856

I am still waiting on @matrix-org/design to provide certain colours and iron out a few details, but this is a fairly comprehensive early implementation of the bubble layout.

One of the big requirement I set for myself in that project was to keep the DOM structure untouched to help with maintainability. This is why you will see some order CSS properties thrown around. I am not so happy with having values like 999 or 9999, and I am thinking of introduce something like a z-index scale

🌞 Light theme

🌚 Dark theme

[germain-gg]

The diff in that file is slightly horrendous to look at.

The bottom line is to exclude a lot of styles that are applied for the Group and IRC layout to avoid doing many overrides in the Bubble layout`.

And everything that falls below this big .mx_EventTile:not([data-layout=bubble]) block are things that will remain the same regardless of the layout (the e2ee shields, avatar shapes, ...)

Very little code has been changed, it's mainly been reshuffled

[SimonBrandner]

A few thoughts on the design:

• The flair looks quite weird, though I don't remember how it looks normally
• In the case of Michael's name, it seems to be touching the bubble which doesn't feel right
• The hover effect looks more like a defect since it's not rounded and therefore doesn't match the rest of the app
• Also the positioning of the avatar, the bubble, the sender and the timestamp feels a bit weird to me. But that might be me not being used to it

[germain-gg]

The flair looks quite weird, though I don't remember how it looks normally

Definitely agree, hopefully they will soon be forgotten when spaces are finally taking over

The hover effect looks more like a defect since it's not rounded and therefore doesn't match the rest of the app

Still waiting on the design team on this one, there's a couple things that are not finalised. But the idea is to get a few people using it and detect where the layout does not quite work in a real life situation

[dbkr]

lgtm! Sorry for the delay in reviewing.

Noting for the record that this will need IRC layout to also be a real, supported feature before we de-labs this, awkwardly since IRC layout is currently more broken than previously (at least I'm assuming this doesn't change IRC layout itself)

[amshakal]

It's all coming together. 👯 A few thoughts:

1. I think the text alignment needs some work i.e. it might look better if the name of the sender is aligned with the message. And then if reactions are aligned to the text as well.
2. The read receipts will have to be in a gutter space of it's own, else there might be an overlap between avatar + read receipts if someone just sends one message.

[ShadowJonathan]

This is probably not the right place for this, but I have to; I absolutely love this design, I can only give it some nitpicks, but overall this design is simply, unequivocally, unabashedly amazing.

Kudos and love to those who designed and spearheaded this ❤️❤️

—-

Nitpick

My only nitpick (as mentioned) comes from the alignment of the middle of the avatar icon with the top border of the group of messages the user sent themselves.

Some alternatives I think would look better could be;

• Align the top of the avatar with the top of the message group vertically.
• Do the same design as the “left side”, and have the user avatar be on the top right corner of the message group
• Flip that last one on its head, and put it on the bottom right corner of the message group (on the last message)
  • This would lend itself to a design language that others are “beaming down” the messages, while you are “beaming up”, so to speak

[turt2live]

keywords because github is awful: message bubbles alternative labs

[ShadowJonathan]

Some feedback after trying out message bubbles;

Feedback

1. The background grey of the bubbles in dark mode is much too bright (personally), it's currently #394049, i personally recommend #2e3135 or the likes.

2. Using yellow highlight backgrounds turns out to be much more distracting and intrusive than i first thought, i recommend turning that to a greyscale color (#292a2d), or maybe a soft green-ish.

3. The composer feels disaligned with the timeline now, previously the left edge of the composer would correspond to the left edge of where messages would start on the timeline, it's disaligned a little now.

4. On that last note, reading on wide-screen isn't much readable right now, because the messages are placed on either far-right or far-left sides of the screen. Telegram solves this by offering an "adaptive layout for wide screens" option, which swaps all messages to one side if the screen gets wide enough;

5. Deleted messages currently don't look correct, idem ditto with
   status messages (i think they have too less top-and-bottom margins)

6. I think there's a bug with selection of messages and the message action buttons, see this recording;

message_bubble_bug-2021-07-15_10.35.10.mp4

7. Bubble messages also can get in the way if the message is way too short, i think they have to be re-imagined for such situations;

8. Double in-reply-to's look weird;

9. Single-emoji messages don't have the correct padding around all sides, like so;

10. Long messages overflow the sides when not given enough space, like so;

11. Would it be possible to "set back" user-sent messages and their avatars, so that the message sits against the read-receipt area, with the avatar hovering above it?

Turning this

Into this;

(If there's a better time and place to be giving this feedback, please let me know)

[robintown]

Would also close element-hq/element-web#7687