mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Animated loading screens on startup and first conversation load

Browse source 
FREEBIE
This commit is contained in:
Scott Nonnenberg 2017-07-24 18:43:35 -07:00
parent 3e8b34f3d0
commit 53f2bfbb57
15 changed files with 444 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
background.html
View file

@ -2,6 +2,26 @@
<html>
<head>
<meta charset='utf-8'>
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
<div class='content'>
<img src='/images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='/images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='two-column'>
<div class='gutter'>
<div class='network-status-container'></div>

41
js/background.js
View file

@ -13,6 +13,7 @@
// Close and reopen existing windows
var open = false;
var initialLoadComplete = false;
extension.windows.getAll().forEach(function(appWindow) {
open = true;
appWindow.close();
@ -121,7 +122,7 @@
messageReceiver.addEventListener('read', onReadReceipt);
messageReceiver.addEventListener('verified', onVerified);
messageReceiver.addEventListener('error', onError);
messageReceiver.addEventListener('empty', onEmpty);
window.textsecure.messaging = new textsecure.MessageSender(
SERVER_URL, SERVER_PORTS, USERNAME, PASSWORD
@ -145,6 +146,19 @@
}
}
function onEmpty() {
initialLoadComplete = true;
var interval = setInterval(function() {
var view = window.owsDesktopApp.inboxView;
if (view) {
clearInterval(interval);
interval = null;
view.onEmpty();
}
}, 500);
}
function onContactReceived(ev) {
var details = ev.contactDetails;
@ -196,14 +210,16 @@
var data = ev.data;
var message = initIncomingMessage(data);
isMessageDuplicate(message).then(function(isDuplicate) {
return isMessageDuplicate(message).then(function(isDuplicate) {
if (isDuplicate) {
console.log('Received duplicate message', message.idForLogging());
ev.confirm();
return;
}
message.handleDataMessage(data.message, ev.confirm);
return message.handleDataMessage(data.message, ev.confirm, {
initialLoadComplete: initialLoadComplete
});
});
}
@ -222,14 +238,16 @@
expirationStartTimestamp: data.expirationStartTimestamp,
});
isMessageDuplicate(message).then(function(isDuplicate) {
return isMessageDuplicate(message).then(function(isDuplicate) {
if (isDuplicate) {
console.log('Received duplicate message', message.idForLogging());
ev.confirm();
return;
}
message.handleDataMessage(data.message, ev.confirm);
return message.handleDataMessage(data.message, ev.confirm, {
initialLoadComplete: initialLoadComplete
});
});
}
@ -312,9 +330,9 @@
var envelope = ev.proto;
var message = initIncomingMessage(envelope.source, envelope.timestamp.toNumber());
message.saveErrors(e).then(function() {
return message.saveErrors(e).then(function() {
var id = message.get('conversationId');
ConversationController.findOrCreateById(id, 'private').then(function(conversation) {
return ConversationController.findOrCreateById(id, 'private').then(function(conversation) {
conversation.set({
active_at: Date.now(),
unreadCount: conversation.get('unreadCount') + 1
@ -327,10 +345,11 @@
}
conversation.save();
conversation.trigger('newmessage', message);
conversation.notify(message);
if (initialLoadComplete) {
conversation.notify(message);
}
});
});
return;
}
throw e;
@ -341,11 +360,13 @@
var timestamp = ev.read.timestamp;
var sender = ev.read.sender;
console.log('read receipt', sender, timestamp);
var receipt = Whisper.ReadReceipts.add({
sender : sender,
timestamp : timestamp,
read_at : read_at
});
receipt.on('remove', ev.confirm);
}
@ -411,12 +432,12 @@
timestamp: timestamp,
source: pushMessage.source
});
receipt.on('remove', ev.confirm);
}
window.owsDesktopApp = {
getAppView: function(destWindow) {
var self = this;
return ConversationController.updateInbox().then(function() {

97
js/libtextsecure.js
View file

@ -37484,13 +37484,16 @@ window.textsecure.utils = function() {
this.listeners = {};
}
var listeners = this.listeners[ev.type];
var results = [];
if (typeof listeners === 'object') {
for (var i=0; i < listeners.length; ++i) {
if (typeof listeners[i] === 'function') {
listeners[i].call(null, ev);
for (var i = 0, max = listeners.length; i < max; i += 1) {
var listener = listeners[i];
if (typeof listener === 'function') {
results.push(listener.call(null, ev));
}
}
}
return results;
},
addEventListener: function(eventName, callback) {
if (typeof eventName !== 'string') {
@ -38284,22 +38287,25 @@ MessageReceiver.prototype.extend({
onerror: function(error) {
console.log('websocket error');
},
dispatchAndWait: function(event) {
return Promise.all(this.dispatchEvent(event));
},
onclose: function(ev) {
console.log('websocket closed', ev.code, ev.reason || '');
if (ev.code === 3000) {
return;
}
var eventTarget = this;
// possible 403 or network issue. Make an request to confirm
this.server.getDevices(this.number).
then(this.connect.bind(this)). // No HTTP error? Reconnect
catch(function(e) {
this.server.getDevices(this.number)
.then(this.connect.bind(this)) // No HTTP error? Reconnect
.catch(function(e) {
var ev = new Event('error');
ev.error = e;
eventTarget.dispatchEvent(ev);
});
this.dispatchAndWait(ev);
}.bind(this));
},
handleRequest: function(request) {
this.incoming = this.incoming || [];
// We do the message decryption here, instead of in the ordered pending queue,
// to avoid exposing the time it took us to process messages through the time-to-ack.
@ -38307,10 +38313,14 @@ MessageReceiver.prototype.extend({
if (request.path !== '/api/v1/message') {
console.log('got request', request.verb, request.path);
request.respond(200, 'OK');
if (request.verb === 'PUT' && request.path === '/api/v1/queue/empty') {
this.onEmpty();
}
return;
}
textsecure.crypto.decryptWebsocketMessage(request.body, this.signalingKey).then(function(plaintext) {
this.incoming.push(textsecure.crypto.decryptWebsocketMessage(request.body, this.signalingKey).then(function(plaintext) {
var envelope = textsecure.protobuf.Envelope.decode(plaintext);
// After this point, decoding errors are not the server's
// fault, and we should handle them gracefully and tell the
@ -38320,7 +38330,7 @@ MessageReceiver.prototype.extend({
return request.respond(200, 'OK');
}
this.addToCache(envelope, plaintext).then(function() {
return this.addToCache(envelope, plaintext).then(function() {
request.respond(200, 'OK');
this.queueEnvelope(envelope);
}.bind(this), function(error) {
@ -38334,8 +38344,23 @@ MessageReceiver.prototype.extend({
console.log("Error handling incoming message:", e && e.stack ? e.stack : e);
var ev = new Event('error');
ev.error = e;
this.dispatchEvent(ev);
}.bind(this));
return this.dispatchAndWait(ev);
}.bind(this)));
},
onEmpty: function() {
var incoming = this.incoming;
this.incoming = [];
var dispatchEmpty = function() {
var ev = new Event('empty');
return this.dispatchAndWait(ev);
}.bind(this);
var scheduleDispatch = function() {
this.pending = this.pending.then(dispatchEmpty, dispatchEmpty);
}.bind(this);
Promise.all(incoming).then(scheduleDispatch, scheduleDispatch);
},
queueAllCached: function() {
this.getAllFromCache().then(function(items) {
@ -38484,12 +38509,11 @@ MessageReceiver.prototype.extend({
}
},
onDeliveryReceipt: function (envelope) {
return new Promise(function(resolve) {
return new Promise(function(resolve, reject) {
var ev = new Event('receipt');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.proto = envelope;
this.dispatchEvent(ev);
return resolve();
this.dispatchAndWait(ev).then(resolve, reject);
}.bind(this));
},
unpad: function(paddedPlaintext) {
@ -38548,8 +38572,11 @@ MessageReceiver.prototype.extend({
var ev = new Event('error');
ev.error = error;
ev.proto = envelope;
this.dispatchEvent(ev);
return Promise.reject(error);
var returnError = function() {
return Promise.reject(error);
};
this.dispatchAndWait(ev).then(returnError, returnError);
}.bind(this));
},
decryptPreKeyWhisperMessage: function(ciphertext, sessionCipher, address) {
@ -38586,7 +38613,7 @@ MessageReceiver.prototype.extend({
if (expirationStartTimestamp) {
ev.data.expirationStartTimestamp = expirationStartTimestamp.toNumber();
}
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -38608,7 +38635,7 @@ MessageReceiver.prototype.extend({
timestamp : envelope.timestamp.toNumber(),
message : message
};
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -38696,9 +38723,10 @@ MessageReceiver.prototype.extend({
identityKey: verified.identityKey.toArrayBuffer()
};
ev.viaContactSync = options.viaContactSync;
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
},
handleRead: function(envelope, read) {
var results = [];
for (var i = 0; i < read.length; ++i) {
var ev = new Event('read');
ev.confirm = this.removeFromCache.bind(this, envelope);
@ -38707,24 +38735,30 @@ MessageReceiver.prototype.extend({
timestamp : read[i].timestamp.toNumber(),
sender : read[i].sender
}
this.dispatchEvent(ev);
results.push(this.dispatchAndWait(ev));
}
return Promise.all(results);
},
handleContacts: function(envelope, contacts) {
console.log('contact sync');
var eventTarget = this;
var attachmentPointer = contacts.blob;
return this.handleAttachment(attachmentPointer).then(function() {
var results = [];
var contactBuffer = new ContactBuffer(attachmentPointer.data);
var contactDetails = contactBuffer.next();
while (contactDetails !== undefined) {
var ev = new Event('contact');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.contactDetails = contactDetails;
eventTarget.dispatchEvent(ev);
results.push(eventTarget.dispatchAndWait(ev));
if (contactDetails.verified) {
this.handleVerified(envelope, contactDetails.verified, {viaContactSync: true});
results.push(this.handleVerified(
envelope,
contactDetails.verified,
{viaContactSync: true}
));
}
contactDetails = contactBuffer.next();
@ -38732,12 +38766,13 @@ MessageReceiver.prototype.extend({
var ev = new Event('contactsync');
ev.confirm = this.removeFromCache.bind(this, envelope);
eventTarget.dispatchEvent(ev);
results.push(eventTarget.dispatchAndWait(ev));
return Promise.all(results);
}.bind(this));
},
handleGroups: function(envelope, groups) {
console.log('group sync');
var eventTarget = this;
var attachmentPointer = groups.blob;
return this.handleAttachment(attachmentPointer).then(function() {
var groupBuffer = new GroupBuffer(attachmentPointer.data);
@ -38766,7 +38801,7 @@ MessageReceiver.prototype.extend({
var ev = new Event('group');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.groupDetails = groupDetails;
eventTarget.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this)).catch(function(e) {
console.log('error processing group', e);
});
@ -38777,7 +38812,7 @@ MessageReceiver.prototype.extend({
Promise.all(promises).then(function() {
var ev = new Event('groupsync');
ev.confirm = this.removeFromCache.bind(this, envelope);
eventTarget.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -38805,9 +38840,9 @@ MessageReceiver.prototype.extend({
attachment.data = data;
}
return this.server.getAttachment(attachment.id).
then(decryptAttachment).
then(updateAttachment);
return this.server.getAttachment(attachment.id)
.then(decryptAttachment)
.then(updateAttachment);
},
tryMessageAgain: function(from, ciphertext) {
var address = libsignal.SignalProtocolAddress.fromString(from);

2
js/models/conversations.js
View file

@ -344,7 +344,7 @@
// Lastly, we don't send read receipts for any message marked read due to a read
// receipt. That's a notification explosion we don't need.
this.queueJob(function() {
return this.queueJob(function() {
return this.markRead(message.get('received_at'), {sendReadReceipts: false});
}.bind(this));
},

9
js/models/messages.js
View file

@ -342,7 +342,10 @@
this.send(promise);
}
},
handleDataMessage: function(dataMessage, confirm) {
handleDataMessage: function(dataMessage, confirm, options) {
options = options || {};
_.defaults(options, {initialLoadComplete: true});
// This function can be called from the background script on an
// incoming message or from the frontend after the user accepts an
// identity key change.
@ -357,7 +360,7 @@
console.log('queuing handleDataMessage', message.idForLogging());
var conversation = ConversationController.create({id: conversationId});
conversation.queueJob(function() {
return conversation.queueJob(function() {
return new Promise(function(resolve) {
conversation.fetch().always(function() {
console.log('starting handleDataMessage', message.idForLogging());
@ -500,7 +503,7 @@
// because we need to start expiration timers, etc.
message.markRead();
}
if (message.get('unread')) {
if (message.get('unread') && options.initialLoadComplete) {
conversation.notify(message);
}

26
js/views/conversation_view.js
View file

@ -57,6 +57,14 @@
}
});
Whisper.ConversationLoadingScreen = Whisper.View.extend({
templateName: 'conversation-loading-screen',
className: 'conversation-loading-screen',
render_attributes: {
loading: i18n('loading')
}
});
Whisper.ConversationTitleView = Whisper.View.extend({
templateName: 'conversation-title',
initialize: function() {
@ -116,6 +124,11 @@
);
this.render();
this.loadingScreen = new Whisper.ConversationLoadingScreen();
this.loadingScreen.render();
this.loadingScreen.$el.prependTo(this.el);
new TimerMenuView({ el: this.$('.timer-menu'), model: this.model });
emoji_util.parse(this.$('.conversation-name'));
@ -321,9 +334,15 @@
setTimeout(this.markRead.bind(this), 1);
},
onLoaded: function () {
var view = this.loadingScreen;
if (view) {
this.loadingScreen = null;
view.remove();
}
},
onOpened: function() {
// TODO: we may want to show a loading dialog until this status fetch
// and potentially the below message fetch are complete.
this.statusFetch = this.throttledGetProfiles().then(function() {
this.model.updateVerified().then(function() {
this.onVerifiedChange();
@ -332,6 +351,9 @@
}.bind(this));
}.bind(this));
Promise.all([this.statusFetch, this.inProgressFetch])
.then(this.onLoaded.bind(this), this.onLoaded.bind(this));
this.view.resetScrollPosition();
this.$el.trigger('force-resize');
this.focusMessageField();

21
js/views/inbox_view.js
View file

@ -60,6 +60,15 @@
}
});
Whisper.AppLoadingScreen = Whisper.View.extend({
templateName: 'app-loading-screen',
className: 'app-loading-screen',
render_attributes: {
loading: i18n('loading')
}
});
Whisper.InboxView = Whisper.View.extend({
templateName: 'two-column',
className: 'inbox',
@ -71,6 +80,7 @@
.addClass(theme);
},
initialize: function (options) {
this.ready = false;
this.render();
this.applyTheme();
this.$el.attr('tabindex', '1');
@ -80,6 +90,10 @@
model: { window: options.window }
});
this.appLoadingScreen = new Whisper.AppLoadingScreen();
this.appLoadingScreen.render();
this.appLoadingScreen.$el.prependTo(this.el);
var inboxCollection = getInboxCollection();
inboxCollection.on('messageError', function() {
@ -146,6 +160,13 @@
'click .restart-signal': 'reloadBackgroundPage',
'show .lightbox': 'showLightbox'
},
onEmpty: function() {
var view = this.appLoadingScreen;
if (view) {
this.appLoadingScreen = null;
view.remove();
}
},
focusConversation: function(e) {
if (e && this.$(e.target).closest('.placeholder').length) {
return;

9
libtextsecure/event_target.js
View file

@ -23,13 +23,16 @@
this.listeners = {};
}
var listeners = this.listeners[ev.type];
var results = [];
if (typeof listeners === 'object') {
for (var i=0; i < listeners.length; ++i) {
if (typeof listeners[i] === 'function') {
listeners[i].call(null, ev);
for (var i = 0, max = listeners.length; i < max; i += 1) {
var listener = listeners[i];
if (typeof listener === 'function') {
results.push(listener.call(null, ev));
}
}
}
return results;
},
addEventListener: function(eventName, callback) {
if (typeof eventName !== 'string') {

88
libtextsecure/message_receiver.js
View file

@ -45,22 +45,25 @@ MessageReceiver.prototype.extend({
onerror: function(error) {
console.log('websocket error');
},
dispatchAndWait: function(event) {
return Promise.all(this.dispatchEvent(event));
},
onclose: function(ev) {
console.log('websocket closed', ev.code, ev.reason || '');
if (ev.code === 3000) {
return;
}
var eventTarget = this;
// possible 403 or network issue. Make an request to confirm
this.server.getDevices(this.number).
then(this.connect.bind(this)). // No HTTP error? Reconnect
catch(function(e) {
this.server.getDevices(this.number)
.then(this.connect.bind(this)) // No HTTP error? Reconnect
.catch(function(e) {
var ev = new Event('error');
ev.error = e;
eventTarget.dispatchEvent(ev);
});
this.dispatchAndWait(ev);
}.bind(this));
},
handleRequest: function(request) {
this.incoming = this.incoming || [];
// We do the message decryption here, instead of in the ordered pending queue,
// to avoid exposing the time it took us to process messages through the time-to-ack.
@ -68,10 +71,14 @@ MessageReceiver.prototype.extend({
if (request.path !== '/api/v1/message') {
console.log('got request', request.verb, request.path);
request.respond(200, 'OK');
if (request.verb === 'PUT' && request.path === '/api/v1/queue/empty') {
this.onEmpty();
}
return;
}
textsecure.crypto.decryptWebsocketMessage(request.body, this.signalingKey).then(function(plaintext) {
this.incoming.push(textsecure.crypto.decryptWebsocketMessage(request.body, this.signalingKey).then(function(plaintext) {
var envelope = textsecure.protobuf.Envelope.decode(plaintext);
// After this point, decoding errors are not the server's
// fault, and we should handle them gracefully and tell the
@ -81,7 +88,7 @@ MessageReceiver.prototype.extend({
return request.respond(200, 'OK');
}
this.addToCache(envelope, plaintext).then(function() {
return this.addToCache(envelope, plaintext).then(function() {
request.respond(200, 'OK');
this.queueEnvelope(envelope);
}.bind(this), function(error) {
@ -95,8 +102,23 @@ MessageReceiver.prototype.extend({
console.log("Error handling incoming message:", e && e.stack ? e.stack : e);
var ev = new Event('error');
ev.error = e;
this.dispatchEvent(ev);
}.bind(this));
return this.dispatchAndWait(ev);
}.bind(this)));
},
onEmpty: function() {
var incoming = this.incoming;
this.incoming = [];
var dispatchEmpty = function() {
var ev = new Event('empty');
return this.dispatchAndWait(ev);
}.bind(this);
var scheduleDispatch = function() {
this.pending = this.pending.then(dispatchEmpty, dispatchEmpty);
}.bind(this);
Promise.all(incoming).then(scheduleDispatch, scheduleDispatch);
},
queueAllCached: function() {
this.getAllFromCache().then(function(items) {
@ -245,12 +267,11 @@ MessageReceiver.prototype.extend({
}
},
onDeliveryReceipt: function (envelope) {
return new Promise(function(resolve) {
return new Promise(function(resolve, reject) {
var ev = new Event('receipt');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.proto = envelope;
this.dispatchEvent(ev);
return resolve();
this.dispatchAndWait(ev).then(resolve, reject);
}.bind(this));
},
unpad: function(paddedPlaintext) {
@ -309,8 +330,11 @@ MessageReceiver.prototype.extend({
var ev = new Event('error');
ev.error = error;
ev.proto = envelope;
this.dispatchEvent(ev);
return Promise.reject(error);
var returnError = function() {
return Promise.reject(error);
};
this.dispatchAndWait(ev).then(returnError, returnError);
}.bind(this));
},
decryptPreKeyWhisperMessage: function(ciphertext, sessionCipher, address) {
@ -347,7 +371,7 @@ MessageReceiver.prototype.extend({
if (expirationStartTimestamp) {
ev.data.expirationStartTimestamp = expirationStartTimestamp.toNumber();
}
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -369,7 +393,7 @@ MessageReceiver.prototype.extend({
timestamp : envelope.timestamp.toNumber(),
message : message
};
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -457,9 +481,10 @@ MessageReceiver.prototype.extend({
identityKey: verified.identityKey.toArrayBuffer()
};
ev.viaContactSync = options.viaContactSync;
this.dispatchEvent(ev);
return this.dispatchAndWait(ev);
},
handleRead: function(envelope, read) {
var results = [];
for (var i = 0; i < read.length; ++i) {
var ev = new Event('read');
ev.confirm = this.removeFromCache.bind(this, envelope);
@ -468,24 +493,30 @@ MessageReceiver.prototype.extend({
timestamp : read[i].timestamp.toNumber(),
sender : read[i].sender
}
this.dispatchEvent(ev);
results.push(this.dispatchAndWait(ev));
}
return Promise.all(results);
},
handleContacts: function(envelope, contacts) {
console.log('contact sync');
var eventTarget = this;
var attachmentPointer = contacts.blob;
return this.handleAttachment(attachmentPointer).then(function() {
var results = [];
var contactBuffer = new ContactBuffer(attachmentPointer.data);
var contactDetails = contactBuffer.next();
while (contactDetails !== undefined) {
var ev = new Event('contact');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.contactDetails = contactDetails;
eventTarget.dispatchEvent(ev);
results.push(eventTarget.dispatchAndWait(ev));
if (contactDetails.verified) {
this.handleVerified(envelope, contactDetails.verified, {viaContactSync: true});
results.push(this.handleVerified(
envelope,
contactDetails.verified,
{viaContactSync: true}
));
}
contactDetails = contactBuffer.next();
@ -493,12 +524,13 @@ MessageReceiver.prototype.extend({
var ev = new Event('contactsync');
ev.confirm = this.removeFromCache.bind(this, envelope);
eventTarget.dispatchEvent(ev);
results.push(eventTarget.dispatchAndWait(ev));
return Promise.all(results);
}.bind(this));
},
handleGroups: function(envelope, groups) {
console.log('group sync');
var eventTarget = this;
var attachmentPointer = groups.blob;
return this.handleAttachment(attachmentPointer).then(function() {
var groupBuffer = new GroupBuffer(attachmentPointer.data);
@ -527,7 +559,7 @@ MessageReceiver.prototype.extend({
var ev = new Event('group');
ev.confirm = this.removeFromCache.bind(this, envelope);
ev.groupDetails = groupDetails;
eventTarget.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this)).catch(function(e) {
console.log('error processing group', e);
});
@ -538,7 +570,7 @@ MessageReceiver.prototype.extend({
Promise.all(promises).then(function() {
var ev = new Event('groupsync');
ev.confirm = this.removeFromCache.bind(this, envelope);
eventTarget.dispatchEvent(ev);
return this.dispatchAndWait(ev);
}.bind(this));
}.bind(this));
},
@ -566,9 +598,9 @@ MessageReceiver.prototype.extend({
attachment.data = data;
}
return this.server.getAttachment(attachment.id).
then(decryptAttachment).
then(updateAttachment);
return this.server.getAttachment(attachment.id)
.then(decryptAttachment)
.then(updateAttachment);
},
tryMessageAgain: function(from, ciphertext) {
var address = libsignal.SignalProtocolAddress.fromString(from);

45
stylesheets/_conversation.scss
View file

@ -32,6 +32,51 @@
.conversation {
background-color: white;
height: 100%;
position: relative;
.conversation-loading-screen {
z-index: 99;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #eee;
display: flex;
align-items: center;
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
width: 78px;
transform: translate(-50%, 0);
}
.dot {
width: 14px;
height: 14px;
border: 3px solid $blue;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);
animation: loading 1500ms ease infinite 0ms;
&:nth-child(2) {
animation: loading 1500ms ease infinite 333ms;
}
&:nth-child(3) {
animation: loading 1500ms ease infinite 666ms;
}
}
}
.panel {
height: calc(100% - #{$header-height});

58
stylesheets/_global.scss
View file

@ -539,6 +539,64 @@ input[type=text], input[type=search], textarea {
}
}
.inbox {
position: relative;
}
@keyframes loading {
50% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
.app-loading-screen {
z-index: 1000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: white;
display: flex;
align-items: center;
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 78px;
}
.dot {
width: 14px;
height: 14px;
border: 3px solid $blue;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);
animation: loading 1500ms ease infinite 0ms;
&:nth-child(2) {
animation: loading 1500ms ease infinite 333ms;
}
&:nth-child(3) {
animation: loading 1500ms ease infinite 666ms;
}
}
}
//yellow border fix
.inbox:focus {
outline: none;

3
stylesheets/android-dark.scss
View file

@ -88,6 +88,9 @@ $text-dark_l2: darken($text-dark, 30%);
.conversation.placeholder .conversation-header {
display: none;
}
.conversation .conversation-loading-screen {
background-color: $grey-dark_l3;
}
.avatar, .conversation-header, .bubble {
@include dark-avatar-colors;
}

81
stylesheets/manifest.css
View file

@ -484,6 +484,49 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
background: #2090ea;
margin-left: 20px; }
.inbox {
position: relative; }
@keyframes loading {
50% {
transform: scale(1);
opacity: 1; }
100% {
opacity: 0; } }
.app-loading-screen {
z-index: 1000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: white;
display: flex;
align-items: center; }
.app-loading-screen .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.app-loading-screen .container {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
width: 78px; }
.app-loading-screen .dot {
width: 14px;
height: 14px;
border: 3px solid #2090ea;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);
animation: loading 1500ms ease infinite 0ms; }
.app-loading-screen .dot:nth-child(2) {
animation: loading 1500ms ease infinite 333ms; }
.app-loading-screen .dot:nth-child(3) {
animation: loading 1500ms ease infinite 666ms; }
.inbox:focus {
outline: none; }
@ -1051,7 +1094,41 @@ input.search {
.conversation {
background-color: white;
height: 100%; }
height: 100%;
position: relative; }
.conversation .conversation-loading-screen {
z-index: 99;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #eee;
display: flex;
align-items: center; }
.conversation .conversation-loading-screen .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.conversation .conversation-loading-screen .container {
position: absolute;
left: 50%;
width: 78px;
transform: translate(-50%, 0); }
.conversation .conversation-loading-screen .dot {
width: 14px;
height: 14px;
border: 3px solid #2090ea;
border-radius: 50%;
float: left;
margin: 0 6px;
transform: scale(0);
animation: loading 1500ms ease infinite 0ms; }
.conversation .conversation-loading-screen .dot:nth-child(2) {
animation: loading 1500ms ease infinite 333ms; }
.conversation .conversation-loading-screen .dot:nth-child(3) {
animation: loading 1500ms ease infinite 666ms; }
.conversation .panel {
height: calc(100% - 64px);
overflow-y: scroll; }
@ -2099,6 +2176,8 @@ li.entry .error-icon-container {
border-color: #333333; }
.android-dark .conversation.placeholder .conversation-header {
display: none; }
.android-dark .conversation .conversation-loading-screen {
background-color: #171717; }
.android-dark .avatar.red, .android-dark .conversation-header.red, .android-dark .bubble.red {
background-color: #D32F2F; }
.android-dark .avatar.pink, .android-dark .conversation-header.pink, .android-dark .bubble.pink {

3
test/fixtures_test.js
View file

@ -13,14 +13,17 @@ describe("Fixtures", function() {
it('renders', function(done) {
ConversationController.updateInbox().then(function() {
var view = new Whisper.InboxView({window: window});
view.onEmpty();
view.$el.prependTo($('#render-android'));
var view = new Whisper.InboxView({window: window});
view.$el.removeClass('android').addClass('ios');
view.onEmpty();
view.$el.prependTo($('#render-ios'));
var view = new Whisper.InboxView({window: window});
view.$el.removeClass('android').addClass('android-dark');
view.onEmpty();
view.$el.prependTo($('#render-android-dark'));
}).then(done, done);
});

20
test/index.html
View file

@ -16,6 +16,26 @@
</div>
<div id="render-ios" class='index' style="width: 800; height: 500; margin:10px; border: solid 1px black;">
</div>
<script type='text/x-tmpl-mustache' id='app-loading-screen'>
<div class='content'>
<img src='/images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='conversation-loading-screen'>
<div class='content'>
<img src='/images/icon_128.png'>
<div class='container'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='two-column'>
<div class='gutter'>
<div class='network-status-container'></div>