🌈 Design fixes and polishing

[skjnldsv]

Message list

• alignement of avatar → fix at Fix layout of message list until we move to component #2126, component at Create ListItem component nextcloud-libraries/nextcloud-vue#616
• second row position → fix at Fix layout of message list until we move to component #2126, component at Create ListItem component nextcloud-libraries/nextcloud-vue#616
• delete animation: quicker, height left at the end, issue Mail deletion animation has issues with the menu popover #1761

App navigation

• Account menu: show "delete account"
• Do not show "loading" on the mail number stats
• Bottom left settings can use more spacing -> 👌 IMPROVE: navigation settings styling improvement (spacing etc.) #2219
• Clicking "New message" should close nav and go to composer. On narrow screens the nav stays open and it seems like nothing happens.
• When you zoom in, the nav hides but opening the hamburger menu doesn't show the nav → core issue, see Scaling issue with burger menu in split screen Scaling issue with burger menu in split screen server#17592

Menu button

• On narrow screens, the message view has both a menu button and a back arrow button. In this view only the back arrow button is necessary and it should be in place of the menu button.
• Menu button and "New message" placement → core issue, see Mobile menu toggle for navigation overlaps with content (especially in Mail & Contacts) https://github.com/nextcloud/server/issues/16934

Message view

• For HTML emails, the iframe doesn’t seem to fit the whole container -> 🐛 FIX: message iframe vertically doesn't fit the container / available space #2222
• In the heading of a mail below the subject, if a contact has only an email set but no name, the tooltip does not need to be shown. -> 👌 IMPROVE: don't show popover for addresses without a display name/label #2223
• no message emptycontent h2

Composer

• Composer overflowing right on mobile (because of attachment buttons, or from/to multiselects?) -> 🐛 FIX: various horizontal scrolling issues on mobile #2220
• Cc/Bcc maxcontrast and non-caps → pull request at Composer design improvements #2131
• Align text (image blocking, header and mail content) → pull request at Composer design improvements #2131
• Sticky bottom menu (send?), or have stuff at top of composer like Geary → pull request at Composer design improvements #2131
• Put attachement buttons into the three dot menu and make this menu more visible (circle/background?) -> 👌 IMPROVE: put composer attachment buttons into three dot menu #2226

Account settings

• Signature and Editor toggle at top
• Editor toggle should be radio
• Signature field should be bigger
• → All fixed in Improve design of account settings, move signature and writing mode up #2119

@jancborchardt

[jancborchardt]

Reformatted the list a bit, and will get to work on some of those. If anyone wants to contribute design to Mail, these are good starting points. :) cc @nextcloud/mail @nextcloud/designers

[GretaD]

@jancborchardt hey, can you give a bit of more details what is expected to do for those who are not part of the design call :)
For instance, the first 3 points - some suggestion how you think would be good to move on.

[skjnldsv]

Hey @GretaD :)
It was not on the design call, Jan and I just talked a bit about this!

For the first three points it was actually on the messages list, the vertical alignement is off. The second line is a bit too much on the bottom, that is what creates this weird issue ;)

[GretaD]

For the first three points it was actually on the messages list, the vertical alignement is off. The second line is a bit too much on the bottom, that is what creates this weird issue ;)

Ah, i see, ok thank you John

[skjnldsv]

Jan is telling me that he is starting from the bottom of the list, so if you want to start from the top it's fine ;)

[GretaD]

Tell Jan that i will start from top and I will check the ones that I'm working on :)

[jancborchardt]

And we’re almost done! :) @GretaD do you want to look at these 3 from above and I take the rest?

• Clicking "New message" should close nav and go to composer. On narrow screens the nav stays open and it seems like nothing happens.
• On narrow screens, the message view has both a menu button and a back arrow button. In this view only the back arrow button is necessary and it should be in place of the menu button.
• In the heading of a mail below the subject, if a contact has only an email set but no name, the tooltip does not need to be shown.