Element-web: 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.