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

Display key conflict dialog inline

Browse source 
One less modal.

// FREEBIE
This commit is contained in:
lilia 2016-02-14 22:41:52 -08:00
parent ad66da9fb5
commit 5340791868
6 changed files with 107 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
_locales/en/messages.json
View file

@ -9,7 +9,15 @@
"message": "Submit" "message": "Submit"
}, },
"verifyContact": { "verifyContact": {
"message": "You may wish to <span class='verify'>verify</span> this contact." "message": "You may wish to $tag_start$verify$tag_end$ this contact.",
"placeholders": {
"tag_start": {
"content": "<a class='verify' href='#'>"
},
"tag_end": {
"content": "</a>"
}
}
}, },
"acceptNewKey": { "acceptNewKey": {
"message": "Accept new key" "message": "Accept new key"
@ -20,6 +28,9 @@
"newIdentity": { "newIdentity": {
"message": "New Identity" "message": "New Identity"
}, },
"identityChanged": {
"message": "This contact's identity key has changed. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal and now has a new identity key."
},
"outgoingKeyConflict": { "outgoingKeyConflict": {
"message": "This contact's identity key has changed. Click to process and display." "message": "This contact's identity key has changed. Click to process and display."
}, },

8
background.html
View file

@ -276,7 +276,7 @@
<p>{{ message }}</p> <p>{{ message }}</p>
</script> </script>
<script type='text/x-tmpl-mustache' id='contact-detail'> <script type='text/x-tmpl-mustache' id='contact-detail'>
<div> <div class='clearfix'>
{{ #errors }} {{ #errors }}
<span class='error-icon'> <span class='error-icon'>
<span class='error-message'>{{message}}</span> <span class='error-message'>{{message}}</span>
@ -286,6 +286,7 @@
<span class='name'>{{ name }} <span class='name'>{{ name }}
{{ #conflict }} {{ #conflict }}
<button class='conflict'><span>{{ verify }}</span></button> <button class='conflict'><span>{{ verify }}</span></button>
<button class='cancel hide'><span>{{ cancel }}</span></button>
{{ /conflict }} {{ /conflict }}
</span> </span>
</div> </div>
@ -294,11 +295,8 @@
<div class='content'> <div class='content'>
<p> {{ message }} </p> <p> {{ message }} </p>
<p> {{{ verifyContact }}} </p> <p> {{{ verifyContact }}} </p>
<p>
<button class='cancel'>{{ cancel }}</button>
<button class='resolve'>{{ resolve }}</button>
</p>
</div> </div>
<button class='resolve'>{{ resolve }}</button>
</script> </script>
<script type='text/x-tmpl-mustache' id='window-controls'> <script type='text/x-tmpl-mustache' id='window-controls'>
<button class='minimize'>&minus;</button> <button class='minimize'>&minus;</button>

14
js/views/key_conflict_dialogue_view.js
View file

@ -7,25 +7,18 @@
window.Whisper = window.Whisper || {}; window.Whisper = window.Whisper || {};
Whisper.KeyConflictDialogueView = Whisper.View.extend({ Whisper.KeyConflictDialogueView = Whisper.View.extend({
className: 'key-conflict-dialogue', className: 'key-conflict-dialogue clearfix',
templateName: 'key-conflict-dialogue', templateName: 'key-conflict-dialogue',
initialize: function(options) { initialize: function(options) {
this.conversation = options.conversation; this.conversation = options.conversation;
}, },
events: { events: {
'click .verify': 'triggerVerify', 'click .verify': 'triggerVerify',
'click .resolve': 'resolve', 'click .resolve': 'resolve'
'click .cancel': 'remove',
'click': 'clickOut'
}, },
triggerVerify: function() { triggerVerify: function() {
this.trigger('verify', {identityKey: this.model.identityKey}); this.trigger('verify', {identityKey: this.model.identityKey});
}, },
clickOut: function(e) {
if (!$(e.target).closest('.content').length) {
this.remove();
}
},
resolve: function() { resolve: function() {
this.trigger('resolve'); this.trigger('resolve');
this.remove(); this.remove();
@ -33,8 +26,7 @@
}, },
render_attributes: function() { render_attributes: function() {
return { return {
message: this.model.message, message: i18n('identityChanged'),
cancel: i18n('cancel'),
resolve: i18n('acceptNewKey'), resolve: i18n('acceptNewKey'),
verifyContact: i18n('verifyContact') verifyContact: i18n('verifyContact')
}; };

18
js/views/message_detail_view.js
View file

@ -14,12 +14,21 @@
return (e.name === 'IncomingIdentityKeyError' || return (e.name === 'IncomingIdentityKeyError' ||
e.name === 'OutgoingIdentityKeyError'); e.name === 'OutgoingIdentityKeyError');
}); });
}, },
events: { events: {
'click .conflict': 'triggerConflict' 'click .conflict': 'triggerConflict',
'click .cancel' : 'cancel'
}, },
triggerConflict: function() { triggerConflict: function() {
this.$el.trigger('conflict', {conflict: this.conflict}); 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() { render_attributes: function() {
return { return {
@ -27,7 +36,8 @@
avatar : this.model.getAvatar(), avatar : this.model.getAvatar(),
conflict : this.conflict, conflict : this.conflict,
errors : this.errors, errors : this.errors,
verify : i18n('verify') verify : i18n('verify'),
cancel : i18n('cancel')
}; };
} }
}); });
@ -76,7 +86,7 @@
model: data.conflict, model: data.conflict,
conversation: this.conversation conversation: this.conversation
}); });
view.render().$el.appendTo(this.$el); view.render().$el.appendTo(data.el);
this.listenTo(view, 'verify', function(data) { this.listenTo(view, 'verify', function(data) {
this.verify(data.identityKey); this.verify(data.identityKey);
}); });

73
stylesheets/_conversation.scss
View file

@ -102,18 +102,23 @@
border-radius: 5px; border-radius: 5px;
button { button {
margin: 5px;
background: $blue;
outline: none; outline: none;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
padding: 0.5em; padding: 0.5em 1em;
font-weight: bold; font-weight: bold;
line-height: 18px;
span { span {
vertical-align: middle; vertical-align: middle;
} }
}
}
.hasRetry {
button {
margin: 5px;
background: $blue;
&:before { &:before {
content: ''; content: '';
@ -168,9 +173,34 @@
} }
} }
.conflicts .contact-detail {
padding: 1em;
border: 1px solid #ccc;
border-radius: 10px;
}
.contacts .contact-detail {
padding: 0 36px;
}
.contact-detail { .contact-detail {
margin-bottom: 5px; margin-bottom: 5px;
padding: 0 36px;
.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 { h3 {
@ -220,14 +250,11 @@
button.conflict { button.conflict {
float: right; float: right;
background: #d00; background: #d00;
}
span { button.cancel {
padding-left: 5px; float: right;
} color: $grey_d;
border: solid 1px #ccc;
&:before {
background: url('/images/error.png') no-repeat center center;
}
} }
} }
@ -485,28 +512,6 @@
} }
} }
.key-conflict-dialogue {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: $header-height;
.content {
padding: 1em;
background: white;
color: black;
box-shadow: 0 0 5px 0 black;
}
.verify {
color: $blue;
text-decoration: underline;
cursor: pointer;
}
}
.bottom-bar { .bottom-bar {
$button-width: 36px; $button-width: 36px;
margin-top: 4px; margin-top: 4px;

72
stylesheets/manifest.css
View file

@ -657,26 +657,27 @@ input.search {
border-radius: 5px; } border-radius: 5px; }
.message-detail .hasConflict button, .message-detail .hasConflict button,
.message-detail .hasRetry button { .message-detail .hasRetry button {
margin: 5px;
background: #2090ea;
outline: none; outline: none;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
padding: 0.5em; padding: 0.5em 1em;
font-weight: bold; } font-weight: bold;
line-height: 18px; }
.message-detail .hasConflict button span, .message-detail .hasConflict button span,
.message-detail .hasRetry button span { .message-detail .hasRetry button span {
vertical-align: middle; } vertical-align: middle; }
.message-detail .hasConflict button:before, .message-detail .hasRetry button {
.message-detail .hasRetry button:before { margin: 5px;
content: ''; background: #2090ea; }
display: inline-block; .message-detail .hasRetry button:before {
vertical-align: middle; content: '';
width: 18px; display: inline-block;
height: 18px; vertical-align: middle;
background: url("/images/refresh.png") no-repeat center center; width: 18px;
background-size: 100%; } height: 18px;
background: url("/images/refresh.png") no-repeat center center;
background-size: 100%; }
.message-detail .message-container { .message-detail .message-container {
background: white; background: white;
padding: 1em 0; } padding: 1em 0; }
@ -704,9 +705,25 @@ input.search {
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 .conflicts .contact-detail {
margin-bottom: 5px; padding: 1em;
border: 1px solid #ccc;
border-radius: 10px; }
.message-detail .contacts .contact-detail {
padding: 0 36px; } padding: 0 36px; }
.message-detail .contact-detail {
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 { .message-detail h3 {
font-size: 1em; font-size: 1em;
padding: 5px; } padding: 5px; }
@ -746,10 +763,10 @@ input.search {
.message-detail button.conflict { .message-detail button.conflict {
float: right; float: right;
background: #d00; } background: #d00; }
.message-detail button.conflict span { .message-detail button.cancel {
padding-left: 5px; } float: right;
.message-detail button.conflict:before { color: #454545;
background: url("/images/error.png") no-repeat center center; } border: solid 1px #ccc; }
.group-update { .group-update {
font-size: smaller; } font-size: smaller; }
@ -951,23 +968,6 @@ input.search {
.message-list .key-conflict button { .message-list .key-conflict button {
margin-top: 5px; } margin-top: 5px; }
.key-conflict-dialogue {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 36px; }
.key-conflict-dialogue .content {
padding: 1em;
background: white;
color: black;
box-shadow: 0 0 5px 0 black; }
.key-conflict-dialogue .verify {
color: #2090ea;
text-decoration: underline;
cursor: pointer; }
.bottom-bar { .bottom-bar {
margin-top: 4px; margin-top: 4px;
height: 36px; height: 36px;