thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Collapse multiple retry buttons

Browse source 
If you're going to retry one, you might as well retry everyone.

// FREEBIE
This commit is contained in:
lilia 2015-10-10 16:41:44 -07:00
parent 816a206892
commit a93b8cea72
4 changed files with 180 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
background.html
View file

@ -143,20 +143,25 @@
<div class='container'> <div class='container'>
<div class='message-container'></div> <div class='message-container'></div>
<div class='info'> <div class='info'>
{{ #hasRetry }}
<h3 class='hasRetry clearfix'>
<button class='retry'>Resend</button>
<span>Failed to send to some recipients.</span>
</h3>
{{ /hasRetry }}
<table> <table>
<tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr> <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='label'>Received</td><td> {{ received_at }}</td></tr>
<tr>
<td class='tofrom label'>{{ tofrom }}</td>
<td> <div class='contacts'></div> </td>
</tr>
{{ #errors }} {{ #errors }}
<tr> <tr>
<td class='label'>Error</td> <td class='label'>Error</td>
<td> <span class='error-message'>{{message}}</span> </td> <td> <span class='error-message'>{{message}}</span> </td>
</tr> </tr>
{{ /errors }} {{ /errors }}
<tr> <td class='tofrom label'>{{tofrom}}</td> </tr>
</table> </table>
<div class='contacts'>
</div>
</div> </div>
</div> </div>
</script> </script>
@ -243,20 +248,17 @@
</script> </script>
<script type='text/x-tmpl-mustache' id='contact-detail'> <script type='text/x-tmpl-mustache' id='contact-detail'>
<div> <div>
{{ #errors }}
<span class='error-icon'>
<span class='error-message'>{{message}}</span>
</span>
{{ /errors }}
{{> avatar }} {{> avatar }}
<span class='name'>{{ name }}</span> <span class='name'>{{ name }}
{{ #conflict }} {{ #conflict }}
<button class='conflict'><span>Verify</span></button> <button class='conflict'><span>Verify</span></button>
{{ /conflict }} {{ /conflict }}
{{ #retry }} </span>
<button class='retry'><span>Retry</span></button>
<span class='error-message'>{{message}}</span>
{{ /retry }}
{{ #errors }}
<div>
<span class='error-message'>{{message}}</span>
</div>
{{ /errors }}
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='key-conflict-dialogue'> <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>

42
js/views/message_detail_view.js
View file

@ -10,33 +10,22 @@
templateName: 'contact-detail', templateName: 'contact-detail',
initialize: function(options) { initialize: function(options) {
this.conflict = options.conflict; 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) { this.errors = _.reject(options.errors, function(e) {
return (e.name === 'IncomingIdentityKeyError' || return (e.name === 'IncomingIdentityKeyError' ||
e.name === 'OutgoingIdentityKeyError' || e.name === 'OutgoingIdentityKeyError');
e.name === 'OutgoingMessageError' ||
e.name === 'SendMessageNetworkError');
}); });
}, },
events: { events: {
'click .conflict': 'triggerConflict', 'click .conflict': 'triggerConflict'
'click .retry': 'triggerRetry'
}, },
triggerConflict: function() { triggerConflict: function() {
this.$el.trigger('conflict', {conflict: this.conflict}); this.$el.trigger('conflict', {conflict: this.conflict});
}, },
triggerRetry: function() {
this.$el.trigger('retry', {error: this.retry});
},
render_attributes: function() { render_attributes: function() {
return { return {
name : this.model.getTitle(), name : this.model.getTitle(),
avatar : this.model.getAvatar(), avatar : this.model.getAvatar(),
conflict : this.conflict, conflict : this.conflict,
retry : this.retry,
errors : this.errors errors : this.errors
}; };
} }
@ -54,7 +43,7 @@
events: { events: {
'click .back': 'goBack', 'click .back': 'goBack',
'conflict': 'conflictDialogue', 'conflict': 'conflictDialogue',
'retry': 'retryMessage', 'click .retry': 'retryMessage',
}, },
goBack: function() { goBack: function() {
this.trigger('back'); this.trigger('back');
@ -93,30 +82,43 @@
this.render(); this.render();
}); });
}, },
retryMessage: function(e, data) { retryMessage: function() {
this.model.resend(data.error.number); 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) { renderContact: function(contact) {
var conflict = this.model.getKeyConflict(contact.id);
var v = new ContactView({ var v = new ContactView({
model: contact, model: contact,
conflict: this.model.getKeyConflict(contact.id), conflict: conflict,
errors: this.errors[contact.id] errors: this.errors[contact.id]
}).render().$el.appendTo(this.$('.contacts')); }).render();
this.$('.contacts').append(v.el);
}, },
render: function() { render: function() {
this.errors = _.groupBy(this.model.get('errors'), 'number'); 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, { this.$el.html(Mustache.render(this.template, {
sent_at : moment(this.model.get('sent_at')).toString(), sent_at : moment(this.model.get('sent_at')).toString(),
received_at : moment(this.model.get('received_at')).toString(), received_at : moment(this.model.get('received_at')).toString(),
tofrom : this.model.isIncoming() ? 'From' : 'To', tofrom : this.model.isIncoming() ? 'From' : 'To',
errors : this.errors['undefined'] errors : this.errors['undefined'],
hasRetry : hasRetry
})); }));
this.view.render().$el.prependTo(this.$('.message-container')); this.view.render().$el.prependTo(this.$('.message-container'));
if (this.model.isOutgoing()) { if (this.model.isOutgoing()) {
this.conversation.contactCollection.reject(function(c) { this.conversation.contactCollection.reject(function(c) {
return c.id === textsecure.storage.user.getNumber(); return c.id === textsecure.storage.user.getNumber();
}).each(this.renderContact.bind(this)); }).forEach(this.renderContact.bind(this));
} else { } else {
this.renderContact( this.renderContact(
this.conversation.contactCollection.get(this.model.get('source')) this.conversation.contactCollection.get(this.model.get('source'))

101
stylesheets/_conversation.scss
View file

@ -54,39 +54,96 @@
padding: 1em; padding: 1em;
.label { .label {
text-align: right;
font-weight: bold; font-weight: bold;
padding-right: 1em; padding-right: 1em;
vertical-align: top; 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 { .contact-detail {
border: none; margin-bottom: 5px;
border-radius: 5px; padding: 0 36px;
color: white; }
padding: 0.5em;
font-weight: bold; h3 {
background: $blue; 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 { span {
vertical-align: middle;
padding-left: 5px; 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 { &:before {
background: url('/images/error.png') no-repeat center center; background: url('/images/error.png') no-repeat center center;
} }

84
stylesheets/manifest.css
View file

@ -546,31 +546,73 @@ input.search {
.message-detail .info { .message-detail .info {
padding: 1em; } padding: 1em; }
.message-detail .info .label { .message-detail .info .label {
text-align: right;
font-weight: bold; font-weight: bold;
padding-right: 1em; padding-right: 1em;
vertical-align: top; } vertical-align: top; }
.message-detail .contact-detail button { .message-detail .info button {
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
padding: 0.5em; padding: 0.5em;
font-weight: bold; font-weight: bold;
background: #2090ea; } background: #2090ea; }
.message-detail .contact-detail button span { .message-detail .info button span {
vertical-align: middle; vertical-align: middle; }
padding-left: 5px; } .message-detail .info button:before {
.message-detail .contact-detail button:before { content: '';
content: ''; display: inline-block;
display: inline-block; vertical-align: middle;
vertical-align: middle; width: 18px;
width: 18px; height: 18px;
height: 18px; background: url("/images/refresh.png") no-repeat center center;
background: url("/images/refresh.png") no-repeat center center; background-size: 100%; }
background-size: 100%; } .message-detail .contact-detail {
.message-detail .conflict { 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; } 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; } background: url("/images/error.png") no-repeat center center; }
.group-update { .group-update {