Add an animated spinner when generating a private key.

This commit is contained in:
JC Brand 2014-01-31 13:40:33 +02:00
parent 8232cdaff2
commit 5406df1bc7
2 changed files with 28 additions and 20 deletions

View File

@ -333,7 +333,6 @@ you can use the generic selector below, but it's slower:
span.spinner { span.spinner {
background: url(images/spinner.gif) no-repeat center; background: url(images/spinner.gif) no-repeat center;
width: 22px;
height: 22px; height: 22px;
padding: 0 2px 0 2px; padding: 0 2px 0 2px;
display: block; display: block;
@ -1166,6 +1165,7 @@ ul.chat-toolbar li {
list-style: none; list-style: none;
padding: 0 3px 0 3px; padding: 0 3px 0 3px;
cursor: pointer; cursor: pointer;
margin-top: 1px;
} }
ul.chat-toolbar li:hover { ul.chat-toolbar li:hover {

View File

@ -554,8 +554,12 @@
// We need to generate a new key and instance tag // We need to generate a new key and instance tag
instance_tag = OTR.makeInstanceTag(); instance_tag = OTR.makeInstanceTag();
this.trigger('showHelpMessages', [__('Generating private key.')]); this.trigger('showHelpMessages', [
this.trigger('showHelpMessages', [__('Your browser might become unresponsive.')]); __('Generating private key.'),
__('Your browser might become unresponsive.')],
null,
true // show spinner
);
var clb = callback; var clb = callback;
setTimeout($.proxy(function () { setTimeout($.proxy(function () {
@ -568,7 +572,7 @@
window.sessionStorage[hex_sha1(this.id+'instance_tag')] = instance_tag; window.sessionStorage[hex_sha1(this.id+'instance_tag')] = instance_tag;
this.save({'pass_check': cipher.encrypt(CryptoJS.algo.AES, 'match', pass).toString()}); this.save({'pass_check': cipher.encrypt(CryptoJS.algo.AES, 'match', pass).toString()});
} }
this.trigger('showHelpMessages', [__('Private key generated.')]); this.trigger('showHelpMessages', [__('Private key generated.')], null, false);
clb({ clb({
'key': key, 'key': key,
'instance_tag': instance_tag 'instance_tag': instance_tag
@ -712,23 +716,22 @@
if ((!text) || (!converse.allow_otr)) { if ((!text) || (!converse.allow_otr)) {
return this.createMessage(message); return this.createMessage(message);
} }
if (_.contains([UNVERIFIED, VERIFIED], this.get('otr_status'))) { if (text.match(/^\?OTRv23?/)) {
if (text.match(/^\?OTRv23?/)) { this.initiateOTR(text);
this.initiateOTR(text);
} else {
this.otr.receiveMsg(text);
}
} else { } else {
if (text.match(/^\?OTR/)) { if (_.contains([UNVERIFIED, VERIFIED], this.get('otr_status'))) {
// They want to initiate OTR this.otr.receiveMsg(text);
if (!this.otr) {
this.initiateOTR(text);
} else {
this.otr.receiveMsg(text);
}
} else { } else {
// Normal unencrypted message. if (text.match(/^\?OTR/)) {
this.createMessage(message); if (!this.otr) {
this.initiateOTR(text);
} else {
this.otr.receiveMsg(text);
}
} else {
// Normal unencrypted message.
this.createMessage(message);
}
} }
} }
} }
@ -960,12 +963,17 @@
return this.scrollDown(); return this.scrollDown();
}, },
showHelpMessages: function (msgs, type) { showHelpMessages: function (msgs, type, spinner) {
var $chat_content = this.$el.find('.chat-content'), i, var $chat_content = this.$el.find('.chat-content'), i,
msgs_length = msgs.length; msgs_length = msgs.length;
for (i=0; i<msgs_length; i++) { for (i=0; i<msgs_length; i++) {
$chat_content.append($('<div class="chat-'+(type||'info')+'">'+msgs[i]+'</div>')); $chat_content.append($('<div class="chat-'+(type||'info')+'">'+msgs[i]+'</div>'));
} }
if (spinner === true) {
$chat_content.append('<span class="spinner"/>');
} else if (spinner === false) {
$chat_content.find('span.spinner').remove();
}
return this.scrollDown(); return this.scrollDown();
}, },