Nicer looking end-session and group control messages

background.html

@@ -248,8 +248,6 @@
   <script type="text/javascript" src="js/views/conversation_list_view.js"></script>
   <script type="text/javascript" src="js/views/recipients_input_view.js"></script>
   <script type="text/javascript" src="js/views/new_group_update_view.js"></script>
-  <script type="text/javascript" src="js/views/end_session_view.js"></script>
-  <script type="text/javascript" src="js/views/group_update_view.js"></script>
   <script type="text/javascript" src="js/views/attachment_view.js"></script>
   <script type="text/javascript" src="js/views/key_conflict_dialogue_view.js"></script>
   <script type="text/javascript" src="js/views/error_view.js"></script>

js/models/messages.js

@@ -45,10 +45,23 @@
         },
         getDescription: function() {
             if (this.isGroupUpdate()) {
-                return 'Updated the group';
+                var group_update = this.get('group_update');
+                if (group_update.left) {
+                    return group_update.left + ' left the group.';
+                }
+
+                var messages = ['Updated the group.'];
+                if (group_update.name) {
+                    messages.push("Title is now '" + group_update.name + "'.");
+                }
+                if (group_update.joined) {
+                    messages.push(group_update.joined.join(', ') + ' joined the group.');
+                }
+
+                return messages.join(' ');
             }
             if (this.isEndSession()) {
-                return 'Secure session ended';
+                return 'Secure session ended.';
             }
             if (this.isIncoming() && this.hasKeyConflicts()) {
                 return 'Received message with unknown identity key.';

js/views/end_session_view.js

@@ -18,12 +18,12 @@
 
     window.Whisper = window.Whisper || {};
 
-    Whisper.EndSessionView = Backbone.View.extend({
+    Whisper.EndSessionView = Whisper.View.extend({
         tagName:   "div",
         className: "end-session",
-        render: function() {
+        template: $('#message').html(),
-            this.$el.text("Secure session ended");
+        render_attributes: function() {
-            return this;
+            return { text: 'Secure session ended' };
         }
     });
 

js/views/message_view.js

@@ -37,7 +37,7 @@
             var contact = this.model.getContact();
             this.$el.html(
                 Mustache.render(this.template, {
-                    message: this.model.get('body'),
+                    message: this.model.getDescription(),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
                     sender: (contact && contact.getTitle()) || '',
                     avatar_url: (contact && contact.getAvatarUrl())
@@ -79,15 +79,7 @@
             return ["entry", this.model.get('type')].join(' ');
         },
         initialize: function() {
-            if (this.model.isEndSession()) {
+            this.view = new ContentMessageView({model: this.model});
-                this.view = new Whisper.EndSessionView();
-            } else if (this.model.isGroupUpdate()) {
-                this.view = new Whisper.GroupUpdateView({
-                    model: this.model.get('group_update')
-                });
-            } else {
-                this.view = new ContentMessageView({model: this.model});
-            }
             this.$el.append(this.view.el);
 
             this.listenTo(this.model, 'destroy', this.remove); // auto update
@@ -99,6 +91,11 @@
             this.$el.trigger('select', {message: this.model});
         },
         render: function() {
+            if (this.model.isEndSession() || this.model.isGroupUpdate()) {
+                this.$el.addClass('control');
+            } else {
+                this.$el.removeClass('control');
+            }
             this.view.render();
             return this;
         }

stylesheets/_conversation.scss

@@ -222,6 +222,16 @@
     }
   }
 
+  .control {
+    .bubble {
+      .content {
+        font-style: italic;
+      }
+
+      &::before, &::after { display: none; }
+    }
+  }
+
   .attachments {
     img, audio, video {
       max-width: 100%;

stylesheets/manifest.css

@@ -149,7 +149,7 @@ img.emoji {
   height: 44px;
   width: 44px;
   background: #f3f3f3 url("/images/default.png") no-repeat center;
-  border-radius: 22px;
+  border-radius: 50%;
   background-size: cover;
   vertical-align: middle; }
 
@@ -517,6 +517,13 @@ input.search {
     .message-list .outgoing .bubble::after {
       right: -8px;
       border-left: 8px solid #2a92e7; }
+  .message-detail .control .bubble .content,
+  .message-list .control .bubble .content {
+    font-style: italic; }
+  .message-detail .control .bubble::before, .message-detail .control .bubble::after,
+  .message-list .control .bubble::before,
+  .message-list .control .bubble::after {
+    display: none; }
   .message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
   .message-list .attachments img,
   .message-list .attachments audio,