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.
This commit is contained in:
lilia 2015-03-23 14:01:18 -07:00
parent 6509561795
commit 20baa795ad
10 changed files with 48 additions and 42 deletions

View file

@ -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 });

View file

@ -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;
};
}
});

View file

@ -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 });

View file

@ -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',

View file

@ -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()
});
})();