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

Update message bubble timestamps as needed

Browse source 
Display format consistent with Android:

* relative time for everything from today
* Day of week + time for within the past 7 days
* Static Month Day time for everything older

Each timestamp will only update as often as needed to stay accurate,
which is once a minute, once an hour, once a week, or never.

// FREEBIE
This commit is contained in:
lilia 2015-11-06 14:58:26 -08:00
parent ddd2e67eb5
commit 2ce890b845
3 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
background.html
View file

@ -77,7 +77,7 @@
<div class='attachments'></div>
<p class="content">{{ message }}</p>
<div class='meta'>
<span class='timestamp'>{{ timestamp }}</span>
<span class='timestamp' data-timestamp={{ timestamp }}></span>
<span class='status hide'></span>
</div>
</div>
@ -325,6 +325,7 @@
<script type="text/javascript" src="js/views/attachment_view.js"></script>
<script type="text/javascript" src="js/views/key_conflict_dialogue_view.js"></script>
<script type="text/javascript" src="js/views/error_view.js"></script>
<script type="text/javascript" src="js/views/timestamp_view.js"></script>
<script type="text/javascript" src="js/views/message_view.js"></script>
<script type="text/javascript" src="js/views/key_verification_view.js"></script>
<script type="text/javascript" src="js/views/message_detail_view.js"></script>

5
js/views/message_view.js
View file

@ -17,6 +17,7 @@
this.listenTo(this.model, 'destroy', this.remove);
this.listenTo(this.model, 'pending', this.renderPending);
this.listenTo(this.model, 'done', this.renderDone);
this.timeStampView = new Whisper.MessageTimestampView();
},
events: {
'click .timestamp': 'select',
@ -67,11 +68,13 @@
this.$el.html(
Mustache.render(this.template, {
message: this.model.get('body'),
timestamp: moment(this.model.get('sent_at')).fromNow(),
timestamp: this.model.get('sent_at'),
sender: (contact && contact.getTitle()) || '',
avatar: (contact && contact.getAvatar())
}, this.render_partials())
);
this.timeStampView.setElement(this.$('.timestamp'));
this.timeStampView.update();
this.renderControl();

53
js/views/timestamp_view.js Normal file
View file

@ -0,0 +1,53 @@
/*
* vim: ts=4:sw=4:expandtab
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.MessageTimestampView = Whisper.View.extend({
update: function() {
clearTimeout(this.timeout);
var millis_now = Date.now();
var millis = this.$el.data('timestamp');
if (millis >= millis_now) {
millis = millis_now;
}
var lastWeek = moment(millis_now).subtract(7, 'days');
var time = moment(millis);
var result = '';
if (time > moment(millis_now).startOf('day')) {
// t units ago
result = time.fromNow();
} else if (time > lastWeek) {
// Fri 1:30 PM or Fri 13:30
result = time.format('ddd ') + time.format('LT');
} else {
// Oct 31 1:30 PM or Oct 31
result = time.format('MMM D ') + time.format('LT');
}
this.$el.text(result);
var delay;
var millis_since = millis_now - millis;
if (millis_since <= moment.relativeTimeThreshold('s') * 1000) {
// a few seconds ago
delay = 45 * 1000 - millis_since;
} else if (millis_since <= moment.relativeTimeThreshold('m') * 1000 * 60) {
// N minutes ago
delay = 60 * 1000;
} else if (millis_since <= moment.relativeTimeThreshold('h') * 1000 * 60 * 60) {
// N hours ago
delay = 60 * 60 * 1000;
} else if (time > lastWeek) {
// Day of week + time
delay = 7 * 24 * 60 * 60 * 1000 - millis_since;
}
if (delay) {
if (delay < 0) { delay = 0; }
this.timeout = setTimeout(this.update.bind(this), delay);
}
}
});
})();