From 1c49c57494ca75b4884d1f678024544d3da5d204 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 19 May 2016 13:03:27 -0400
Subject: [PATCH] UX: Change the date formatting for timeline start + scroller

---
 .../javascripts/discourse/lib/formatter.js.es6  | 17 +++++++----------
 .../discourse/widgets/topic-timeline.js.es6     |  6 +++---
 config/locales/client.en.yml                    |  1 +
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/lib/formatter.js.es6 b/app/assets/javascripts/discourse/lib/formatter.js.es6
index 1d5af3376f1..162a8c35a52 100644
--- a/app/assets/javascripts/discourse/lib/formatter.js.es6
+++ b/app/assets/javascripts/discourse/lib/formatter.js.es6
@@ -55,6 +55,11 @@ function shortDateNoYear(date) {
   return moment(date).format(I18n.t("dates.tiny.date_month"));
 }
 
+// Suppress year if it's this year
+export function smartShortDate(date) {
+  return (date.getFullYear() === new Date().getFullYear()) ? shortDateNoYear(date) : tinyDateYear(date);
+}
+
 export function tinyDateYear(date) {
   return moment(date).format(I18n.t("dates.tiny.date_year"));
 }
@@ -155,11 +160,7 @@ function relativeAgeTiny(date){
     formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)});
     break;
   default:
-    if(date.getFullYear() === new Date().getFullYear()) {
-      formatted = shortDateNoYear(date);
-    } else {
-      formatted = tinyDateYear(date);
-    }
+    formatted = smartShortDate(date);
     break;
   }
 
@@ -219,11 +220,7 @@ function relativeAgeMedium(date, options) {
   if (distance < oneMinuteAgo) {
     displayDate = I18n.t("now");
   } else if (distance > fiveDaysAgo) {
-    if ((new Date()).getFullYear() !== date.getFullYear()) {
-      displayDate = shortDate(date);
-    } else {
-      displayDate = shortDateNoYear(date);
-    }
+    displayDate = smartShortDate(date);
   } else {
     displayDate = relativeAgeMediumSpan(distance, leaveAgo);
   }
diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index e32e7c8f9e7..722cc675f7a 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { shortDate, tinyDateYear } from 'discourse/lib/formatter';
+import { smartShortDate } from 'discourse/lib/formatter';
 import { iconNode } from 'discourse/helpers/fa-icon';
 
 const SCROLLAREA_HEIGHT = 300;
@@ -46,7 +46,7 @@ createWidget('timeline-scroller', {
     ];
 
     if (date) {
-      contents.push(h('div.timeline-ago', shortDate(date)));
+      contents.push(h('div.timeline-ago', smartShortDate(date)));
     }
 
     return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
@@ -212,7 +212,7 @@ export default createWidget('topic-timeline', {
       return result.concat([
         this.attach('link', {
           className: 'start-date',
-          rawLabel: tinyDateYear(createdAt),
+          rawLabel: moment(createdAt).format(I18n.t('dates.timeline_start')),
           action: 'jumpTop'
         }),
         this.attach('timeline-scrollarea', attrs),
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 92fb6796214..57df8db02b3 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -36,6 +36,7 @@ en:
         millions: "{{number}}M"
     dates:
       time: "h:mm a"
+      timeline_start: "MMMM YYYY"
       long_no_year: "MMM D h:mm a"
       long_no_year_no_time: "MMM D"
       full_no_year_no_time: "MMMM Do"