Improve relative timestamps in web UI (#7233)

Use short instead of numeric month, display year when different year

E.g.: "Apr 4" instead of "4/4", "Apr 4, 2017" if different year

diff --git a/app/javascript/mastodon/components/relative_timestamp.js b/app/javascript/mastodon/components/relative_timestamp.js
index 51588e78ca1684aced5b58398a9b53b2f0cfe517..3c8db709269cde2142cb3f314da7aafe612e6aaf 100644 (file)
--- a/app/javascript/mastodon/components/relative_timestamp.js
+++ b/app/javascript/mastodon/components/relative_timestamp.js
@@ -20,7 +20,7 @@ const dateFormatOptions = {
 };
 
 const shortDateFormatOptions = {
-  month: 'numeric',
+  month: 'short',
   day: 'numeric',
 };
 
@@ -66,12 +66,17 @@ export default class RelativeTimestamp extends React.Component {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     timestamp: PropTypes.string.isRequired,
+    year: PropTypes.number.isRequired,
   };
 
   state = {
     now: this.props.intl.now(),
   };
 
+  static defaultProps = {
+    year: (new Date()).getFullYear(),
+  };
+
   shouldComponentUpdate (nextProps, nextState) {
     // As of right now the locale doesn't change without a new page load,
     // but we might as well check in case that ever changes.
@@ -114,7 +119,7 @@ export default class RelativeTimestamp extends React.Component {
   }
 
   render () {
-    const { timestamp, intl } = this.props;
+    const { timestamp, intl, year } = this.props;
 
     const date  = new Date(timestamp);
     const delta = this.state.now - date.getTime();
@@ -123,7 +128,7 @@ export default class RelativeTimestamp extends React.Component {
 
     if (delta < 10 * SECOND) {
       relativeTime = intl.formatMessage(messages.just_now);
-    } else if (delta < 3 * DAY) {
+    } else if (delta < 7 * DAY) {
       if (delta < MINUTE) {
         relativeTime = intl.formatMessage(messages.seconds, { number: Math.floor(delta / SECOND) });
       } else if (delta < HOUR) {
@@ -133,8 +138,10 @@ export default class RelativeTimestamp extends React.Component {
       } else {
         relativeTime = intl.formatMessage(messages.days, { number: Math.floor(delta / DAY) });
       }
-    } else {
+    } else if (date.getFullYear() === year) {
       relativeTime = intl.formatDate(date, shortDateFormatOptions);
+    } else {
+      relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' });
     }
 
     return (