(js) Improve display of msgs with many recipients

NEWS

@@ -19,6 +19,7 @@ Enhancements
  - [web] warn when double-booking attendees and offer force save option
  - [web] list search now displays a warning regarding the minlength constraint
  - [web] loading an LDAP-based addressbook is now instantaneous when listRequiresDot is disabled (#438, #3464)
+ - [web] improve display of messages with many recipients
  - [eas] now support EAS MIME truncation
 
 Bug fixes

UI/MailerUI/English.lproj/Localizable.strings

@@ -22,6 +22,7 @@
 "Options" = "Options";
 "Close" = "Close";
 "Size" = "Size";
+
 /* Tooltips */
 "Send this message now" = "Send this message now";
 "Select a recipient from an Address Book" = "Select a recipient from an Address Book";
@@ -40,6 +41,7 @@
 "Unread" = "Unread";
 "Flagged" = "Flagged";
 "Search multiple mailboxes" = "Search multiple mailboxes";
+
 /* Main Frame  */
 "Home"                 = "Home"; 
 "Calendar"             = "Calendar";
@@ -47,6 +49,7 @@
 "Mail"                 = "Mail";
 "Right Administration" = "Right Administration";
 "Help" = "Help";
+
 /* Mail account main windows */
 "Welcome to the SOGo Mailer. Use the folder tree on the left to browse your mail accounts!" = "Welcome to the SOGo Mailer. Use the folder tree on the left to browse your mail accounts!";
 "Read messages"       = "Read messages";
@@ -54,10 +57,13 @@
 "Share" = "Share";
 "Account" = "Account";
 "Shared Account" = "Shared Account";
+
 /* A mailbox is selected, but no message (only shown on large screens) */
 "No message selected" = "No message selected";
+
 /* No mailbox is selected (usually resulting from an IMAP connection problem) */
 "No mailbox selected" = "No mailbox selected";
+
 /* acls */
 "Access rights to" = "Access rights to";
 "For user" = "For user";
@@ -77,6 +83,7 @@
 "Saved Messages.zip" = "Saved Messages.zip";
 "Update" = "Update";
 "Cancel" = "Cancel";
+
 /* Mail edition */
 "From"          = "From";
 "Subject"       = "Subject";
@@ -111,12 +118,14 @@
 "This mail is being sent from an unsecure network!" = "This mail is being sent from an unsecure network!";
 "Address Book" = "Address Book";
 "Search For" = "Search For";
+
 /* Popup "show" */
 "all"     = "all";
 "read"    = "read";
 "unread"  = "unread";
 "deleted" = "deleted";
 "flagged" = "flagged";
+
 /* MailListView */
 "Sender" = "Sender";
 "Subject or Sender" = "Subject or Sender";
@@ -137,6 +146,7 @@
 "Mark Unread" = "Mark Unread";
 "Mark Read"   = "Mark Read";
 "Untitled" = "Untitled";
+
 /* Tree */
 "SentFolderName"   = "Sent";
 "TrashFolderName"  = "Trash";
@@ -145,15 +155,19 @@
 "JunkFolderName" = "Junk";
 "SieveFolderName"  = "Filters";
 "Folders"          = "Folders"; /* title line */
+
 /* MailMoveToPopUp */
 "MoveTo"        = "Move …";
+
 /* Address Popup menu */
 "Add to Address Book..." = "Add to Address Book...";
 "Compose Mail To" = "Compose Mail To";
 "Create Filter From Message..." = "Create Filter From Message...";
+
 /* Image Popup menu */
 "Save Image" = "Save Image";
 "Save Attachment" = "Save Attachment";
+
 /* Mailbox popup menus */
 "Open in New Mail Window" = "Open in New Mail Window";
 "Copy Folder Location" = "Copy Folder Location";
@@ -170,11 +184,13 @@
 "Get Messages for Account" = "Get Messages for Account";
 "Properties..." = "Properties...";
 "Delegation..." = "Delegation...";
+
 /* Use This Folder menu */
 "Sent Messages" = "Sent Messages";
 "Drafts" = "Drafts";
 "Deleted Messages" = "Deleted Messages";
 "Junk Messages" = "Junk Messages";
+
 /* Message list popup menu */
 "Open Message In New Window" = "Open Message In New Window";
 "Reply to Sender Only" = "Reply to Sender Only";
@@ -199,11 +215,21 @@
 "Delete Selected Messages" = "Delete Selected Messages";
 "Mark the selected messages as junk" = "Mark the selected messages as junk";
 "Mark the selected messages as not junk" = "Mark the selected messages as not junk";
+
+/* Text appended to the recipients list when there are too many recipients */
+"and %{0} more..." = "and %{0} more...";
+
+/* Button label to hide extended list of recipients */
+"Hide" = "Hide";
+
 /* Number of selected messages in list */
 "selected" = "selected";
+
 "This Folder" = "This Folder";
+
 /* Label popup menu */
 "None" = "None";
+
 /* Mark popup menu */
 "As Read" = "As Read";
 "Thread As Read" = "Thread As Read";
@@ -224,6 +250,7 @@
 "results found" = "results found";
 "result found" = "result found";
 "Please specify at least one filter" = "Please specify at least one filter";
+
 /* Folder operations */
 "Name" = "Name";
 "Enter the new name of your folder"
@@ -256,9 +283,11 @@
 = "Moving a message into its own folder is impossible!";
 "Copying a message into its own folder is impossible!"
 = "Copying a message into its own folder is impossible!";
+
 /* Message operations */
 "The messages could not be moved to the trash folder. Would you like to delete them immediately?"
 = "The messages could not be moved to the trash folder. Would you like to delete them immediately?";
+
 /* Message editing */
 "error_missingsubject" = "The message has no subject. Are you sure you want to send it?";
 "error_missingrecipients" = "Please specify at least one recipient.";
@@ -273,6 +302,7 @@
 "cannot send message: (smtp) all recipients discarded" = "Cannot send message: all recipients are invalid.";
 "cannot send message (smtp) - recipients discarded" = "Cannot send message. The following addresses are invalid";
 "cannot send message: (smtp) error when connecting" = "Cannot send message: error when connecting to the SMTP server.";
+
 /* Contacts list in mail editor */
 "Email" = "Email";
 "More mail options" = "More mail options";

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -125,19 +125,25 @@
                   </div>
                 </div>
               </div>
-              <div class="msg-recipients" layout="column" flex="50">
+              <div class="msg-recipients" layout="column" flex="50" flex-xs="100">
                 <div class="pseudo-input-container--compact">
                   <label class="pseudo-input-label">
                     <var:string label:value="To"/>
                   </label>
-                  <div class="pseudo-input-field" ng-hide="viewer.$showDetailedRecipients">
+                  <div class="pseudo-input-field"
-                    <a href="#" ng-click="viewer.showDetailedRecipients($event)">{{viewer.message.$shortRecipients()}}</a>
+                       ng-hide="viewer.$showDetailedRecipients">
+                    <a href="#" ng-click="viewer.toggleDetailedRecipients($event)">{{viewer.message.$shortRecipients(5)}}</a>
                   </div>
                   <div class="pseudo-input-field" ng-show="viewer.$showDetailedRecipients">
                     <span ng-repeat="recipient in viewer.message.to">
                       <a href="#" ng-bind="recipient.full"
                          ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
                     </span>
+                    <md-button style="float: right"
+                               label:aria-label="Hide"
+                               ng-click="viewer.toggleDetailedRecipients($event)">
+                      <var:string label:value="Hide"/>
+                    </md-button>
                   </div>
                 </div>
                 <div class="pseudo-input-container--compact" ng-show="viewer.$showDetailedRecipients">

UI/WebServerResources/js/Mailer/Message.service.js

@@ -160,12 +160,15 @@
 
     // Build long representation of email addresses
     _.each(['from', 'to', 'cc', 'bcc', 'reply-to'], function(type) {
-      _.each(_this[type], function(data, i) {
+      _.each(_this[type], function(data) {
         if (data.name && data.name != data.email) {
           data.full = data.name + ' <' + data.email + '>';
 
-          // If we have "Alice Foo" as name, we grab "Alice"
+          if (data.name.length < 10)
-          if (data.name.split(' ').length)
+            // Name is already short
+            data.shortname = data.name;
+          else if (data.name.split(' ').length)
+            // If we have "Alice Foo" as name, we grab "Alice"
             data.shortname = data.name.split(' ')[0].replace('\'','');
         }
         else if (data.email) {
@@ -190,17 +193,22 @@
    * @desc Format all recipients into a very compact string
    * @returns a compacted string of all recipients
    */
-  Message.prototype.$shortRecipients = function() {
+  Message.prototype.$shortRecipients = function(max) {
-    var _this = this;
+    var _this = this, result = [], count = 0, total = 0;
-    var result = [];
 
-    // Build long representation of email addresses
+    // Build short representation of email addresses
     _.each(['to', 'cc', 'bcc'], function(type) {
+      total += _this[type]? _this[type].length : 0;
       _.each(_this[type], function(data, i) {
-        result.push(data.shortname);
+        if (count < max)
+          result.push(data.shortname);
+        count++;
       });
     });
 
+    if (total > max)
+      result.push(l('and %{0} more...', (total - max)));
+
     return result.join(', ');
   };
 

UI/WebServerResources/js/Mailer/MessageController.js

@@ -22,7 +22,7 @@
     vm.tags = { searchText: '', selected: '' };
     vm.showFlags = stateMessage.flags && stateMessage.flags.length > 0;
     vm.$showDetailedRecipients = false;
-    vm.showDetailedRecipients = showDetailedRecipients;
+    vm.toggleDetailedRecipients = toggleDetailedRecipients;
     vm.doDelete = doDelete;
     vm.close = close;
     vm.reply = reply;
@@ -87,8 +87,8 @@
       return ctrls;
     }
 
-    function showDetailedRecipients($event) {
+    function toggleDetailedRecipients($event) {
-      vm.$showDetailedRecipients = true;
+      vm.$showDetailedRecipients = !vm.$showDetailedRecipients;
       $event.stopPropagation();
       $event.preventDefault();
     }