mirror of
https://github.com/funamitech/mastodon
synced 2024-11-30 07:49:04 +09:00
Merge pull request #453 from ThibG/glitch-soc/features/short-date
[Glitch] Improve relative timestamps in web UI
This commit is contained in:
commit
63f848ac8c
@ -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 (
|
||||||
|
Loading…
Reference in New Issue
Block a user