keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects 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
pull/749/head
lilia 9 years ago
parent 1e1b87bbbd
commit 4ab2e25df6
5 changed files with 100 additions and 116 deletions
Show Stats Download Patch File Download Diff File

19
background.html
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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
Unescape Escape 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; }

Write Preview
Loading…
Cancel
Save