Collapse multiple retry buttons
If you're going to retry one, you might as well retry everyone. // FREEBIE
This commit is contained in:
lilia
parent
816a206892
commit
a93b8cea72
4 changed files with 180 additions and 77 deletions
|
|
@ -143,20 +143,25 @@
|
|||
<div class='container'>
|
||||
<div class='message-container'></div>
|
||||
<div class='info'>
|
||||
{{ #hasRetry }}
|
||||
<h3 class='hasRetry clearfix'>
|
||||
<button class='retry'>Resend</button>
|
||||
<span>Failed to send to some recipients.</span>
|
||||
</h3>
|
||||
{{ /hasRetry }}
|
||||
<table>
|
||||
<tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
|
||||
<tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
|
||||
<tr>
|
||||
<td class='tofrom label'>{{ tofrom }}</td>
|
||||
<td> <div class='contacts'></div> </td>
|
||||
</tr>
|
||||
{{ #errors }}
|
||||
<tr>
|
||||
<td class='label'>Error</td>
|
||||
<td> <span class='error-message'>{{message}}</span> </td>
|
||||
</tr>
|
||||
{{ /errors }}
|
||||
<tr> <td class='tofrom label'>{{tofrom}}</td> </tr>
|
||||
</table>
|
||||
<div class='contacts'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -243,20 +248,17 @@
|
|||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='contact-detail'>
|
||||
<div>
|
||||
{{ #errors }}
|
||||
<span class='error-icon'>
|
||||
<span class='error-message'>{{message}}</span>
|
||||
</span>
|
||||
{{ /errors }}
|
||||
{{> avatar }}
|
||||
<span class='name'>{{ name }}</span>
|
||||
<span class='name'>{{ name }}
|
||||
{{ #conflict }}
|
||||
<button class='conflict'><span>Verify</span></button>
|
||||
{{ /conflict }}
|
||||
{{ #retry }}
|
||||
<button class='retry'><span>Retry</span></button>
|
||||
<span class='error-message'>{{message}}</span>
|
||||
{{ /retry }}
|
||||
{{ #errors }}
|
||||
<div>
|
||||
<span class='error-message'>{{message}}</span>
|
||||
</div>
|
||||
{{ /errors }}
|
||||
</span>
|
||||
</div>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
|
||||
|
|
|
|||
|
|
@ -10,33 +10,22 @@
|
|||
templateName: 'contact-detail',
|
||||
initialize: function(options) {
|
||||
this.conflict = options.conflict;
|
||||
this.retry = _.find(options.errors, function(e) {
|
||||
return (e.name === 'OutgoingMessageError' ||
|
||||
e.name === 'SendMessageNetworkError');
|
||||
});
|
||||
this.errors = _.reject(options.errors, function(e) {
|
||||
return (e.name === 'IncomingIdentityKeyError' ||
|
||||
e.name === 'OutgoingIdentityKeyError' ||
|
||||
e.name === 'OutgoingMessageError' ||
|
||||
e.name === 'SendMessageNetworkError');
|
||||
e.name === 'OutgoingIdentityKeyError');
|
||||
});
|
||||
},
|
||||
events: {
|
||||
'click .conflict': 'triggerConflict',
|
||||
'click .retry': 'triggerRetry'
|
||||
'click .conflict': 'triggerConflict'
|
||||
},
|
||||
triggerConflict: function() {
|
||||
this.$el.trigger('conflict', {conflict: this.conflict});
|
||||
},
|
||||
triggerRetry: function() {
|
||||
this.$el.trigger('retry', {error: this.retry});
|
||||
},
|
||||
render_attributes: function() {
|
||||
return {
|
||||
name : this.model.getTitle(),
|
||||
avatar : this.model.getAvatar(),
|
||||
conflict : this.conflict,
|
||||
retry : this.retry,
|
||||
errors : this.errors
|
||||
};
|
||||
}
|
||||
|
|
@ -54,7 +43,7 @@
|
|||
events: {
|
||||
'click .back': 'goBack',
|
||||
'conflict': 'conflictDialogue',
|
||||
'retry': 'retryMessage',
|
||||
'click .retry': 'retryMessage',
|
||||
},
|
||||
goBack: function() {
|
||||
this.trigger('back');
|
||||
|
|
@ -93,30 +82,43 @@
|
|||
this.render();
|
||||
});
|
||||
},
|
||||
retryMessage: function(e, data) {
|
||||
this.model.resend(data.error.number);
|
||||
retryMessage: function() {
|
||||
var retrys = _.filter(this.model.get('errors'), function(e) {
|
||||
return (e.name === 'OutgoingMessageError' ||
|
||||
e.name === 'SendMessageNetworkError');
|
||||
});
|
||||
_.map(retrys, 'number').forEach(function(number) {
|
||||
this.model.resend(number);
|
||||
}.bind(this));
|
||||
},
|
||||
renderContact: function(contact) {
|
||||
var conflict = this.model.getKeyConflict(contact.id);
|
||||
var v = new ContactView({
|
||||
model: contact,
|
||||
conflict: this.model.getKeyConflict(contact.id),
|
||||
conflict: conflict,
|
||||
errors: this.errors[contact.id]
|
||||
}).render().$el.appendTo(this.$('.contacts'));
|
||||
}).render();
|
||||
this.$('.contacts').append(v.el);
|
||||
},
|
||||
render: function() {
|
||||
this.errors = _.groupBy(this.model.get('errors'), 'number');
|
||||
var hasRetry = _.find(this.model.get('errors'), function(e) {
|
||||
return (e.name === 'OutgoingMessageError' ||
|
||||
e.name === 'SendMessageNetworkError');
|
||||
});
|
||||
this.$el.html(Mustache.render(this.template, {
|
||||
sent_at : moment(this.model.get('sent_at')).toString(),
|
||||
received_at : moment(this.model.get('received_at')).toString(),
|
||||
tofrom : this.model.isIncoming() ? 'From' : 'To',
|
||||
errors : this.errors['undefined']
|
||||
errors : this.errors['undefined'],
|
||||
hasRetry : hasRetry
|
||||
}));
|
||||
this.view.render().$el.prependTo(this.$('.message-container'));
|
||||
|
||||
if (this.model.isOutgoing()) {
|
||||
this.conversation.contactCollection.reject(function(c) {
|
||||
return c.id === textsecure.storage.user.getNumber();
|
||||
}).each(this.renderContact.bind(this));
|
||||
}).forEach(this.renderContact.bind(this));
|
||||
} else {
|
||||
this.renderContact(
|
||||
this.conversation.contactCollection.get(this.model.get('source'))
|
||||
|
|
|
|||
|
|
@ -54,39 +54,96 @@
|
|||
padding: 1em;
|
||||
|
||||
.label {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
padding-right: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
background: $blue;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/images/refresh.png') no-repeat center center;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-detail button {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
background: $blue;
|
||||
.contact-detail {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 36px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
padding: 5px;
|
||||
|
||||
button {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/images/error_red.png') no-repeat center center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin: 9px;
|
||||
float: right;
|
||||
|
||||
.error-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 0.5em;
|
||||
font-weight: normal;
|
||||
bottom: calc(100% + 16px);
|
||||
left: 50%;
|
||||
margin-left: -130px;
|
||||
width: 180px;
|
||||
z-index: 10;
|
||||
|
||||
&:before {
|
||||
left: -10px;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -23px;
|
||||
left: calc(50% - 6px + 40px);
|
||||
border: 6px solid transparent;
|
||||
border-top: 18px solid #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .error-message { display: block; }
|
||||
}
|
||||
|
||||
button.conflict {
|
||||
float: right;
|
||||
background: #d00;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/images/refresh.png') no-repeat center center;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
.conflict {
|
||||
background: #d00;
|
||||
|
||||
&:before {
|
||||
background: url('/images/error.png') no-repeat center center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -546,31 +546,73 @@ input.search {
|
|||
.message-detail .info {
|
||||
padding: 1em; }
|
||||
.message-detail .info .label {
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
padding-right: 1em;
|
||||
vertical-align: top; }
|
||||
.message-detail .contact-detail button {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
background: #2090ea; }
|
||||
.message-detail .contact-detail button span {
|
||||
vertical-align: middle;
|
||||
padding-left: 5px; }
|
||||
.message-detail .contact-detail button:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url("/images/refresh.png") no-repeat center center;
|
||||
background-size: 100%; }
|
||||
.message-detail .conflict {
|
||||
.message-detail .info button {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
background: #2090ea; }
|
||||
.message-detail .info button span {
|
||||
vertical-align: middle; }
|
||||
.message-detail .info button:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url("/images/refresh.png") no-repeat center center;
|
||||
background-size: 100%; }
|
||||
.message-detail .contact-detail {
|
||||
margin-bottom: 5px;
|
||||
padding: 0 36px; }
|
||||
.message-detail h3 {
|
||||
font-size: 1em;
|
||||
padding: 5px; }
|
||||
.message-detail h3 button {
|
||||
float: right; }
|
||||
.message-detail .error-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url("/images/error_red.png") no-repeat center center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
margin: 9px;
|
||||
float: right; }
|
||||
.message-detail .error-icon .error-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 0.5em;
|
||||
font-weight: normal;
|
||||
bottom: calc(100% + 16px);
|
||||
left: 50%;
|
||||
margin-left: -130px;
|
||||
width: 180px;
|
||||
z-index: 10; }
|
||||
.message-detail .error-icon .error-message:before {
|
||||
left: -10px;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -23px;
|
||||
left: calc(50% - 6px + 40px);
|
||||
border: 6px solid transparent;
|
||||
border-top: 18px solid #000000; }
|
||||
.message-detail .error-icon:hover .error-message {
|
||||
display: block; }
|
||||
.message-detail button.conflict {
|
||||
float: right;
|
||||
background: #d00; }
|
||||
.message-detail .conflict:before {
|
||||
.message-detail button.conflict span {
|
||||
padding-left: 5px; }
|
||||
.message-detail button.conflict:before {
|
||||
background: url("/images/error.png") no-repeat center center; }
|
||||
|
||||
.group-update {
|
||||
|
|
|
|||
Loading…
Reference in a new issue