PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use Intl.RelativeTimeFormat for "last week" and "last month" (#11511)

Browse source 
* Use Intl.RelativeTimeFormat for "last week" and "last month"

* i18n
This commit is contained in:
Michael Telatynski 2023-09-01 12:52:24 +01:00 committed by GitHub
parent a54f2ff878
commit fbe5a7d4b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/views/messages/DateSeparator.tsx
View file

@ -18,6 +18,7 @@ limitations under the License.
import React from "react"; import React from "react";
import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix"; import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { capitalize } from "lodash";
import { _t, getUserLanguage } from "../../../languageHandler"; import { _t, getUserLanguage } from "../../../languageHandler";
import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils"; import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
@ -92,6 +93,10 @@ export default class DateSeparator extends React.Component<IProps, IState> {
}); });
}; };
private get relativeTimeFormat(): Intl.RelativeTimeFormat {
return new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
}
private getLabel(): string { private getLabel(): string {
const date = new Date(this.props.ts); const date = new Date(this.props.ts);
const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates); const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
@ -104,11 +109,10 @@ export default class DateSeparator extends React.Component<IProps, IState> {
const days = getDaysArray("long"); const days = getDaysArray("long");
yesterday.setDate(today.getDate() - 1); yesterday.setDate(today.getDate() - 1);
const relativeTimeFormat = new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
if (date.toDateString() === today.toDateString()) { if (date.toDateString() === today.toDateString()) {
return relativeTimeFormat.format(0, "day"); // Today return this.relativeTimeFormat.format(0, "day"); // Today
} else if (date.toDateString() === yesterday.toDateString()) { } else if (date.toDateString() === yesterday.toDateString()) {
return relativeTimeFormat.format(-1, "day"); // Yesterday return this.relativeTimeFormat.format(-1, "day"); // Yesterday
} else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) { } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
return days[date.getDay()]; // Sunday-Saturday return days[date.getDay()]; // Sunday-Saturday
} else { } else {
@ -263,6 +267,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
private renderJumpToDateMenu(): React.ReactElement { private renderJumpToDateMenu(): React.ReactElement {
let contextMenu: JSX.Element | undefined; let contextMenu: JSX.Element | undefined;
if (this.state.contextMenuPosition) { if (this.state.contextMenuPosition) {
const relativeTimeFormat = this.relativeTimeFormat;
contextMenu = ( contextMenu = (
<IconizedContextMenu <IconizedContextMenu
{...contextMenuBelow(this.state.contextMenuPosition)} {...contextMenuBelow(this.state.contextMenuPosition)}
@ -270,12 +275,12 @@ export default class DateSeparator extends React.Component<IProps, IState> {
> >
<IconizedContextMenuOptionList first> <IconizedContextMenuOptionList first>
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("time|last_week")} label={capitalize(relativeTimeFormat.format(-1, "week"))}
onClick={this.onLastWeekClicked} onClick={this.onLastWeekClicked}
data-testid="jump-to-date-last-week" data-testid="jump-to-date-last-week"
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("time|last_month")} label={capitalize(relativeTimeFormat.format(-1, "month"))}
onClick={this.onLastMonthClicked} onClick={this.onLastMonthClicked}
data-testid="jump-to-date-last-month" data-testid="jump-to-date-last-month"
/> />

4
src/i18n/strings/en_EN.json
View file

@ -218,9 +218,7 @@
"short_seconds": "%(value)ss", "short_seconds": "%(value)ss",
"short_days_hours_minutes_seconds": "%(days)sd %(hours)sh %(minutes)sm %(seconds)ss", "short_days_hours_minutes_seconds": "%(days)sd %(hours)sh %(minutes)sm %(seconds)ss",
"short_hours_minutes_seconds": "%(hours)sh %(minutes)sm %(seconds)ss", "short_hours_minutes_seconds": "%(hours)sh %(minutes)sm %(seconds)ss",
"short_minutes_seconds": "%(minutes)sm %(seconds)ss", "short_minutes_seconds": "%(minutes)sm %(seconds)ss"
"last_week": "Last week",
"last_month": "Last month"
}, },
"Identity server has no terms of service": "Identity server has no terms of service", "Identity server has no terms of service": "Identity server has no terms of service",
"This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.": "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.", "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.": "This action requires accessing the default identity server <server /> to validate an email address or phone number, but the server does not have any terms of service.",