Use moment on the client to display friendly dates

Also, unread and date markers are now half-transparent based on their colors and not parent opacity. This is necessary to display a non-translucide tooltip.
This commit is contained in:
Jérémie Astori 2017-04-19 02:33:05 -04:00
parent bc5b03d2fc
commit 648cfd12db
7 changed files with 47 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

@ -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="tooltipped tooltipped-s" 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",