Fixes #198 Squished avatars

Refactor all avatar views to use a shared partial, then change it to a
background image. Requires allowing unsafe-inline styles in the CSP.

js/views/conversation_list_item_view.js

@@ -46,7 +46,7 @@
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
                     number: this.model.getNumber(),
                     avatar_url: this.model.getAvatarUrl()
-                })
+                }, this.render_partials())
             );
 
             twemoji.parse(this.el, { base: '/images/twemoji/', size: 16 });

js/views/message_detail_view.js

@@ -17,11 +17,10 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
-    var ContactView = Backbone.View.extend({
+    var ContactView = Whisper.View.extend({
         className: 'contact-detail',
+        template: $('#contact-detail').html(),
         initialize: function(options) {
-            this.template = $('#contact-detail').html();
-            Mustache.parse(this.template);
             this.conflict = options.conflict;
         },
         events: {
@@ -30,13 +29,12 @@
         triggerConflict: function() {
             this.$el.trigger('conflict', {conflict: this.conflict});
         },
-        render: function() {
-            this.$el.html(Mustache.render(this.template, {
+        render_attributes: function() {
+            return {
                 name       : this.model.getTitle(),
                 avatar_url : this.model.getAvatarUrl(),
                 conflict   : this.conflict
-            }));
-            return this;
+            };
         }
     });
 

js/views/message_view.js

@@ -41,7 +41,7 @@
                     timestamp: moment(this.model.get('received_at')).fromNow(),
                     sender: (contact && contact.getTitle()) || '',
                     avatar_url: (contact && contact.getAvatarUrl())
-                })
+                }, this.render_partials())
             );
 
             twemoji.parse(this.el, { base: '/images/twemoji/', size: 16 });

js/views/new_group_update_view.js

@@ -29,6 +29,7 @@
 
             this.recipients_view = new Whisper.RecipientsInputView();
             this.$el.find('.scrollable').append(this.recipients_view.el);
+            this.$el.find('.avatar').addClass('default');
         },
         events: {
             'click .back': 'goBack',

js/views/whisper_view.js

@@ -25,11 +25,18 @@
         render_attributes: function() {
             return _.result(this.model, 'attributes', {});
         },
+        render_partials: function() {
+            return {
+                avatar: this.avatar_template
+            };
+        },
         render: function() {
             var attrs = _.result(this, 'render_attributes', {});
             var template = _.result(this, 'template', '');
-            this.$el.html(Mustache.render(template, attrs));
+            var partials = _.result(this, 'render_partials', '');
+            this.$el.html(Mustache.render(template, attrs, partials));
             return this;
-        }
+        },
+        avatar_template: $('#avatar').html()
     });
 })();