Make it clear in conversation just some recipients failed

FREEBIE

_locales/en/messages.json

@@ -475,6 +475,10 @@
         "message": "Message not sent.",
         "description": "Informational label, appears on messages that failed to send"
     },
+    "someRecipientsFailed": {
+        "message": "Some recipients failed",
+        "description": "Informational label, for messages where some recipients succeeded, others failed"
+    },
     "showMore": {
         "message": "Details",
         "description": "Displays the details of a key change"

background.html

@@ -191,6 +191,9 @@ <h3>{{ welcomeToSignal }}</h3>
     {{ messageNotSent }}
     <span href='#' class='retry'>{{ resend }}</span>
   </script>
+  <script type='text/x-tmpl-mustache' id='some-failed'>
+    {{ someFailed }}
+  </script>
   <script type='text/x-tmpl-mustache' id='keychange'>
       <span class='content' dir='auto'><span class='shield icon'></span> {{ content }}</span>
   </script>

js/models/messages.js

@@ -249,6 +249,25 @@
             }.bind(this));
         },
 
+        someRecipientsFailed: function() {
+            var c = this.getConversation();
+            if (c.isPrivate()) {
+                return false;
+            }
+
+            var recipients = c.contactCollection.length - 1;
+            var errors = this.get('errors');
+            if (!errors) {
+                return false;
+            }
+
+            if (errors.length > 0 && recipients > 0 && errors.length < recipients) {
+                return true;
+            }
+
+            return false;
+        },
+
         sendSyncMessage: function() {
             this.syncPromise = this.syncPromise || Promise.resolve();
             this.syncPromise = this.syncPromise.then(function() {

js/views/message_view.js

@@ -25,6 +25,14 @@
             resend: i18n('resend')
         }
     });
+    var SomeFailedView = Whisper.View.extend({
+        tagName: 'span',
+        className: 'some-failed',
+        templateName: 'some-failed',
+        render_attributes: {
+            someFailed: i18n('someRecipientsFailed')
+        }
+    });
     var TimerView = Whisper.View.extend({
         templateName: 'hourglass',
         update: function() {
@@ -172,6 +180,7 @@
             'click .error-icon': 'select',
             'click .timestamp': 'select',
             'click .status': 'select',
+            'click .some-failed': 'select',
             'click .error-message': 'select'
         },
         retryMessage: function() {
@@ -241,6 +250,10 @@
             if (this.model.hasNetworkError()) {
                 this.$('.meta').prepend(new NetworkErrorView().render().el);
             }
+            this.$('.meta .some-failed').remove();
+            if (this.model.someRecipientsFailed()) {
+                this.$('.meta').prepend(new SomeFailedView().render().el);
+            }
         },
         renderControl: function() {
             if (this.model.isEndSession() || this.model.isGroupUpdate()) {

stylesheets/_conversation.scss

@@ -406,11 +406,17 @@ li.entry .error-icon-container {
       cursor: pointer;
     }
 
+    .some-failed {
+      float: left;
+      margin-left: 6px;
+      margin-right: 6px;
+    }
+
     .hasRetry, .timestamp, .status, .timer {
       float: left;
     }
 
-    .timestamp, .status {
+    .timestamp, .status, .some-failed {
       cursor: pointer;
       opacity: 0.5;