Display key conflict dialog inline
One less modal. // FREEBIE
This commit is contained in:
lilia
parent
ad66da9fb5
commit
5340791868
6 changed files with 107 additions and 91 deletions
|
|
@ -9,7 +9,15 @@
|
|||
"message": "Submit"
|
||||
},
|
||||
"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": {
|
||||
"message": "Accept new key"
|
||||
|
|
@ -20,6 +28,9 @@
|
|||
"newIdentity": {
|
||||
"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": {
|
||||
"message": "This contact's identity key has changed. Click to process and display."
|
||||
},
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@
|
|||
<p>{{ message }}</p>
|
||||
</script>
|
||||
<script type='text/x-tmpl-mustache' id='contact-detail'>
|
||||
<div>
|
||||
<div class='clearfix'>
|
||||
{{ #errors }}
|
||||
<span class='error-icon'>
|
||||
<span class='error-message'>{{message}}</span>
|
||||
|
|
@ -286,6 +286,7 @@
|
|||
<span class='name'>{{ name }}
|
||||
{{ #conflict }}
|
||||
<button class='conflict'><span>{{ verify }}</span></button>
|
||||
<button class='cancel hide'><span>{{ cancel }}</span></button>
|
||||
{{ /conflict }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -294,11 +295,8 @@
|
|||
<div class='content'>
|
||||
<p> {{ message }} </p>
|
||||
<p> {{{ verifyContact }}} </p>
|
||||
<p>
|
||||
<button class='cancel'>{{ cancel }}</button>
|
||||
<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'>−</button>
|
||||
|
|
|
|||
|
|
@ -7,25 +7,18 @@
|
|||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.KeyConflictDialogueView = Whisper.View.extend({
|
||||
className: 'key-conflict-dialogue',
|
||||
className: 'key-conflict-dialogue clearfix',
|
||||
templateName: 'key-conflict-dialogue',
|
||||
initialize: function(options) {
|
||||
this.conversation = options.conversation;
|
||||
},
|
||||
events: {
|
||||
'click .verify': 'triggerVerify',
|
||||
'click .resolve': 'resolve',
|
||||
'click .cancel': 'remove',
|
||||
'click': 'clickOut'
|
||||
'click .resolve': 'resolve'
|
||||
},
|
||||
triggerVerify: function() {
|
||||
this.trigger('verify', {identityKey: this.model.identityKey});
|
||||
},
|
||||
clickOut: function(e) {
|
||||
if (!$(e.target).closest('.content').length) {
|
||||
this.remove();
|
||||
}
|
||||
},
|
||||
resolve: function() {
|
||||
this.trigger('resolve');
|
||||
this.remove();
|
||||
|
|
@ -33,8 +26,7 @@
|
|||
},
|
||||
render_attributes: function() {
|
||||
return {
|
||||
message: this.model.message,
|
||||
cancel: i18n('cancel'),
|
||||
message: i18n('identityChanged'),
|
||||
resolve: i18n('acceptNewKey'),
|
||||
verifyContact: i18n('verifyContact')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,12 +14,21 @@
|
|||
return (e.name === 'IncomingIdentityKeyError' ||
|
||||
e.name === 'OutgoingIdentityKeyError');
|
||||
});
|
||||
|
||||
},
|
||||
events: {
|
||||
'click .conflict': 'triggerConflict'
|
||||
'click .conflict': 'triggerConflict',
|
||||
'click .cancel' : 'cancel'
|
||||
},
|
||||
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() {
|
||||
return {
|
||||
|
|
@ -27,7 +36,8 @@
|
|||
avatar : this.model.getAvatar(),
|
||||
conflict : this.conflict,
|
||||
errors : this.errors,
|
||||
verify : i18n('verify')
|
||||
verify : i18n('verify'),
|
||||
cancel : i18n('cancel')
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -76,7 +86,7 @@
|
|||
model: data.conflict,
|
||||
conversation: this.conversation
|
||||
});
|
||||
view.render().$el.appendTo(this.$el);
|
||||
view.render().$el.appendTo(data.el);
|
||||
this.listenTo(view, 'verify', function(data) {
|
||||
this.verify(data.identityKey);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -102,18 +102,23 @@
|
|||
border-radius: 5px;
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
background: $blue;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hasRetry {
|
||||
button {
|
||||
margin: 5px;
|
||||
background: $blue;
|
||||
|
||||
&:before {
|
||||
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 {
|
||||
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 {
|
||||
|
|
@ -220,14 +250,11 @@
|
|||
button.conflict {
|
||||
float: right;
|
||||
background: #d00;
|
||||
|
||||
span {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: url('/images/error.png') no-repeat center center;
|
||||
}
|
||||
}
|
||||
button.cancel {
|
||||
float: right;
|
||||
color: $grey_d;
|
||||
border: solid 1px #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
$button-width: 36px;
|
||||
margin-top: 4px;
|
||||
|
|
|
|||
|
|
@ -657,26 +657,27 @@ input.search {
|
|||
border-radius: 5px; }
|
||||
.message-detail .hasConflict button,
|
||||
.message-detail .hasRetry button {
|
||||
margin: 5px;
|
||||
background: #2090ea;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
font-weight: bold; }
|
||||
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 .hasConflict button:before,
|
||||
.message-detail .hasRetry 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 .hasRetry button {
|
||||
margin: 5px;
|
||||
background: #2090ea; }
|
||||
.message-detail .hasRetry 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 .message-container {
|
||||
background: white;
|
||||
padding: 1em 0; }
|
||||
|
|
@ -704,9 +705,25 @@ input.search {
|
|||
height: 18px;
|
||||
background: url("/images/refresh.png") no-repeat center center;
|
||||
background-size: 100%; }
|
||||
.message-detail .contact-detail {
|
||||
margin-bottom: 5px;
|
||||
.message-detail .conflicts .contact-detail {
|
||||
padding: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 10px; }
|
||||
.message-detail .contacts .contact-detail {
|
||||
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 {
|
||||
font-size: 1em;
|
||||
padding: 5px; }
|
||||
|
|
@ -746,10 +763,10 @@ input.search {
|
|||
.message-detail button.conflict {
|
||||
float: right;
|
||||
background: #d00; }
|
||||
.message-detail button.conflict span {
|
||||
padding-left: 5px; }
|
||||
.message-detail button.conflict:before {
|
||||
background: url("/images/error.png") no-repeat center center; }
|
||||
.message-detail button.cancel {
|
||||
float: right;
|
||||
color: #454545;
|
||||
border: solid 1px #ccc; }
|
||||
|
||||
.group-update {
|
||||
font-size: smaller; }
|
||||
|
|
@ -951,23 +968,6 @@ input.search {
|
|||
.message-list .key-conflict button {
|
||||
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 {
|
||||
margin-top: 4px;
|
||||
height: 36px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue