Element-web: compact layout tweaks

[uhoreg]

Some suggestions that have come up regarding the compact timeline layout:

• [ ] decrease avatar size (suggested at https://github.com/vector-im/riot-web/pull/4132#issuecomment-305748215)
• [x] decrease font size of info events (and MELS) (suggested at https://github.com/vector-im/riot-web/issues/4317)
• [ ] reduce spacing between paragraphs (suggested at https://github.com/vector-im/riot-web/issues/4363#issuecomment-310660402)
• [x] reduce space above lists (suggested at https://github.com/vector-im/riot-web/issues/4363#issuecomment-310660402)
• [ ] allow user to select a compactness level, rather than just toggling compat layout on/off, and tighten up the line spacing a bit more and apply other tweaks at higher compactness levels (e.g. see https://github.com/vector-im/riot-web/issues/4363#issuecomment-310643335)

[tidux]

Another suggestion: remove the line break between the username and the comment. This brings it much closer to IRC, or to Slack's compact theme, for information density.

[Krzypis]

I would really like to see an option to turn off avatars.

[uhoreg]

I suspect that hiding avatars and/or putting the username on the same line as the comment would have to be separate options. Or perhaps change the compact layout from an on/off to allowing users to choose a level of compactness. @ara4n, any comments on this?

[Krzypis]

I created a separate issue for this: #4403.

I think this should be a separate option, if possible. And yeah as tidux said, I think the break should also disappear, or maybe another option to allow vertically aligning nicknames / contents. Boldifying the nickname would also be a nice addition. For most people that come from older clients it's really hard to distinguish at first glance who wrote what.

[MightyCreak]

I have two more tweaks to propose:

1. Reduce space height between paragraphs (\n\n), right now it looks too huge compared to the rest and it is wasting space:

1. Reduce space above a list (*):

[uhoreg]

@MightyCreak: You only need one "\n" to create a linebreak. Riot just represents a "\n\n" as a blank line, so I don't know if there's much we can do about that. Agreed about the list spacing, though, and I've added that to the list.

[MightyCreak]

I thought that was what Riot was doing, since it uses CommonMark, and the spec says:

A sequence of non-blank lines that cannot be interpreted as other kinds of blocks forms a paragraph.

Paragraph is a feature I use in Slack quite frequently. It's definitely a useful feature when explaining something a bit complex in just one message. And here, the fact that it's just replacing \n with line breaks shows how it's no fit for themes. Since the default theme is very spacious, the double line breaks isn't troubling because it feels like twice the height of a normal inter-line, but on any other theme, it just feels like a UI bug.

[uhoreg]

Testing it further, it seems like it does two different things depending on whether the markdown processing is triggered or not. If it is not, then it just inserts a double line break, but if it is, then uses paragraph elements. With the former, there isn't much that the compact layout can do, but with the latter, it can be changed.

[MightyCreak]

I'm trying to reproduce what you're explaining, but I only have double line breaks all the time 😕
https://matrix.to/#/!vfFxDRtZSSdspfTSEr:matrix.org/$14983636861272564wfnvA:matrix.org

[uhoreg]

https://matrix.to/#/!vfFxDRtZSSdspfTSEr:matrix.org/$14983637271272828rNHxb:matrix.org uses paragraphs. It still looks like double line breaks, because the CSS hasn't been changed, but at least it is possible to be changed.

It's unfortunate, though, that the rich text editor seems to use <BR>s instead of paragraphs (https://matrix.to/#/!vfFxDRtZSSdspfTSEr:matrix.org/$14983637651273065wxnJu:matrix.org), which will again cause problems with styling.

[grahamperrin]

Related

Adapt better to narrow screens · Issue #1633 · vector-im/riot-web

[jfrederickson]

The timestamp is hidden behind the avatar for emotes with the compact layout enabled:

[t3chguy]

@jfrederickson that happens without compact mode also, but worse, as the avatar is bigger you see even less of it :)

[jfrederickson]

Oh hah, so it does. It's been a while since I've had compact mode disabled. XD

[erdnaxeli]

To give an idea, here is a picture showing slack (not even with the compact them) and riot (compact theme enabled) side to side.

[uhoreg]

@erdnaxeli thanks for the comparison screenshot. Riot in general needs to work better in narrow windows (#1633).

The main differences between Slack and Riot that I can see are:

• slightly wider left sidebar. (though Riot can also collapse the left sidebar, and automatically does so when the window is narrow enough). Perhaps the width of the sidebar could decrease as the window width decreases.
• larger left and rigth margins on the timeline
• larger margin between avatar and chat messages (this is due to needing room for the encryption status icon)
• large amounts of space taken up on the right-hand-side due to read receipts. Of course, Slack doesn't have read receipts, so it doesn't need to set aside space for them. Although Riot has an option for hiding read receipts, there is an issue where the space is still taken up even when that option is selected (I can't find the issue for that right now). Though some people would still want read receipts, but have it take up less room. Some possible solutions are: decrease the number of read receipts shown (maybe make this a configuration option, or make it some function of screen width), put the read receipts somewhere else (where?), or hide the read receipts (and reclaim the space), but show them when you hover over the message (I think there is already an open issue to do this, but I'm failing to find it right now).
• large icons on the bottom that shrink the typing area. Perhaps these could be shrunk/hidden depending on screen width

Interestingly, Slack seems to have a larger-than-necessary right margin, which approximately corresponds to the space reserved in Riot for the "..." menu. It might be possible to get rid of that space in Riot, and allow the "..." menu to cover up part of the message, since it only appears on hover.

Some of these issues should probably be fixed as part of #1633, so that it would benefit both compact and non-compact users.

[tidux]

One thing Slack does better is not having avatars at all for the left hand sidebar. That results in a large increase in information density while still being usable.

[uhoreg]

Yup, that's kind of similar to hiding user avatars, which has been requested too. I think both hiding user avatars and hiding room avatars should be a separate configuration option, since some people would want avatars, and some people won't. Another possibility may be to shrink the room avatars (maybe to favicon size?), which would also mirror the request to shrink the user avatars.

[uhoreg]

created https://github.com/vector-im/riot-web/issues/5895 to track the request for keeping user names on the same line as messages

[oskarrough]

Hi, I created some compact user-styles for testing/inspiration here https://userstyles.org/styles/153285/riot-chat. Once this is merged I can hopefully delete those.

How do we continue? I'm eager to help with this.

I would recommend not doing a granular "compactness" setting. Having normal + compact should work for most users. Additionally, if spacings are defined in relation to the font-size, users can already adjust that.

[tidux]

There's a new Gtk/Rust client, Fractal, that pretty much nails the density that a compact theme should be going for if it had names and messages on the same lines. The biggest issue in Riot is probably that the line breaks are simply too big.

[dannycolin]

Hi, I created some compact user-styles for testing/inspiration here https://userstyles.org/styles/153285/riot-chat. Once this is merged I can hopefully delete those.

I did the same for both sidebars and the topbar (https://github.com/dannycolin/riot-compact)