From dd036b73bfb56b56be01264f29352576cceafb75 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 20 May 2016 16:30:47 -0400
Subject: [PATCH] UX: Change the timeline date formatting

---
 .../javascripts/discourse/widgets/topic-timeline.js.es6   | 8 ++++++--
 app/assets/stylesheets/desktop/topic-timeline.scss        | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index a3a64d8ee15..b72c1651377 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 { smartShortDate, relativeAge } from 'discourse/lib/formatter';
+import { relativeAge } from 'discourse/lib/formatter';
 import { iconNode } from 'discourse/helpers/fa-icon';
 
 const SCROLLAREA_HEIGHT = 300;
@@ -47,7 +47,11 @@ createWidget('timeline-scroller', {
     ];
 
     if (date) {
-      contents.push(h('div.timeline-ago', smartShortDate(date)));
+      const format = (date.getFullYear() === new Date().getFullYear()) ?
+                     'long_no_year_no_time' :
+                     'long_with_year_no_time';
+
+      contents.push(h('div.timeline-ago', moment(date).format(I18n.t(`dates.${format}`))));
     }
 
     return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
diff --git a/app/assets/stylesheets/desktop/topic-timeline.scss b/app/assets/stylesheets/desktop/topic-timeline.scss
index 9a82d6194a2..32e8ac955d7 100644
--- a/app/assets/stylesheets/desktop/topic-timeline.scss
+++ b/app/assets/stylesheets/desktop/topic-timeline.scss
@@ -59,6 +59,10 @@
       padding-left: 1em;
     }
 
+    .timeline-ago {
+      color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+    }
+
     .timeline-scroller {
       @include unselectable;
       margin-left: -0.18em;