ESM: Detail Datacard View UI Refresh - Email in View Mode

User story:

As a user of Efecte's Service Management Tool (ESM) I want to enjoy a modern user interface for reading and creating emails in order to work not only effectively but also with delight.

AC's:

• Users should be able to view emails in chronological order in the detail view
  • the last email is shown first on the list
• Users should be able to scroll the emails within the email box both with mobile and desktop devices
• Users should be able to see an abbreviation of the sender's and responder's email address in a colored circle
  • first name and last name should be abbreviated as for the Profile button
  • the fill color of the circle should be selected from one of the system color palettes
• Users should be able to see all emails in a dedicated window by pressing a button (opens the existing dedicated window)
• Users should be able to edit the email address when replying to an email, for example, double-clicking the already given address object
• Users should be able to expand all emails by the click of a button
• Users should be able to reply, reply all, and forward the email by the click of a button
• Users should be able to mark an email as read or unread by the click of a button
• Users must be able to create a new email by the click of a button if they have the update or create permissions for the email attribute
  • if several email templates have been defined then the user can select the email template
• All email interactions shall have a tooltip
• All email interactions must be localized
• The email attribute name must be localized based on the multi-language configuration support
• The sender's name must be shown as a reference
  • Users should be able to see the full email address in a small pop-up window when hovering over the name with the mouse on desktop devices
  • Users should be able to copy the email address to the clipboard of a desktop device with a right mouse button click and a mobile device by Copy/Paste function
• The timestamp of the email must be shown
• Additional email header information can be displayed in a popup window by clicking a chevron beside the timestamp
• The subject of the email must be shown in bold
• The body of the email must be shown with a configurable text row height set in the metadata
• Inline images in rich-text/HTML formatted emails are displayed in a configurable height
  • maximum height of the image to be shown inside of an email can be configured in the metadata
• clicking on the email body text expands the email box to show the entire email content of the corresponding email with other emails pushed downwards
  • the receiver, BCC and CC addresses s of the email are shown when expanding the email
• Attachments are shown with their file name in blue color
  • PNG, GIF, and JPEG attachments can be previewed in a popup window when clicking on the related file name