UX: Change the date formatting for timeline start + scroller

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);
   }

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),

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"