Full-width mail list

[marcoambrosini]

Feature Request

As a Nextcloud Mail user I may prefer to see as much information about a messages/thread as possible before I open it. The current view, for example, shows only a small part of the subject and preview text:

Describe the solution you'd like

Allow me to switch to a full-width message/thread list. In other words, the three column design (nav + list + content) becomes two column: nav + list or nav + content. The user will see the list. When they navigate to a message/thread, the content shows.

To switch between the views we need a three way button or actions menu. This button is places next to the button for advanced search.

References

This is the trend in some of the major email apps as UX people realize that the idea of multitasking was a bit overrated.

Product	Screenshot
Hey
Gmail
Spark Mail

Implementation

Right now Mail uses the following structure:

<NcContent>
  <Navigation />
  <AppContent>
    <div slot="list">
      <SearchMessages />
      <AppContentList>
        <Mailbox />
      </AppContentList>
    </div>
    <AppContentDetails />
  </AppContent>
</NcContent>

Ideally, we can keep the structure as-is, but enhance AppContent and ListItem to work with one or two columns:

List + content	List only	Content only
```html ```	```html ```	```html ```

Long code snipped short, we don't control the rendering, we just tell AppContent and ListItem the layout to render.

This gives us the following advantages 1) We do not have to rip apart the ListItem with deep selectors or write a completely new component. 2) The new layouts streamlines mobile view with desktop view. 3) Other apps can use this too, e.g. to offer a better mobile view or a layout switch, if desired. 4) It will be easy to implement https://github.com/nextcloud/mail/issues/8309

Challenges

• The table(-like) structure of AppContentList and ListItem for the list-only mode and potential wrapping components between (currently Mailbox, EnvelopeList and transition)

[dugite-code]

I used to do fix this with CSS forcing a horizontal layout. Unfortunately this no longer really works ~well~ at all. That said this could be added to the app as the splitpanes supports changing the pane orientation out of the box: https://antoniandre.github.io/splitpanes/#change-direction

My previous issue regarding this: https://github.com/nextcloud/mail/issues/367

[marcoambrosini]

Another argument for having this view and making it default is how tall emails have actually gotten over time. My 16-inch laptop fits only a handful. The situation worsens if we use tags. On top of the usability issue, I think this elements just look ugly and disproportionate.

With all that space taken up, I think it's unacceptable that we're truncating subjects over 4-5 words

If we adopt full-width mail elements, we'll be able to use 1 or 2 line tops elements and fit everything in there without wrapping

ref: current state

[HLFH]

That'd be awesome. That would make life easier for people migrating from Google Workspace to Nextcloud, and being too much used to the Gmail UI.

[GretaD]

@nextcloud/designers I would like to start working on this asap, please add it for review on your backlog and please send me the mockups/insights when you have them :)

[nimishavijay]

So we did a first review of this and here's what we have so far :)

Things we know for sure:

• [ ] Full width inbox, clicking on a row opens the message in a full content view
• [ ] Each row will have: read indicator, avatar, sender, subject, body, tags, date (or whatever is there on the right side, for example the "Message could not be sent" indicator)
• [ ] Sender avatar in a smaller size (32px), and next column is the sender
• [ ] Next column has the subject and body of the letter, separated by a middle dot symbol
• [ ] The color and formatting of sender, subject, body and date/right side content remains the same as reading pane view
• [ ] Hover feedback can show the checkmark, which allows for easier selection
• [ ] Switching between the 2 views is through a button on the top
• [ ] On mobile the user shouldn't be allowed to switch between the 2 views
• [ ] Width of the columns
  • [ ] Sender column: fixed width of 200px
  • [ ] Subject column: takes 100% of remaining space after sender and body columns, ellipsize on overflow
  • [ ] Body column: minimum width of 200px, ellipsize on overflow (eg. very long subject)

Things that are still up for discussion:

• [ ] Position of unread indicator: Unread indicator can be either on the left like in the screenshot, or on the right side, on the left of the date
• [ ] Actions in the space on top: We decided we don't want a full width search bar, which leaves a lot of space in the top bar which can be used, but it's still a question as to what to fill that space with
• [ ] Placement of the search bar: We are not sure if the search bar is on the left like in the screenshot or on the right
• [ ] placement of the checkmark on hover: We can replace the unread indicator with a checkmark like in the screenshot, or alternatively it could also be like an overlay on the avatar

Will share more info as we confirm, but what do you think about the first version? :) Also pinging @jancborchardt and @szaimen for additional feedback :)

Edit: updated for width of different columns

[GretaD]

Nice, thanks a lot @nimishavijay, i will start looking into it asap, please if you can send me a mockup that fits the description, would be nice, but this is not a blocker :)

[jancborchardt]

Position of unread indicator: Unread indicator can be either on the left like in the screenshot, or on the right side, on the left of the date

Maybe on the left of the date is nicer so it’s more consistent with the other narrower list view.

Actions in the space on top: We decided we don't want a full width search bar, which leaves a lot of space in the top bar which can be used, but it's still a question as to what to fill that space with

The view toggle can actually go into the global settings in the bottom left (modal), so no icon necessary for that here. Also because we have no space for that in the other views.

Placement of the search bar: We are not sure if the search bar is on the left like in the screenshot or on the right

Left is best as the in-app search tends to be to the left in other views.

placement of the checkmark on hover: We can replace the unread indicator with a checkmark like in the screenshot, or alternatively it could also be like an overlay on the avatar

Going back to point 1, if the unread indicator is on the right then we can replace the avatar with checkmark on hover/focus.

[ChristophWurst]

@nimishavijay right now desktop view has a navigation toggle allowing users to hide/show the navigation sidebar. It is always visible. On mobile the users see a navigation toggle when the message list is visible. The toggle disappears when a message is shown. A new toggle is added: the back button.

When we are in the new full list view, click a message and land in the message view, we would need two buttons on desktop: toggle navigation and back. Is that ok design-wise?

[nimishavijay]

It is rather unconventional to have the back button and the menu button on the same row (I really couldn't find any other apps where we do that) but since the navigation contains the "New message" item as well as the different folders I'd say it's more important to show it. So yes it would be okay to show the navigation toggle as the leftmost item. next to it there can be the back button.

ccing @nextcloud/designers for more opinions

[jancborchardt]

@ChristophWurst @GretaD this is only about the new view where you either have the list or the mail open, right? Can we have a screenshot of the current state when a mail is opened in detail view? I would tend to place the back button either right next to the menu button or left next to the title of the mail, but would have to see how it looks like currently.

[GretaD]

@ChristophWurst @GretaD this is only about the new view where you either have the list or the mail open, right? Can we have a screenshot of the current state when a mail is opened in detail view?

if a user has the sidebar hidden, it will be shown like this

[Mer0me]

Is list view broken ? Since the last update of the Mail app (3.7.8 on NC 29.0.5) (I think), the list view is shrinked to the left

List view :

Vertical split :

[ChristophWurst]

@Mer0me can confirm. Would you mind creating a new ticket? @GVodyanov will look into this

[Mer0me]

Sure

[Mer0me]

https://github.com/nextcloud/mail/issues/10086