Increase vertical density of new room list

[turt2live]

We've added about 12px per tile, which is fairly significant.

[niquewoodhouse]

There's definitely some opportunity to increase the vertical density, but we probably won't be able to match the previous density.

We've added features like "message preview" that need a larger tile avatar to group the information.

Long term, to satisfy the need for an incredibly compact room list, we could try more settings/display settings that have density options like "normal" and "compact"

[turt2live]

Blocked on UI refresh

[Felthry]

Why not just give an option to go back to the old layout? I don't use message previews and would be perfectly happy to have it back how it was.

The lack of customizability of the interface like this is more than just a nice-to-have; it's an actual accessibility issue and I would like to have it marked as more important than "nice to have (time permitting)".

[turt2live]

@Felthry maintaining two room lists is nearly impossible. We're working on this issue, and it's important not to draw conclusions from internal tracking boards which won't make sense outside of the immediate team working on the feature.

[rda0]

I would like an option to have a high density room list (maybe even twice as dense). Having smaller avatars and no previews would be a totally acceptable consequence.

[dreadnaut]

I would inject some custom CSS to increase vertical density, but the height of the panels is based on the expectation of a 32px height, so this leave large chunks of empty space. I'll post it for reference though, since it gives ~30% more rows while fitting the existing look.

Looking forward to an updated room list! 👍

.mx_RoomTile2 {
  padding: 0 0 0 4px;
}

.mx_BaseAvatar_initial,
.mx_BaseAvatar_image {
  height: 24px !important;
  width: 24px !important;
}

.mx_BaseAvatar_initial {
  line-height: 24px !important;
  font-size: 13.7px !important;
}

.mx_RoomTile2_name {
  font-size: 0.8em !important;
}

[Cerothen]

While I can appreciate that the priority is fully at the discretion of the developers I would like to suggest bumping up this and simultaneously the https://github.com/vector-im/riot-web/issues/14538 issue about letterboxs to ASAP. These two changes have essentially killed the client for me and I have reverted to 1.6.8 (the last version branded "Riot") as I find the changes beyond frustrating for my primary Matrix client.

[eternaleye]

I filed #14704 without realizing this already existed, but the info there seems useful to this discussion. First, I have a somewhat different userstyle that compacts the room list rather more strongly than what's been posted, though it presumes message previews are turned off:

    /* The room list entries are way too damn big */
    section#matrixchat .mx_LeftPanel .mx_RoomList .mx_RoomTile {
        margin-bottom: 0 !important;
        padding: 1px !important;
    }

    /* Part of this is due to the enormous avatars */
    section#matrixchat .mx_LeftPanel .mx_RoomList .mx_RoomTile .mx_DecoratedRoomAvatar .mx_BaseAvatar_initial,
    section#matrixchat .mx_LeftPanel .mx_RoomList .mx_RoomTile .mx_DecoratedRoomAvatar .mx_BaseAvatar_image {
        width: 16px !important;
        height: 16px !important;
        font-size: 10.4px !important;
        line-height: 16px !important;
    }

    /* Part of this is due to slightly oversized buttons */
    section#matrixchat .mx_LeftPanel .mx_RoomList .mx_RoomTile .mx_RoomTile_menuButton,
    section#matrixchat .mx_LeftPanel .mx_RoomList .mx_RoomTile .mx_RoomTile_notificationsButton {
        width: 16px !important;
        height: 16px !important;
    }

This results in something more like

Then, to fix the resizer to recognize the new size of rooms, I ran fix-room-list-height.js (courtesy of @turt2live), though in order to make it run on https://develop.element.io I had to make some tweaks (posted in a comment there). This results in something more like

There's still a certain amount of wasted space at the bottom of each room sublist, but hopefully this is useful to others here.

[Felthry]

@eternaleye This looks very much like what I would like to have; is there any information on how the less computer-knowledgeable of us might use this?

[eternaleye]

@Felthry Sadly, no, not really - that would require something like packaging all of this up into a Stylus userstyle for the CSS (which, admittedly, I've done here, though it does rather more than just the room list) and a Greasemonkey userscript for the javascript (which I briefly tried to do just now, but which didn't work). Even then it wouldn't be especially easy to use unless someone went further and did a proper WebExtension out of it.

[altsalt]

What about the option to get rid of room icons? This should reduce the vertical rhythm quite a bit.

[Cerothen]

Some people like me use the icons exclusively. I keep that panel minimized to it's narrowest form which only shows the icons.

[niquewoodhouse]

Gmail, if anyone uses it, has a settings icon that shows a lot of customizable options for the display which lets people optimize their UI for their specific use. Maybe there's something similar Element could introduce that gives people more control over things.

[niquewoodhouse]

That kind of customisation translates to the settings > appearance menu as something like this:

[t3chguy]

Given the heading is "Sidebar" will this apply to both left and right panels?

[niquewoodhouse]

I'm not sure tbh, maybe the naming isn't right.

It might make sense more holistically to not have a sidebar/room list specific appearance option and create a general Density option that has 3 levels that impact the room list and timeline. This could replace some of the hidden things in "advanced" like "modern layout" and help users with lots of rooms/the need for a generally compact view get it quicker.

The compact view could be something like @eternaleye's suggestion, the medium view could be something like @dreadnaut's proposal.

[weeman1337]

It might make sense more holistically to not have a sidebar/room list specific appearance option and create a general Density option that has 3 levels that impact the room list and timeline.

If these three options are a quick high level way to set some "advanced" options it is okay. I would like to

• have a tight packed room list holding my 25256 rooms
• but a less dense message view

[callahad]

Riffing off of @eternaleye's comment, adding the following to that stylesheet gets rid of the wasted space for me:

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
    flex: none;
}

.mx_RoomSublist .mx_RoomSublist_resizeBox {
    height: unset !important;
    max-height: unset !important;
    min-height: unset !important;
}

.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
    display: none;
}

Note that this also hides the resize handles -- I don't use them, and they go all wonky with this change. The upside is that I don't need to inject any javascript; it all seems to just work with pure CSS tweaks.

[weeman1337]

I asked in #element-dev:matrix.org about this.
As suggested by @jryans the results in this ticket:

@tulir would prefer adding it to the room list options:

I could imagine two options for this:

a) Compact mode if "Show preview of messages" is not checked

b) A radio ~"Item style" with three options:

• Compact → smaller icons, lower height of the items
• Comfortable → like the current without message preview
• Show preview of messages → like the current with message preview

I would like to help here coding that. Waiting for feedback of the design team.

[weeman1337]

A month later :) I still would like to help here. But somebody told me I should wait on feedback of the design team. Who is this and how can I get in touch with them? @callahad could you provide info about that?

[dannycolin]

@weeman1337 try asking in #element-design:matrix.org.

[weeman1337]

Thinking more about this maybe there should not be another option for that. The reason is: Keep the functionality simple. Why not shrinkg the avatars if "message preview" is not selected? If "message preview" use the current view?

[Felthry]

I value customizability. Maybe have it as some kind of "advanced setting" only visible after turning on "advanced mode" or something?

[jryans]

I would like to help here coding that. Waiting for feedback of the design team.

I've tried nudging them again, so we'll see. Available Design bandwidth is low at the moment, so it may take some time.

[niquewoodhouse]

Hi @weeman1337 : )

I'm one the designers working on Element and can share with you, if helpful, a proposal I've got to solve the issue that has scope to be useful throughout the product, and is safe for a first iteration. I've tried to explain things a bit below, and respond to earlier suggestions - let me know if anything needs clarifying/help is needed, I'll be available, thank you 👍 Thoughts are always welcome too, of course.

Put density as a setting in appearance

In this proposal I have 3 density options, but it could start with just two - default and compact. I used the styling of the theme options for consistency.

Benefits

This would mean that density could be controlled from one place in the product for each user. Element is made up of lots of lists - content in the timeline, rooms in your room list, members in the room members list etc. If we start with a bespoke place to edit density just on the room list options, we'll likely face some issues later on when people want to make their timeline denser, or the members list denser - we'd have to place bespoke options in lots of places which could make it quite complicated for most users and just open things up to a lot of complexity from the start.

By starting with density being in one logical place, others can build on it and propose more density tweaks (like in the timeline for example, reducing margins/padding).

Also, the natural place new users would expect to control their appearance settings would be within the appearance section of settings. So, whatever solution we came to, that would be the place new people might expect it to live. This proposal doesn't rule out in the future adding the option to tweak things in context. It's just saying, as a first iteration, having it in appearance settings makes sense as a safe, sane foundation to build on. Maybe a future idea is to put other existing appearance things here too, but that could be in the future.

Why not shrinkg the avatars if "message preview" is not selected? If "message preview" use the current view?

I personally really, really like that idea (and the idea of keeping functionality simple). But, like all the solutions for tweaking this per room list section, it has a few issues as a first iteration.

1. The message preview is controlled per room list section. So, as an example, you could have it turned on for favourites & people, but off for rooms. Because of that, changing the size of avatars and the margins around them for just the sections with it is turned off would make quickly scanning the overall list a bit harder, as everything would align differently. Even if it's slightly different, it will most likely negatively impact user's ability to scan the list - which could make it very frustrating over time.

2. Slightly tweaking the size of avatars and the margins around them isn't going to cut it for people who want a really dense view - there's a few comments in this issue where we can see people wanting a really dense view. They deserve the option of a view that lets them experience all those lists in Element closer to the way they would want to.

So, ultimately, I think doing things on the room list sections from the start would:

• Make it harder to add/manage other density tweaks in the future
• Either make the list harder to scan for everyone, or not be enough for people looking for a dense view

Compact view

I've included some non-room list things in the view:

• Much smaller avatars in the list
• Message preview disabled
• Much less margin between messages on the timeline
• Much less margin between communities in the communities panel (far left) Mockup link

The room list section options could include a disabled message preview option, with a link to settings. The disabled message preview option uses opacity, like the disabled style of light + dark theme in appearance settings when match system theme is picked.

Comfortable view

I've included some non-room list things in the view:

• Smaller avatars in the list
• Less margin between messages on the timeline
• Less margin between communities in the communities panel (far left)

Hope this helps, if I can be more help, please feel free to reach out.

[weeman1337]

Thanks @niquewoodhouse that is a very detailed explanation.

Overall I would also favour having the option in a single place.
This makes it more consistent overall (as you have described).

but it could start with just two - default and compact.

This approach is more feasible I think. I would also start working on this soon based on the mockups and explanations above. They are solving my problem (the room list taking too much space) and I pretty much agree with the proposals.

[RedAuburn]

is there any progress on this?

[su-ex]

You can use SchildiChat, which has this implemented: https://matrix.org/blog/2021/10/08/this-week-in-matrix-2021-10-08#schildichat Feel free to pick the changes and make this into a PR for Element.