Merge pull request #1054 from thelounge/astorije/friendly-date-marker

Use moment on the client to display friendly dates
This commit is contained in:
Pavel Djundik 2017-04-23 10:24:21 +03:00 committed by GitHub
commit 98e3bd0ca2
8 changed files with 67 additions and 19 deletions

View File

@ -841,7 +841,6 @@ kbd {
#chat .unread-marker {
position: relative;
text-align: center;
opacity: .5;
margin: 0 10px;
z-index: 0;
font-weight: bold;
@ -855,13 +854,13 @@ kbd {
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #e74c3c;
border-top: 1px solid rgba(231, 76, 60, .5);
}
#chat .unread-marker-text:before {
content: "New messages";
background-color: white;
color: #e74c3c;
color: rgba(231, 76, 60, .5);
padding: 0 10px;
}
@ -872,7 +871,6 @@ kbd {
#chat .date-marker {
position: relative;
text-align: center;
opacity: .5;
margin: 0 10px;
z-index: 0;
font-weight: bold;
@ -886,13 +884,13 @@ kbd {
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #006b3b;
border-top: 1px solid rgba(0, 107, 59, .5);
}
#chat .date-marker-text:before {
content: attr(data-date);
content: attr(data-label);
background-color: white;
color: #006b3b;
color: rgba(0, 107, 59, .5);
padding: 0 10px;
}

View File

@ -0,0 +1,13 @@
"use strict";
const moment = require("moment");
module.exports = function(time) {
// See http://momentjs.com/docs/#/displaying/calendar-time/
return moment(new Date(time)).calendar(null, {
sameDay: "[Today]",
lastDay: "[Yesterday]",
lastWeek: "L", // Locale
sameElse: "L"
});
};

View File

@ -3,6 +3,7 @@
// vendor libraries
require("jquery-ui/ui/widgets/sortable");
const $ = require("jquery");
const moment = require("moment");
const Mousetrap = require("mousetrap");
const URI = require("urijs");
@ -1564,6 +1565,25 @@ $(function() {
}
});
// Compute how many milliseconds are remaining until the next day starts
function msUntilNextDay() {
return moment().add(1, "day").startOf("day") - moment();
}
// Go through all Today/Yesterday date markers in the DOM and recompute their
// labels. When done, restart the timer for the next day.
function updateDateMarkers() {
$(".date-marker-text[data-label='Today'], .date-marker-text[data-label='Yesterday']")
.closest(".date-marker-container")
.each(function() {
$(this).replaceWith(templates.date_marker({msgDate: $(this).data("timestamp")}));
});
// This should always be 24h later but re-computing exact value just in case
setTimeout(updateDateMarkers, msUntilNextDay());
}
setTimeout(updateDateMarkers, msUntilNextDay());
// Only start opening socket.io connection after all events have been registered
socket.open();

View File

@ -155,11 +155,6 @@ body {
border-color: #333c4a;
}
#chat .unread-marker,
#chat .date-marker {
opacity: 1;
}
#chat .unread-marker-text:before {
background-color: #333c4a;
}

View File

@ -181,11 +181,6 @@ body {
border-color: #3f3f3f;
}
#chat .unread-marker,
.date-marker {
opacity: 1;
}
#chat .unread-marker-text:before {
background-color: #3f3f3f;
}

View File

@ -1,3 +1,5 @@
<div class="date-marker">
<span class="date-marker-text" data-date="{{localedate msgDate}}"></span>
<div class="date-marker-container tooltipped tooltipped-s" data-timestamp="{{msgDate}}" aria-label="{{localedate msgDate}}">
<div class="date-marker">
<span class="date-marker-text" data-label="{{friendlydate msgDate}}"></span>
</div>
</div>

View File

@ -0,0 +1,24 @@
"use strict";
const expect = require("chai").expect;
const moment = require("moment");
const friendlydate = require("../../../../../client/js/libs/handlebars/friendlydate");
describe("friendlydate Handlebars helper", () => {
it("should render 'Today' as a human-friendly date", () => {
const time = new Date().getTime();
expect(friendlydate(time)).to.equal("Today");
});
it("should render 'Yesterday' as a human-friendly date", () => {
const time = new Date().getTime() - 24 * 3600 * 1000;
expect(friendlydate(time)).to.equal("Yesterday");
});
it("should not render any friendly dates prior to the day before", () => {
[2, 7, 30, 365, 1000].forEach(day => {
const time = new Date().getTime() - 24 * 3600 * 1000 * day;
expect(friendlydate(time)).to.equal(moment(time).format("L"));
});
});
});

View File

@ -14,6 +14,7 @@ let config = {
"handlebars/runtime",
"jquery",
"jquery-ui/ui/widgets/sortable",
"moment",
"mousetrap",
"socket.io-client",
"urijs",