Show recipient email address in mail viewer

[bedhub]

When opening an email as a user i want to see to whom the email was addressed to so i that i can see to which of my email addresses the email was sent to and if the email was addressed to someone else.

Acceptance criteria

• Recipient email address is shown below subject line in mail viewer within its own line.
• Recipient line shows additional text if there are more recipients ("to <mail address> and x more. ")
• Recipient line recipient line should be truncated in case there is not enough space.
• Receive date is displayed in recipient line aligned to the right
• Recipient line should be clickable and act as an expander to show all the sender and recipient information of that email (from, technical sender, to, bc, cc )
• Sender address should be shown on top of the subject line including sender name and full email address.
• Sender address should always be fully visible including name and address.
• Sender address should wrap to another line in case there is not enough space.
• Print layout is adapted
• Mail viewer buttons should be on a separate line and expand to the full width of the mail viewer.
• Buttons show icon and text within two and three column layout.
• Buttons show icon only in one column layout

Implementation hint
By adding the recipient line we want to change the arrangement of the items in the mail viewer so that less space is wasted, all items within the same line are aligned in height and the order of the elements are the same on all layouts (one, two or three column layout).

More in information can be found on the "Design improvements" page in the wiki.

Layout proposal
https://www.figma.com/file/Bqw7GcbTlc04OLRASbdOkY/MailViewer?node-id=0%3A1

For multi-column layout we go with

• subject and buttons on top
• sender, recipient, date below

For single-column layout we go with:

• sender, recipient, date in the header
• subject in the body
• buttons in the toolbar in the bottom (should cover current bottom navigation)

Old Layout proposal
This is a proposal how we can reserve the whole line for the action buttons. On desktop layout it should include icon and a text (one and two column layout). On mobile layout (one column) just the icons.

We need to experiment on really wide screens if it still makes sense to reserve the complete line or if we need to limit the button row.

Tasks

• Prepare design proposals in Figma
  • Desktop layout
  • Mobile layout
• Select a version in UI team
• Implement it

Test notes

Each in single-column and multi-column layout:

• Subject short and long wraps correctly
• Sender address wraps correctly
• Actions for normal case:
  • reply
  • reply all
  • forward
  • delete
  • move
  • read/unread
  • export
  • unsubscribe
  • headers
  • report
  • block external content
  • show external images
• Actions for announcement:
  • delete
  • read/unread
  • print
• Actions for draft:
  • edit
  • delete
  • move
• Actions for external secure mailbox:
  • reply
  • read/unread
  • export
  • print
• Actions for contact form mailbox:
  • reply
  • delete
  • read/unread
  • export
  • print
• Actions for a message with restricted recipients (contact form + shared mailbox + responsible persons):
  • reply
  • assign (looks like forward but has a dropdown with selection)
  • delete
  • read
  • export
  • print
  • headers
  • report
• Can expand/collapse sender/recipient list (also with keyboard)
• It displays from/to/cc/bcc/reply-to/technical sender correctly
• All the actions for those addresses work correctly
• Single attachment
• Multiple attachments: expand/collapse/actions/correct layout/download all, also expandable via keyboard
• No download all is shown in iOS app
• Mail authentication banner (find some email with mismatching mail authentication)
• Phishing banner (report as phishing and open again)
• External recipient has correct actions
• Multiselect (also on mobile)
• Updating mail and switching between mails does not cause any issues with mail body or with inline/external images
• Badge for tutao emails is shown correctly
• Lock is only displayed for encrypted emails
• Most relevant recipient is shown as the recipient when they are not expanded: either one of our email addresses or one of to, or one of cc, or one of bcc
• moving mails works with icon, V shortcut, multiselect on desktop, multiselect on mobile, also in search
• moving mails is restricted correctly based on mailbox/folder
• headers can be shown, it shows loading indicator, it shows "" when there are no headers
• blocking/showing external content works, also with inline images, is reset when switching between emails

[johnbotris]

So this is just the mail viewer redesign issue correct? The AC covers more than just the rendering of the recipient mail addresses. I would possibly split this up

[ganthern]

possible issues:

• announcement also shows the mail-header action in the action bar (which shows an empty list when clicked)
• firefox: expanding sender/recipient section in multi-column only works with keyboard if previously clicked, not via tabbing
• same for multiple attachment expander