feat: compact view for mail layouts

[GretaD]

fixes #9713

[GretaD]

Hi @nimishavijay below are the draft screenshots of the new compact view for each of the layouts. Its not polished yet, but you can already review and let me know what do you think.

Vertical layout:

Horizontal layout:

List layout:

[nimishavijay]

Looks great! I know this is a draft, but some early feedback:

• the unread marker color should be primary and not main-text
• For the list view, I would argue we don't even need a compact view because the height of each element is only 48px, but if the point of the compact view is to hide the body and avatar, then we can do this.
  • remove avatar and body as stated
  • height of each item is 40px
  • show the full subject on the left instead of the right
  • but timestamp stays on the right
  • unread marker should be center aligned with the text (in your screenshot it is slightly more above)
  • The gap on either side of the unread marker should also be increased. in the screenshot I attached, the unread marker is aligned with the navigation toggle

End result will look something like this:

Important to note: the only way of selecting mails is via hovering over the avatar. if we remove that, selecting mails should be still be possible, for example by showing the checkbox in place of the unread marker on hover

[GretaD]

• the unread marker color should be primary and not main-text

The black bullet point in the beginning of the row its not an unread message, but a bullet point instead of the avatar :) I did it like that because thats how roundcube has it. I can do it primary, but maybe it will be confusing with the unread market that is shown in the right.

[nimishavijay]

The black bullet point in the beginning of the row its not an unread message, but a bullet point instead of the avatar :) I did it like that because thats how roundcube has it. I can do it primary, but maybe it will be confusing with the unread market that is shown in the right.

Oh I see! In that case it is definitely confusing 🙈 Would it be possible to show the multiselect checkbox all the time instead of the bullet?

It can be color-maxcontrast in order to make sure it doesn't stand out too much in the screen, and when you select an email, the checkbox-filled icon should be primary.
Nice to have: once you select an email they can all change to primary to show we "entered" into selection mode

What do you think? :)

[GretaD]

What do you think? :)

sounds good, should work well with the checkbox. I will try and let you know <3