ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
rebase/4.0.0rc2
Eugen Rochko 2018-04-23 00:43:53 +02:00 committed by GitHub
parent 05fb6f096d
commit 660cb058e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/mastodon/components/relative_timestamp.js
View File

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