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

Refactor Contact and Conflict views

Browse source 
Untangle these two views into their component parts, consolidating all
the key conflict logic in the key conflict view. Contact view now simply
renders basic contact info and miscellaneous errors but not conflicts or
message errors.

// FREEBIE
This commit is contained in:
lilia 2016-02-17 11:59:20 -08:00
parent 1e1b87bbbd
commit 4ab2e25df6
5 changed files with 100 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
background.html
View file

@ -276,9 +276,6 @@
</script>
<script type='text/x-tmpl-mustache' id='contact-detail'>
<div class='clearfix'>
{{ #conflict }}
<h3>{{ newIdentity }}</h3>
{{ /conflict }}
{{ #errors }}
<span class='error-icon'>
<span class='error-message'>{{message}}</span>
@ -286,19 +283,23 @@
{{ /errors }}
{{> avatar }}
<span class='name'>{{ name }}
{{ #conflict }}
<button class='conflict'><span>{{ verify }}</span></button>
<button class='cancel hide'><span>{{ cancel }}</span></button>
{{ /conflict }}
</span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
<div class='content'>
<div class='clearfix'>
<h3>{{ newIdentity }}</h3>
{{> avatar }}
<span class='name'>{{ name }}
<button class='conflict'><span>{{ verify }}</span></button>
<button class='cancel hide'><span>{{ cancel }}</span></button>
</span>
</div>
<div class='content hide'>
<p> {{ message }} </p>
<p> {{{ verifyContact }}} </p>
<p><button class='resolve'>{{ resolve }}</button></p>
</div>
<button class='resolve'>{{ resolve }}</button>
</script>
<script type='text/x-tmpl-mustache' id='window-controls'>
<button class='minimize'>&minus;</button>

28
js/views/key_conflict_dialogue_view.js
View file

@ -7,14 +7,18 @@
window.Whisper = window.Whisper || {};
Whisper.KeyConflictDialogueView = Whisper.View.extend({
className: 'key-conflict-dialogue clearfix',
templateName: 'key-conflict-dialogue',
className: 'key-conflict-dialogue clearfix',
initialize: function(options) {
this.contact = options.contact;
this.conflict = options.conflict;
this.conversation = options.conversation;
},
events: {
'click .verify': 'triggerVerify',
'click .resolve': 'resolve'
'click .conflict': 'showDialog',
'click .cancel' : 'cancel',
'click .verify' : 'triggerVerify',
'click .resolve' : 'resolve'
},
triggerVerify: function() {
this.trigger('verify', {identityKey: this.model.identityKey});
@ -24,10 +28,24 @@
this.remove();
this.conversation.resolveConflicts(this.model);
},
showDialog: function() {
this.$('.conflict').hide();
this.$('.cancel, .content').show();
},
cancel: function() {
this.$('.cancel, .content').hide();
this.$('.conflict').show();
},
render_attributes: function() {
return {
message: i18n('identityChanged'),
resolve: i18n('acceptNewKey'),
name : this.contact.getTitle(),
avatar : this.contact.getAvatar(),
conflict : this.conflict,
verify : i18n('verify'),
cancel : i18n('cancel'),
newIdentity : i18n('newIdentity'),
message : i18n('identityChanged'),
resolve : i18n('acceptNewKey'),
verifyContact: i18n('verifyContact')
};
}

61
js/views/message_detail_view.js
View file

@ -18,29 +18,11 @@
});
},
events: {
'click .conflict': 'triggerConflict',
'click .cancel' : 'cancel'
},
triggerConflict: function() {
this.$el.trigger('conflict', {conflict: this.conflict, el: this.el});
this.$('.cancel').show();
this.$('.conflict').hide();
},
cancel: function() {
this.$('.key-conflict-dialogue').remove();
this.$('.cancel').hide();
this.$('.conflict').show();
},
render_attributes: function() {
return {
name : this.model.getTitle(),
avatar : this.model.getAvatar(),
conflict : this.conflict,
errors : this.errors,
verify : i18n('verify'),
cancel : i18n('cancel'),
newIdentity: i18n('newIdentity')
errors : this.errors
};
}
});
@ -57,7 +39,6 @@
},
events: {
'click .back': 'goBack',
'conflict': 'conflictDialogue',
'click .retry': 'retryMessage',
},
goBack: function() {
@ -84,19 +65,6 @@
return this.conversation.contactCollection.models;
}
},
conflictDialogue: function(e, data) {
var view = new Whisper.KeyConflictDialogueView({
model: data.conflict,
conversation: this.conversation
});
view.render().$el.appendTo(data.el);
this.listenTo(view, 'verify', function(data) {
this.verify(data.identityKey);
});
this.listenTo(view, 'resolve', function() {
this.render();
});
},
retryMessage: function() {
var retrys = _.filter(this.model.get('errors'), function(e) {
return (e.name === 'MessageError' ||
@ -108,18 +76,33 @@
}.bind(this));
},
renderContact: function(contact) {
var conflict = this.model.getKeyConflict(contact.id);
var v = new ContactView({
var view = new ContactView({
model: contact,
conflict: conflict,
errors: this.errors[contact.id]
}).render();
this.$('.contacts').append(view.el);
var conflict = this.model.getKeyConflict(contact.id);
if (conflict) {
this.$('.conflicts').append(v.el);
} else {
this.$('.contacts').append(v.el);
this.renderConflict(contact, conflict);
}
},
renderConflict: function(contact, conflict) {
var view = new Whisper.KeyConflictDialogueView({
model: conflict,
contact: contact,
conversation: this.conversation
}).render();
this.$('.conflicts').append(view.el);
this.listenTo(view, 'verify', function(data) {
this.verify(conflict.identityKey);
});
/*
this.listenTo(view, 'resolve', function() {
this.render();
});
*/
},
render: function() {
this.errors = _.groupBy(this.model.get('errors'), 'number');
var hasRetry = _.find(this.model.get('errors'), function(e) {

55
stylesheets/_conversation.scss
View file

@ -94,8 +94,13 @@
height: calc(100% - (#{$header-height} + 4px));
}
.hasConflict,
.key-conflict-dialogue,
.hasRetry {
background: #F3F3A7;
border-radius: 5px;
padding: 1em;
margin: 1em;
button {
outline: none;
border: none;
@ -110,13 +115,7 @@
}
}
}
.conflicts .contact-detail,
.hasRetry {
background: #F3F3A7;
border-radius: 5px;
padding: 1em;
margin: 1em;
}
.hasRetry {
padding: 10px 20px;
button {
@ -135,6 +134,21 @@
}
}
.key-conflict-dialogue {
.content p {
max-width: 40em;
margin: 1em auto;
}
.verify {
color: $blue;
text-decoration: underline;
cursor: pointer;
}
.resolve {
background: $blue;
}
}
.message-container {
background: white;
padding: 1em 0;
@ -176,34 +190,9 @@
}
}
.conflicts .contact-detail {
background: #F3F3A7;
padding: 1em;
border-radius: 10px;
}
.contacts .contact-detail {
padding: 0 36px;
}
.contact-detail {
margin-bottom: 5px;
.key-conflict-dialogue {
.content {
max-width: 40em;
margin: 0 auto;
}
.verify {
color: $blue;
text-decoration: underline;
cursor: pointer;
}
button {
float: right;
background: $blue;
margin: 0 0 10px 10px;
}
}
}
h3 {

53
stylesheets/manifest.css
View file

@ -649,24 +649,24 @@ input.search {
.message-detail .container {
height: calc(100% - (36px + 4px)); }
.message-detail .hasConflict button,
.message-detail .hasRetry button {
outline: none;
border: none;
border-radius: 5px;
color: white;
padding: 0.5em 1em;
font-weight: bold;
line-height: 18px; }
.message-detail .hasConflict button span,
.message-detail .hasRetry button span {
vertical-align: middle; }
.message-detail .conflicts .contact-detail,
.message-detail .key-conflict-dialogue,
.message-detail .hasRetry {
background: #F3F3A7;
border-radius: 5px;
padding: 1em;
margin: 1em; }
.message-detail .key-conflict-dialogue button,
.message-detail .hasRetry button {
outline: none;
border: none;
border-radius: 5px;
color: white;
padding: 0.5em 1em;
font-weight: bold;
line-height: 18px; }
.message-detail .key-conflict-dialogue button span,
.message-detail .hasRetry button span {
vertical-align: middle; }
.message-detail .hasRetry {
padding: 10px 20px; }
.message-detail .hasRetry button {
@ -680,6 +680,15 @@ input.search {
height: 18px;
background: url("/images/refresh.png") no-repeat center center;
background-size: 100%; }
.message-detail .key-conflict-dialogue .content p {
max-width: 40em;
margin: 1em auto; }
.message-detail .key-conflict-dialogue .verify {
color: #2090ea;
text-decoration: underline;
cursor: pointer; }
.message-detail .key-conflict-dialogue .resolve {
background: #2090ea; }
.message-detail .message-container {
background: white;
padding: 1em 0; }
@ -707,25 +716,9 @@ input.search {
height: 18px;
background: url("/images/refresh.png") no-repeat center center;
background-size: 100%; }
.message-detail .conflicts .contact-detail {
background: #F3F3A7;
padding: 1em;
border-radius: 10px; }
.message-detail .contacts .contact-detail {
padding: 0 36px; }
.message-detail .contact-detail {
padding: 0 36px;
margin-bottom: 5px; }
.message-detail .contact-detail .key-conflict-dialogue .content {
max-width: 40em;
margin: 0 auto; }
.message-detail .contact-detail .key-conflict-dialogue .verify {
color: #2090ea;
text-decoration: underline;
cursor: pointer; }
.message-detail .contact-detail .key-conflict-dialogue button {
float: right;
background: #2090ea;
margin: 0 0 10px 10px; }
.message-detail h3 {
font-size: 1em;
padding: 5px; }