Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Change the date formatting for timeline start + scroller

This commit is contained in:
Robin Ward 2016-05-19 13:03:27 -04:00
parent a8ed7e9ceb
commit 1c49c57494
No known key found for this signature in database
GPG Key ID: 0E091E2B4ED1B83D
3 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/discourse/lib/formatter.js.es6
View File

@ -55,6 +55,11 @@ function shortDateNoYear(date) {
return moment(date).format(I18n.t("dates.tiny.date_month")); 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) { export function tinyDateYear(date) {
return moment(date).format(I18n.t("dates.tiny.date_year")); 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)}); formatted = t("x_days", {count: Math.round(distanceInMinutes / 1440.0)});
break; break;
default: default:
if(date.getFullYear() === new Date().getFullYear()) { formatted = smartShortDate(date);
formatted = shortDateNoYear(date);
} else {
formatted = tinyDateYear(date);
}
break; break;
} }
@ -219,11 +220,7 @@ function relativeAgeMedium(date, options) {
if (distance < oneMinuteAgo) { if (distance < oneMinuteAgo) {
displayDate = I18n.t("now"); displayDate = I18n.t("now");
} else if (distance > fiveDaysAgo) { } else if (distance > fiveDaysAgo) {
if ((new Date()).getFullYear() !== date.getFullYear()) { displayDate = smartShortDate(date);
displayDate = shortDate(date);
} else {
displayDate = shortDateNoYear(date);
}
} else { } else {
displayDate = relativeAgeMediumSpan(distance, leaveAgo); displayDate = relativeAgeMediumSpan(distance, leaveAgo);
} }

6
app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
View File

@ -1,6 +1,6 @@
import { createWidget } from 'discourse/widgets/widget'; import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom'; 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'; import { iconNode } from 'discourse/helpers/fa-icon';
const SCROLLAREA_HEIGHT = 300; const SCROLLAREA_HEIGHT = 300;
@ -46,7 +46,7 @@ createWidget('timeline-scroller', {
]; ];
if (date) { 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) ]; return [ h('div.timeline-handle'), h('div.timeline-scroller-content', contents) ];
@ -212,7 +212,7 @@ export default createWidget('topic-timeline', {
return result.concat([ return result.concat([
this.attach('link', { this.attach('link', {
className: 'start-date', className: 'start-date',
rawLabel: tinyDateYear(createdAt), rawLabel: moment(createdAt).format(I18n.t('dates.timeline_start')),
action: 'jumpTop' action: 'jumpTop'
}), }),
this.attach('timeline-scrollarea', attrs), this.attach('timeline-scrollarea', attrs),

1
config/locales/client.en.yml
View File

@ -36,6 +36,7 @@ en:
millions: "{{number}}M" millions: "{{number}}M"
dates: dates:
time: "h:mm a" time: "h:mm a"
timeline_start: "MMMM YYYY"
long_no_year: "MMM D h:mm a" long_no_year: "MMM D h:mm a"
long_no_year_no_time: "MMM D" long_no_year_no_time: "MMM D"
full_no_year_no_time: "MMMM Do" full_no_year_no_time: "MMMM Do"