Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Add "ago" to the bottom of the timeline when relative

This commit is contained in:
Robin Ward 2016-05-24 15:20:13 -04:00
parent d8d1c7013e
commit 3cebba5b1f
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
3 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
app/assets/javascripts/discourse/lib/formatter.js.es6
View File

@ -125,43 +125,46 @@ export function autoUpdatingRelativeAge(date,options) {
return "<span class='relative-date" + append + "' data-time='" + date.getTime() + "' data-format='" + format + "'>" + relAge + "</span>"; return "<span class='relative-date" + append + "' data-time='" + date.getTime() + "' data-format='" + format + "'>" + relAge + "</span>";
} }
function wrapAgo(dateStr) {
return I18n.t("dates.wrap_ago", { date: dateStr });
}
function relativeAgeTiny(date){ function relativeAgeTiny(date, ageOpts) {
const format = "tiny"; const format = "tiny";
const distance = Math.round((new Date() - date) / 1000); const distance = Math.round((new Date() - date) / 1000);
const distanceInMinutes = Math.round(distance / 60.0); const distanceInMinutes = Math.round(distance / 60.0);
let formatted; let formatted;
const t = function(key,opts){ const t = function(key, opts) {
return I18n.t("dates." + format + "." + key, opts); const result = I18n.t("dates." + format + "." + key, opts);
return (ageOpts && ageOpts.addAgo) ? wrapAgo(result) : result;
}; };
switch(true){ switch(true) {
case(distanceInMinutes < 1):
case(distanceInMinutes < 1): formatted = t("less_than_x_minutes", {count: 1});
formatted = t("less_than_x_minutes", {count: 1}); break;
break; case(distanceInMinutes >= 1 && distanceInMinutes <= 44):
case(distanceInMinutes >= 1 && distanceInMinutes <= 44): formatted = t("x_minutes", {count: distanceInMinutes});
formatted = t("x_minutes", {count: distanceInMinutes}); break;
break; case(distanceInMinutes >= 45 && distanceInMinutes <= 89):
case(distanceInMinutes >= 45 && distanceInMinutes <= 89): formatted = t("about_x_hours", {count: 1});
formatted = t("about_x_hours", {count: 1}); break;
break; case(distanceInMinutes >= 90 && distanceInMinutes <= 1409):
case(distanceInMinutes >= 90 && distanceInMinutes <= 1409): formatted = t("about_x_hours", {count: Math.round(distanceInMinutes / 60.0)});
formatted = t("about_x_hours", {count: Math.round(distanceInMinutes / 60.0)}); break;
break; case(Discourse.SiteSettings.relative_date_duration === 0 && distanceInMinutes <= 525599):
case(Discourse.SiteSettings.relative_date_duration === 0 && distanceInMinutes <= 525599): formatted = shortDateNoYear(date);
formatted = shortDateNoYear(date); break;
break; case(distanceInMinutes >= 1410 && distanceInMinutes <= 2519):
case(distanceInMinutes >= 1410 && distanceInMinutes <= 2519): formatted = t("x_days", {count: 1});
formatted = t("x_days", {count: 1}); break;
break; case(distanceInMinutes >= 2520 && distanceInMinutes <= ((Discourse.SiteSettings.relative_date_duration||14) * 1440)):
case(distanceInMinutes >= 2520 && distanceInMinutes <= ((Discourse.SiteSettings.relative_date_duration||14) * 1440)): formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)});
formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)}); break;
break; default:
default: formatted = smartShortDate(date);
formatted = smartShortDate(date); break;
break;
} }
return formatted; return formatted;
@ -236,7 +239,7 @@ export function relativeAge(date, options) {
options = options || {}; options = options || {};
const format = options.format || "tiny"; const format = options.format || "tiny";
if(format === "tiny") { if (format === "tiny") {
return relativeAgeTiny(date, options); return relativeAgeTiny(date, options);
} else if (format === "medium") { } else if (format === "medium") {
return relativeAgeMedium(date, options); return relativeAgeMedium(date, options);

2
app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
View File

@ -236,7 +236,7 @@ export default createWidget('topic-timeline', {
this.attach('link', { this.attach('link', {
className: 'now-date', className: 'now-date',
icon: 'dot-circle-o', icon: 'dot-circle-o',
rawLabel: relativeAge(new Date(topic.last_posted_at)), rawLabel: relativeAge(new Date(topic.last_posted_at), { addAgo: true }),
action: 'jumpBottom' action: 'jumpBottom'
}) })
]); ]);

3
config/locales/client.en.yml
View File

@ -49,6 +49,9 @@ en:
long_date_with_year_without_time: "MMM D, 'YY" long_date_with_year_without_time: "MMM D, 'YY"
long_date_without_year_with_linebreak: "MMM D <br/>LT" long_date_without_year_with_linebreak: "MMM D <br/>LT"
long_date_with_year_with_linebreak: "MMM D, 'YY <br/>LT" long_date_with_year_with_linebreak: "MMM D, 'YY <br/>LT"
wrap_ago: "%{date} ago"
tiny: tiny:
half_a_minute: "< 1m" half_a_minute: "< 1m"
less_than_x_seconds: less_than_x_seconds: