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:
parent
6509561795
commit
20baa795ad
10 changed files with 48 additions and 42 deletions
|
@ -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 });
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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 });
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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()
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue