From 3cebba5b1f3168f7f978b6d05f6d7de04f6d6d92 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 24 May 2016 15:20:13 -0400
Subject: [PATCH] UX: Add "ago" to the bottom of the timeline when relative

---
 .../discourse/lib/formatter.js.es6            | 63 ++++++++++---------
 .../discourse/widgets/topic-timeline.js.es6   |  2 +-
 config/locales/client.en.yml                  |  3 +
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/discourse/lib/formatter.js.es6 b/app/assets/javascripts/discourse/lib/formatter.js.es6
index b9e44bb0f..3e6b14887 100644
--- a/app/assets/javascripts/discourse/lib/formatter.js.es6
+++ b/app/assets/javascripts/discourse/lib/formatter.js.es6
@@ -125,43 +125,46 @@ export function autoUpdatingRelativeAge(date,options) {
   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 distance = Math.round((new Date() - date) / 1000);
   const distanceInMinutes = Math.round(distance / 60.0);
 
   let formatted;
-  const t = function(key,opts){
-    return I18n.t("dates." + format + "." + key, opts);
+  const t = function(key, opts) {
+    const result = I18n.t("dates." + format + "." + key, opts);
+    return (ageOpts && ageOpts.addAgo) ? wrapAgo(result) : result;
   };
 
-  switch(true){
-
-  case(distanceInMinutes < 1):
-    formatted = t("less_than_x_minutes", {count: 1});
-    break;
-  case(distanceInMinutes >= 1 && distanceInMinutes <= 44):
-    formatted = t("x_minutes", {count: distanceInMinutes});
-    break;
-  case(distanceInMinutes >= 45 && distanceInMinutes <= 89):
-    formatted = t("about_x_hours", {count: 1});
-    break;
-  case(distanceInMinutes >= 90 && distanceInMinutes <= 1409):
-    formatted = t("about_x_hours", {count: Math.round(distanceInMinutes / 60.0)});
-    break;
-  case(Discourse.SiteSettings.relative_date_duration === 0 && distanceInMinutes <= 525599):
-    formatted = shortDateNoYear(date);
-    break;
-  case(distanceInMinutes >= 1410 && distanceInMinutes <= 2519):
-    formatted = t("x_days", {count: 1});
-    break;
-  case(distanceInMinutes >= 2520 && distanceInMinutes <= ((Discourse.SiteSettings.relative_date_duration||14) * 1440)):
-    formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)});
-    break;
-  default:
-    formatted = smartShortDate(date);
-    break;
+  switch(true) {
+    case(distanceInMinutes < 1):
+      formatted = t("less_than_x_minutes", {count: 1});
+      break;
+    case(distanceInMinutes >= 1 && distanceInMinutes <= 44):
+      formatted = t("x_minutes", {count: distanceInMinutes});
+      break;
+    case(distanceInMinutes >= 45 && distanceInMinutes <= 89):
+      formatted = t("about_x_hours", {count: 1});
+      break;
+    case(distanceInMinutes >= 90 && distanceInMinutes <= 1409):
+      formatted = t("about_x_hours", {count: Math.round(distanceInMinutes / 60.0)});
+      break;
+    case(Discourse.SiteSettings.relative_date_duration === 0 && distanceInMinutes <= 525599):
+      formatted = shortDateNoYear(date);
+      break;
+    case(distanceInMinutes >= 1410 && distanceInMinutes <= 2519):
+      formatted = t("x_days", {count: 1});
+      break;
+    case(distanceInMinutes >= 2520 && distanceInMinutes <= ((Discourse.SiteSettings.relative_date_duration||14) * 1440)):
+      formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)});
+      break;
+    default:
+      formatted = smartShortDate(date);
+      break;
   }
 
   return formatted;
@@ -236,7 +239,7 @@ export function relativeAge(date, options) {
   options = options || {};
   const format = options.format || "tiny";
 
-  if(format === "tiny") {
+  if (format === "tiny") {
     return relativeAgeTiny(date, options);
   } else if (format === "medium") {
     return relativeAgeMedium(date, options);
diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index deb063e3b..1f4867f30 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -236,7 +236,7 @@ export default createWidget('topic-timeline', {
         this.attach('link', {
           className: 'now-date',
           icon: 'dot-circle-o',
-          rawLabel: relativeAge(new Date(topic.last_posted_at)),
+          rawLabel: relativeAge(new Date(topic.last_posted_at), { addAgo: true }),
           action: 'jumpBottom'
         })
       ]);
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index d5c19a624..4b86c676a 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -49,6 +49,9 @@ en:
       long_date_with_year_without_time: "MMM D, 'YY"
       long_date_without_year_with_linebreak: "MMM D <br/>LT"
       long_date_with_year_with_linebreak: "MMM D, 'YY <br/>LT"
+
+      wrap_ago: "%{date} ago"
+
       tiny:
         half_a_minute: "< 1m"
         less_than_x_seconds: