New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

compact layout tweaks #4363

Open
uhoreg opened this Issue Jun 19, 2017 · 21 comments

Comments

Projects
None yet
10 participants
@uhoreg
Copy link
Member

uhoreg commented Jun 19, 2017

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

  • decrease avatar size (suggested at #4132 (comment))
  • decrease font size of info events (and MELS) (suggested at #4317)
  • reduce spacing between paragraphs (suggested at #4363 (comment))
  • reduce space above lists (suggested at #4363 (comment))
  • 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 #4363 (comment))
@tidux

This comment has been minimized.

Copy link

tidux commented Jun 20, 2017

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

This comment has been minimized.

Copy link

Krzypis commented Jun 23, 2017

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

@uhoreg

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 23, 2017

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

This comment has been minimized.

Copy link

Krzypis commented Jun 23, 2017

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

This comment has been minimized.

Copy link

MightyCreak commented Jun 23, 2017

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:

capture d ecran 2017-06-23 a 09 01 49

  1. Reduce space above a list (*):

capture d ecran 2017-06-23 a 09 05 25

@uhoreg

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 24, 2017

@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

This comment has been minimized.

Copy link

MightyCreak commented Jun 24, 2017

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

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 24, 2017

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

This comment has been minimized.

Copy link

MightyCreak commented Jun 25, 2017

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

This comment has been minimized.

Copy link
Member Author

uhoreg commented Jun 25, 2017

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.

uhoreg added a commit to uhoreg/riot-web that referenced this issue Jul 24, 2017

tweak compact theme
- add some comments
- decrease size of info events and MELS (vector-im#4363.2)
- reduce spacing between paragraphs, lists, etc (vector-im#4363.3 & 4)

Signed-off-by: Hubert Chathi <hubert@uhoreg.ca>
@grahamperrin

This comment has been minimized.

@jfrederickson

This comment has been minimized.

Copy link

jfrederickson commented Aug 2, 2017

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

screenshot_2017-08-02_14-48-43

@t3chguy

This comment has been minimized.

Copy link
Collaborator

t3chguy commented Aug 2, 2017

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

@jfrederickson

This comment has been minimized.

Copy link

jfrederickson commented Aug 2, 2017

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

@erdnaxeli

This comment has been minimized.

Copy link

erdnaxeli commented Sep 21, 2017

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

@uhoreg

This comment has been minimized.

Copy link
Member Author

uhoreg commented Sep 21, 2017

@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

This comment has been minimized.

Copy link

tidux commented Sep 21, 2017

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

This comment has been minimized.

Copy link
Member Author

uhoreg commented Sep 21, 2017

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

This comment has been minimized.

Copy link
Member Author

uhoreg commented Dec 28, 2017

created #5895 to track the request for keeping user names on the same line as messages

@oskarrough

This comment has been minimized.

Copy link

oskarrough commented Dec 30, 2017

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

This comment has been minimized.

Copy link

tidux commented Feb 1, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment