Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a relative prefix to the date divider in the chat #591

Merged
merged 4 commits into from
Jan 17, 2018
Merged

Add a relative prefix to the date divider in the chat #591

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4826207
Add a relative prefix to the date divider in the chat
nickvergessen Jan 15, 2018
15758db
Show date in first message
danxuliu Jan 16, 2018
af8e1aa
No relative date on the comment after a day, makes no sense...
nickvergessen Jan 16, 2018
a86d12b
Do not update non-relative dates and show seconds again
nickvergessen Jan 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 40 additions & 13 deletions js/views/chatview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global autosize, Marionette, Handlebars, OC, OCA, OCP */
/* global autosize, Handlebars, Marionette, moment, OC, OCA, OCP */

/**
*
Expand All @@ -21,7 +21,7 @@
*
*/

(function(OCA, OC, OCP, Marionette, Handlebars, autosize) {
(function(OCA, OC, OCP, Marionette, Handlebars, autosize, moment) {
'use strict';

OCA.SpreedMe = OCA.SpreedMe || {};
Expand Down Expand Up @@ -52,7 +52,7 @@
' <div class="authorRow">' +
' <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
' <div class="author">{{actorDisplayName}}</div>' +
' <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
' <div class="date has-tooltip{{#if relativeDate}} live-relative-timestamp{{/if}}" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
' </div>' +
' <div class="message">{{{formattedMessage}}}</div>' +
'</li>';
Expand Down Expand Up @@ -142,7 +142,8 @@
_formatItem: function(commentModel) {
// PHP timestamp is second-based; JavaScript timestamp is
// millisecond based.
var timestamp = commentModel.get('timestamp') * 1000;
var timestamp = commentModel.get('timestamp') * 1000,
relativeDate = moment(timestamp, 'x').diff(moment()) > -86400000;

var actorDisplayName = commentModel.get('actorDisplayName');
if (commentModel.attributes.actorType === 'guests') {
Expand All @@ -159,8 +160,9 @@
var data = _.extend({}, commentModel.attributes, {
actorDisplayName: actorDisplayName,
timestamp: timestamp,
date: OC.Util.relativeModifiedDate(timestamp),
altDate: OC.Util.formatDate(timestamp, 'LL LTS'),
date: relativeDate ? OC.Util.relativeModifiedDate(timestamp) : OC.Util.formatDate(timestamp, 'LTS'),
relativeDate: relativeDate,
altDate: OC.Util.formatDate(timestamp),
formattedMessage: formattedMessage
});
return data;
Expand Down Expand Up @@ -208,14 +210,12 @@
// millisecond based.
model.set('date', new Date(model.get('timestamp') * 1000));

if (this._lastAddedMessageModel && !this._modelsHaveSameDate(this._lastAddedMessageModel, model)) {
// 'LL' formats a localized date including day of month, month
// name and year
if (!this._lastAddedMessageModel || !this._modelsHaveSameDate(this._lastAddedMessageModel, model)) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to be sure, the condition was changed to make the date divider appear before the first message, right?

if (this._oldestOnTopLayout) {
$el.attr('data-date', OC.Util.formatDate(model.get('date'), 'LL'));
$el.attr('data-date', this._getDateSeparator(model.get('date')));
$el.addClass('showDate');
} else {
$el.next().attr('data-date', OC.Util.formatDate(this._lastAddedMessageModel.get('date'), 'LL'));
} else if (this._lastAddedMessageModel) {
$el.next().attr('data-date', this._getDateSeparator(this._lastAddedMessageModel.get('date')));
$el.next().addClass('showDate');
}
}
Expand All @@ -242,6 +242,33 @@
}
},

_getDateSeparator: function(timestamp) {
var date = moment(timestamp, 'x'),
today = moment(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it would be better to call it now instead of today? Not really sure which one would be clearer, though.

dayOfYear = OC.Util.formatDate(date, 'YYYY-DDD'),
dayOfYearToday = OC.Util.formatDate(today, 'YYYY-DDD');

var relativePrefix = '';
if (dayOfYear === dayOfYearToday) {
relativePrefix = t('spreed', 'Today');
} else {
var yesterday = OC.Util.formatDate(today.subtract(1, 'd'), 'YYYY-DDD');

if (dayOfYear === yesterday) {
relativePrefix = t('spreed', 'Yesterday');
} else {
relativePrefix = date.fromNow();
}
}

return t('spreed', '{relativeDate}, {absoluteDate}', {
relativeDate: relativePrefix,
// 'LL' formats a localized date including day of month, month
// name and year
absoluteDate: OC.Util.formatDate(timestamp, 'LL')
});
},

_modelsHaveSameActor: function(model1, model2) {
if (!model1 || !model2) {
return false;
Expand Down Expand Up @@ -391,4 +418,4 @@

OCA.SpreedMe.Views.ChatView = ChatView;

})(OCA, OC, OCP, Marionette, Handlebars, autosize);
})(OCA, OC, OCP, Marionette, Handlebars, autosize, moment);