Messages bubbles with errors are clickable

For messages with errors, clicking anywhere inside the bubble takes you
to the message detail view.

// FREEBIE
This commit is contained in:
lilia 2015-10-23 17:20:24 -07:00
parent c79a917bbe
commit 47befdbf61
3 changed files with 14 additions and 11 deletions

View file

@ -16,7 +16,8 @@
this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'destroy', this.remove);
}, },
events: { events: {
'click .timestamp': 'select' 'click .timestamp': 'select',
'click .error': 'select'
}, },
select: function() { select: function() {
this.$el.trigger('select', {message: this.model}); this.$el.trigger('select', {message: this.model});
@ -35,7 +36,7 @@
renderErrors: function() { renderErrors: function() {
var errors = this.model.get('errors'); var errors = this.model.get('errors');
if (_.size(errors) > 0) { if (_.size(errors) > 0) {
this.$el.addClass('error'); this.$('.bubble').addClass('error');
if (this.model.isIncoming()) { if (this.model.isIncoming()) {
this.$('.content').text(this.model.getDescription()).addClass('error-message'); this.$('.content').text(this.model.getDescription()).addClass('error-message');
} }

View file

@ -262,14 +262,15 @@
opacity: 1.0; opacity: 1.0;
} }
.error .bubble { .error.bubble {
cursor: pointer;
background: url('/images/error_red.png') no-repeat; background: url('/images/error_red.png') no-repeat;
} }
.incoming.error .bubble { .incoming .error.bubble {
padding-right: 40px; padding-right: 40px;
background-position: calc(100% - 12px) 9px; background-position: calc(100% - 12px) 9px;
} }
.outgoing.error .bubble { .outgoing .error.bubble {
padding-left: 40px; padding-left: 40px;
background-position: 12px 9px; background-position: 12px 9px;
} }

View file

@ -729,15 +729,16 @@ input.search {
.message-detail .outgoing.sent .bubble, .message-detail .outgoing.sent .bubble,
.message-list .outgoing.sent .bubble { .message-list .outgoing.sent .bubble {
opacity: 1.0; } opacity: 1.0; }
.message-detail .error .bubble, .message-detail .error.bubble,
.message-list .error .bubble { .message-list .error.bubble {
cursor: pointer;
background: url("/images/error_red.png") no-repeat; } background: url("/images/error_red.png") no-repeat; }
.message-detail .incoming.error .bubble, .message-detail .incoming .error.bubble,
.message-list .incoming.error .bubble { .message-list .incoming .error.bubble {
padding-right: 40px; padding-right: 40px;
background-position: calc(100% - 12px) 9px; } background-position: calc(100% - 12px) 9px; }
.message-detail .outgoing.error .bubble, .message-detail .outgoing .error.bubble,
.message-list .outgoing.error .bubble { .message-list .outgoing .error.bubble {
padding-left: 40px; padding-left: 40px;
background-position: 12px 9px; } background-position: 12px 9px; }
.message-detail .incoming .bubble, .message-detail .incoming .bubble,