{
return (
);
@@ -142,7 +147,7 @@ export default class EditableItemList extends React.PureComponent
- {_t("Add")}
+ {_t("action|add")}
);
diff --git a/src/components/views/elements/ErrorBoundary.tsx b/src/components/views/elements/ErrorBoundary.tsx
index dca7d4562f6..4ecb8a17ee1 100644
--- a/src/components/views/elements/ErrorBoundary.tsx
+++ b/src/components/views/elements/ErrorBoundary.tsx
@@ -85,8 +85,7 @@ export default class ErrorBoundary extends React.PureComponent {
{_t(
- "Please create a new issue " +
- "on GitHub so that we can investigate this bug.",
+ "Please create a new issue on GitHub so that we can investigate this bug.",
{},
{
newIssueLink: (sub) => {
@@ -101,15 +100,10 @@ export default class ErrorBoundary extends React.PureComponent {
{_t(
- "If you've submitted a bug via GitHub, debug logs can help " +
- "us track down the problem. ",
+ "If you've submitted a bug via GitHub, debug logs can help us track down the problem. ",
)}
{_t(
- "Debug logs contain application " +
- "usage data including your username, the IDs or aliases of " +
- "the rooms you have visited, which UI elements you " +
- "last interacted with, and the usernames of other users. " +
- "They do not contain messages.",
+ "Debug logs contain application usage data including your username, the IDs or aliases of the rooms you have visited, which UI elements you last interacted with, and the usernames of other users. They do not contain messages.",
)}
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 6a03f7cbbe8..6c31614c06e 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -23,25 +23,19 @@ import TextWithTooltip from "./TextWithTooltip";
interface IProps extends HTMLAttributes {
members: RoomMember[];
- faceSize: number;
+ size: string;
overflow: boolean;
tooltip?: ReactNode;
children?: ReactNode;
}
-const FacePile: FC = ({ members, faceSize, overflow, tooltip, children, ...props }) => {
+const FacePile: FC = ({ members, size, overflow, tooltip, children, ...props }) => {
const faces = members.map(
tooltip
- ? (m) =>
+ ? (m) =>
: (m) => (
-
+
),
);
diff --git a/src/components/views/elements/GenericEventListSummary.tsx b/src/components/views/elements/GenericEventListSummary.tsx
index f9668c2ca46..79dda584169 100644
--- a/src/components/views/elements/GenericEventListSummary.tsx
+++ b/src/components/views/elements/GenericEventListSummary.tsx
@@ -103,7 +103,7 @@ const GenericEventListSummary: React.FC = ({
}),
(member) => member.getMxcAvatarUrl(),
);
- const avatars = uniqueMembers.map((m) => );
+ const avatars = uniqueMembers.map((m) => );
body = (
@@ -130,7 +130,7 @@ const GenericEventListSummary: React.FC
= ({
onClick={toggleExpanded}
aria-expanded={expanded}
>
- {expanded ? _t("collapse") : _t("expand")}
+ {expanded ? _t("action|collapse") : _t("action|expand")}
{body}
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index 7162d7ad804..d66014b7ed6 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -477,8 +477,7 @@ export default class ImageView extends React.Component {
);
@@ -504,7 +503,7 @@ export default class ImageView extends React.Component {
contextMenuButton = (
{
const zoomOutButton = (
);
const zoomInButton = (
);
@@ -531,7 +530,7 @@ export default class ImageView extends React.Component {
if (this.props.mxEvent?.getContent()) {
title = (
- {presentableTextForFile(this.props.mxEvent?.getContent(), _t("Image"), true)}
+ {presentableTextForFile(this.props.mxEvent?.getContent(), _t("common|image"), true)}
);
}
@@ -565,13 +564,13 @@ export default class ImageView extends React.Component {
/>
{contextMenuButton}
{this.renderContextMenu()}
diff --git a/src/components/views/elements/InlineSpinner.tsx b/src/components/views/elements/InlineSpinner.tsx
index 144463c3245..866fc4b1d86 100644
--- a/src/components/views/elements/InlineSpinner.tsx
+++ b/src/components/views/elements/InlineSpinner.tsx
@@ -36,7 +36,7 @@ export default class InlineSpinner extends React.PureComponent {
{this.props.children}
diff --git a/src/components/views/elements/LanguageDropdown.tsx b/src/components/views/elements/LanguageDropdown.tsx
index 5de1ffe7853..ff27b112834 100644
--- a/src/components/views/elements/LanguageDropdown.tsx
+++ b/src/components/views/elements/LanguageDropdown.tsx
@@ -16,6 +16,7 @@ limitations under the License.
*/
import React, { ReactElement } from "react";
+import classNames from "classnames";
import * as languageHandler from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
@@ -24,9 +25,10 @@ import Spinner from "./Spinner";
import Dropdown from "./Dropdown";
import { NonEmptyArray } from "../../../@types/common";
-type Languages = Awaited>;
+type Languages = Awaited>;
function languageMatchesSearchQuery(query: string, language: Languages[0]): boolean {
+ if (language.labelInTargetLanguage.toUpperCase().includes(query.toUpperCase())) return true;
if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
if (language.value.toUpperCase() === query.toUpperCase()) return true;
return false;
@@ -56,23 +58,30 @@ export default class LanguageDropdown extends React.Component {
public componentDidMount(): void {
languageHandler
- .getAllLanguagesFromJson()
+ .getAllLanguagesWithLabels()
.then((langs) => {
langs.sort(function (a, b) {
- if (a.label < b.label) return -1;
- if (a.label > b.label) return 1;
+ if (a.labelInTargetLanguage < b.labelInTargetLanguage) return -1;
+ if (a.labelInTargetLanguage > b.labelInTargetLanguage) return 1;
return 0;
});
this.setState({ langs });
})
.catch(() => {
- this.setState({ langs: [{ value: "en", label: "English" }] });
+ this.setState({
+ langs: [
+ {
+ value: "en",
+ label: "English",
+ labelInTargetLanguage: "English",
+ },
+ ],
+ });
});
if (!this.props.value) {
- // If no value is given, we start with the first
- // country selected, but our parent component
- // doesn't know this, therefore we do this.
+ // If no value is given, we start with the first country selected,
+ // but our parent component doesn't know this, therefore we do this.
const language = languageHandler.getUserLanguage();
this.props.onOptionChange(language);
}
@@ -89,7 +98,7 @@ export default class LanguageDropdown extends React.Component {
return ;
}
- let displayedLanguages: Awaited>;
+ let displayedLanguages: Awaited>;
if (this.state.searchQuery) {
displayedLanguages = this.state.langs.filter((lang) => {
return languageMatchesSearchQuery(this.state.searchQuery, lang);
@@ -99,7 +108,7 @@ export default class LanguageDropdown extends React.Component {
}
const options = displayedLanguages.map((language) => {
- return {language.label}
;
+ return {language.labelInTargetLanguage}
;
}) as NonEmptyArray;
// default value here too, otherwise we need to handle null / undefined
@@ -116,7 +125,7 @@ export default class LanguageDropdown extends React.Component {
return (
= ({ title, description, ...rest }) =>
Modal.createDialog(InfoDialog, {
title,
description,
- button: _t("Got it"),
+ button: _t("action|got_it"),
hasCloseButton: true,
});
};
return (
- {_t("Learn more")}
+ {_t("action|learn_more")}
);
};
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index dd02d3238d6..35414c87824 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -26,7 +26,7 @@ import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner";
-export const AVATAR_SIZE = 52;
+export const AVATAR_SIZE = "52px";
interface IProps {
hasAvatar: boolean;
diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx
index 7e96a21b6f0..5770145b788 100644
--- a/src/components/views/elements/Pill.tsx
+++ b/src/components/views/elements/Pill.tsx
@@ -44,7 +44,7 @@ export const pillRoomNotifLen = (): number => {
return "@room".length;
};
-const linkIcon = ;
+const linkIcon = ;
const PillRoomAvatar: React.FC<{
shouldShowPillAvatar: boolean;
@@ -55,7 +55,7 @@ const PillRoomAvatar: React.FC<{
}
if (room) {
- return ;
+ return ;
}
return linkIcon;
};
@@ -69,9 +69,9 @@ const PillMemberAvatar: React.FC<{
}
if (member) {
- return ;
+ return ;
}
- return ;
+ return ;
};
export interface PillProps {
@@ -139,7 +139,7 @@ export const Pill: React.FC = ({ type: propType, url, inMessage, room
});
} else {
avatar = linkIcon;
- pillText = _t("Message");
+ pillText = _t("common|message");
}
}
break;
diff --git a/src/components/views/elements/PollCreateDialog.tsx b/src/components/views/elements/PollCreateDialog.tsx
index cbd548944ea..623dd0d7109 100644
--- a/src/components/views/elements/PollCreateDialog.tsx
+++ b/src/components/views/elements/PollCreateDialog.tsx
@@ -15,15 +15,16 @@ limitations under the License.
*/
import React, { ChangeEvent, createRef } from "react";
-import { Room, MatrixEvent } from "matrix-js-sdk/src/matrix";
import {
+ Room,
+ MatrixEvent,
KnownPollKind,
M_POLL_KIND_DISCLOSED,
M_POLL_KIND_UNDISCLOSED,
M_POLL_START,
-} from "matrix-js-sdk/src/@types/polls";
+ IPartialEvent,
+} from "matrix-js-sdk/src/matrix";
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
-import { IPartialEvent } from "matrix-js-sdk/src/@types/extensible_events";
import ScrollableBaseModal, { IScrollableBaseState } from "../dialogs/ScrollableBaseModal";
import QuestionDialog from "../dialogs/QuestionDialog";
@@ -79,7 +80,7 @@ function editingInitialState(editingMxEvent: MatrixEvent): IState {
return {
title: _t("Edit poll"),
- actionLabel: _t("Done"),
+ actionLabel: _t("action|done"),
canSubmit: true,
question: poll.question.text,
options: poll.answers.map((ans) => ans.text),
@@ -176,8 +177,8 @@ export default class PollCreateDialog extends ScrollableBaseModal {
if (!tryAgain) {
this.cancel();
diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx
index 2ef8d3bd174..1ea25b67cca 100644
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -205,8 +205,7 @@ export default class ReplyChain extends React.Component {
header = (
{_t(
- "Unable to load event that was replied to, " +
- "it either does not exist or you do not have permission to view it.",
+ "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
)}
);
diff --git a/src/components/views/elements/RoomFacePile.tsx b/src/components/views/elements/RoomFacePile.tsx
index 11f09159f16..44dea8b3297 100644
--- a/src/components/views/elements/RoomFacePile.tsx
+++ b/src/components/views/elements/RoomFacePile.tsx
@@ -77,13 +77,7 @@ const RoomFacePile: FC = ({ room, onlyKnownUsers = true, numShown = DEFA
);
return (
- numShown}
- tooltip={tooltip}
- {...props}
- >
+ numShown} tooltip={tooltip} {...props}>
{onlyKnownUsers && (
{_t("%(count)s people you know have already joined", { count: members.length })}
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index 9b8c4bd80f3..24339a579af 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -17,15 +17,15 @@ limitations under the License.
import React from "react";
import { chunk } from "lodash";
import classNames from "classnames";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
import {
+ MatrixClient,
IdentityProviderBrand,
+ SSOFlow,
+ SSOAction,
IIdentityProvider,
- ISSOFlow,
DELEGATED_OIDC_COMPATIBILITY,
- SSOAction,
-} from "matrix-js-sdk/src/@types/auth";
+} from "matrix-js-sdk/src/matrix";
+import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
import PlatformPeg from "../../../PlatformPeg";
import AccessibleButton from "./AccessibleButton";
@@ -94,7 +94,7 @@ const SSOButton: React.FC = ({
if (idp) {
label = _t("Continue with %(provider)s", { provider: idp.name });
} else if (DELEGATED_OIDC_COMPATIBILITY.findIn(flow)) {
- label = _t("Continue");
+ label = _t("action|continue");
} else {
label = _t("Sign in with single sign-on");
}
@@ -147,7 +147,7 @@ const SSOButton: React.FC = ({
interface IProps {
matrixClient: MatrixClient;
- flow: ISSOFlow;
+ flow: SSOFlow;
loginType: "sso" | "cas";
fragmentAfterLogin?: string;
primary?: boolean;
diff --git a/src/components/views/elements/ServerPicker.tsx b/src/components/views/elements/ServerPicker.tsx
index f940150a9e0..0876581a54a 100644
--- a/src/components/views/elements/ServerPicker.tsx
+++ b/src/components/views/elements/ServerPicker.tsx
@@ -47,12 +47,10 @@ const onHelpClick = (): void => {
{
title: _t("Server Options"),
description: _t(
- "You can use the custom server options to sign into other Matrix servers by specifying " +
- "a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on " +
- "a different homeserver.",
+ "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.",
{ brand },
),
- button: _t("Dismiss"),
+ button: _t("action|dismiss"),
hasCloseButton: false,
fixedWidth: false,
},
@@ -74,7 +72,7 @@ const ServerPicker: React.FC = ({ title, dialogTitle, serverConfig, onSe
};
editBtn = (
- {_t("Edit")}
+ {_t("action|edit")}
);
}
@@ -97,9 +95,13 @@ const ServerPicker: React.FC = ({ title, dialogTitle, serverConfig, onSe
return (
-
{title || _t("Homeserver")}
+
{title || _t("common|homeserver")}
{!disableCustomUrls ? (
-
+
) : null}
{serverName}
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 70e9fda1b59..b565727cd6e 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -29,7 +29,7 @@ interface IProps {
name: string;
level: SettingLevel;
roomId?: string; // for per-room settings
- label?: string; // untranslated
+ label?: string;
isExplicit?: boolean;
// XXX: once design replaces all toggles make this the default
useCheckbox?: boolean;
@@ -105,10 +105,7 @@ export default class SettingsFlag extends React.Component {
if (!canChange && this.props.hideIfCannotSet) return null;
- const label =
- (this.props.label
- ? _t(this.props.label)
- : SettingsStore.getDisplayName(this.props.name, this.props.level)) ?? undefined;
+ const label = this.props.label ?? SettingsStore.getDisplayName(this.props.name, this.props.level);
const description = SettingsStore.getDescription(this.props.name);
const shouldWarn = SettingsStore.shouldHaveWarning(this.props.name);
const disabled = this.state.disabled || !canChange;
@@ -146,7 +143,7 @@ export default class SettingsFlag extends React.Component {
onChange={this.onChange}
disabled={disabled}
tooltip={disabled ? SettingsStore.disabledMessage(this.props.name) : undefined}
- title={label}
+ title={label ?? undefined}
/>
diff --git a/src/components/views/elements/TooltipButton.tsx b/src/components/views/elements/TooltipButton.tsx
deleted file mode 100644
index f05a83474fa..00000000000
--- a/src/components/views/elements/TooltipButton.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-
-import TooltipTarget from "./TooltipTarget";
-
-interface IProps {
- helpText: React.ReactNode | string;
-}
-
-export default class TooltipButton extends React.Component {
- public constructor(props: IProps) {
- super(props);
- }
-
- public render(): React.ReactNode {
- return (
-
- ?
-
- );
- }
-}
diff --git a/src/components/views/elements/UseCaseSelection.tsx b/src/components/views/elements/UseCaseSelection.tsx
index 2f7f171fad4..d8679ef300f 100644
--- a/src/components/views/elements/UseCaseSelection.tsx
+++ b/src/components/views/elements/UseCaseSelection.tsx
@@ -78,7 +78,7 @@ export function UseCaseSelection({ onFinished }: Props): JSX.Element {
setSelected(UseCase.Skip)}>
- {_t("Skip")}
+ {_t("action|skip")}
diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx
index f8994da359a..f6f8c35f335 100644
--- a/src/components/views/emojipicker/Category.tsx
+++ b/src/components/views/emojipicker/Category.tsx
@@ -16,10 +16,10 @@ limitations under the License.
*/
import React, { RefObject } from "react";
+import { DATA_BY_CATEGORY, Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker";
import LazyRenderList from "../elements/LazyRenderList";
-import { DATA_BY_CATEGORY, IEmoji } from "../../../emoji";
import Emoji from "./Emoji";
import { ButtonEvent } from "../elements/AccessibleButton";
diff --git a/src/components/views/emojipicker/Emoji.tsx b/src/components/views/emojipicker/Emoji.tsx
index 20690ffdcba..e443e08e493 100644
--- a/src/components/views/emojipicker/Emoji.tsx
+++ b/src/components/views/emojipicker/Emoji.tsx
@@ -16,13 +16,13 @@ limitations under the License.
*/
import React from "react";
+import { Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
-import { IEmoji } from "../../../emoji";
import { ButtonEvent } from "../elements/AccessibleButton";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
interface IProps {
- emoji: IEmoji;
+ emoji: EmojiandEmotes;
selectedEmojis?: Set;
onClick(ev: ButtonEvent, emoji: IEmoji): void;
onMouseEnter(emoji: IEmoji): void;
@@ -31,7 +31,10 @@ interface IProps {
id?: string;
role?: string;
}
-
+interface EmojiandEmotes extends IEmoji {
+ customLabel?: string; // Custom label for custom emotes in emojipicker
+ customComponent?: JSX.Element; // Custom react component for rendering custom emotes in emojipicker
+}
class Emoji extends React.PureComponent {
public render(): React.ReactNode {
const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index 96ebffd0443..0be2ee293ad 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -18,10 +18,10 @@ limitations under the License.
import React, { Dispatch } from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
+import { DATA_BY_CATEGORY, getEmojiFromUnicode, Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
import { _t } from "../../../languageHandler";
import * as recent from "../../../emojipicker/recent";
-import { DATA_BY_CATEGORY, getEmojiFromUnicode, IEmoji } from "../../../emoji";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import Header from "./Header";
import Search from "./Search";
@@ -63,14 +63,17 @@ interface IProps {
interface IState {
filter: string;
- previewEmoji?: IEmoji;
+ previewEmoji?: EmojiandEmotes;
scrollTop: number;
// initial estimation of height, dialog is hardcoded to 450px height.
// should be enough to never have blank rows of emojis as
// 3 rows of overflow are also rendered. The actual value is updated on scroll.
viewportHeight: number;
}
-
+interface EmojiandEmotes extends IEmoji {
+ customLabel?: string; // Custom label for custom emotes in emojipicker
+ customComponent?: JSX.Element; // Custom react component for rendering custom emotes in emojipicker
+}
class EmojiPicker extends React.Component {
private recentlyUsed: IEmoji[];
private readonly memoizedDataByCategory: Record;
@@ -80,8 +83,8 @@ class EmojiPicker extends React.Component {
private emotes?: Map;
private emotesPromise?: Promise>;
- private finalEmotes: IEmoji[];
- private finalEmotesMap: Map;
+ private finalEmotes: EmojiandEmotes[];
+ private finalEmotesMap: Map;
public constructor(props: IProps) {
super(props);
diff --git a/src/components/views/emojipicker/Preview.tsx b/src/components/views/emojipicker/Preview.tsx
index f309dae9106..bee0f77bfdf 100644
--- a/src/components/views/emojipicker/Preview.tsx
+++ b/src/components/views/emojipicker/Preview.tsx
@@ -16,11 +16,10 @@ limitations under the License.
*/
import React from "react";
-
-import { IEmoji } from "../../../emoji";
+import { Emoji } from "@matrix-org/emojibase-bindings";
interface IProps {
- emoji: IEmoji;
+ emoji: Emoji;
}
class Preview extends React.PureComponent {
diff --git a/src/components/views/emojipicker/QuickReactions.tsx b/src/components/views/emojipicker/QuickReactions.tsx
index a58c6b875fd..accf598503f 100644
--- a/src/components/views/emojipicker/QuickReactions.tsx
+++ b/src/components/views/emojipicker/QuickReactions.tsx
@@ -16,9 +16,9 @@ limitations under the License.
*/
import React from "react";
+import { getEmojiFromUnicode, Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
import { _t } from "../../../languageHandler";
-import { getEmojiFromUnicode, IEmoji } from "../../../emoji";
import Emoji from "./Emoji";
import { ButtonEvent } from "../elements/AccessibleButton";
import Toolbar from "../../../accessibility/Toolbar";
diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx
index a34a14cbafd..36c422f847c 100644
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@@ -73,7 +73,7 @@ class Search extends React.PureComponent {
this.props.onChange(ev.target.value)}
onKeyDown={this.onKeyDown}
diff --git a/src/components/views/location/EnableLiveShare.tsx b/src/components/views/location/EnableLiveShare.tsx
index 2f432ccad00..9c42b58d355 100644
--- a/src/components/views/location/EnableLiveShare.tsx
+++ b/src/components/views/location/EnableLiveShare.tsx
@@ -36,10 +36,7 @@ export const EnableLiveShare: React.FC = ({ onSubmit }) => {
{_t(
- "Please note: this is a labs feature using a temporary implementation. " +
- "This means you will not be able to delete your location history, " +
- "and advanced users will be able to see your location history " +
- "even after you stop sharing your live location with this room.",
+ "Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.",
)}
= ({ onSubmit }) => {
onClick={onSubmit}
disabled={!isEnabled}
>
- {_t("OK")}
+ {_t("action|ok")}
);
diff --git a/src/components/views/location/MapError.tsx b/src/components/views/location/MapError.tsx
index 32e6bb77e18..f81d1afb9e1 100644
--- a/src/components/views/location/MapError.tsx
+++ b/src/components/views/location/MapError.tsx
@@ -44,7 +44,7 @@ export const MapError: React.FC
= ({ error, isMinimised, classNam
{getLocationShareErrorMessage(error)}
{onFinished && (
- {_t("OK")}
+ {_t("action|ok")}
)}
diff --git a/src/components/views/location/Marker.tsx b/src/components/views/location/Marker.tsx
index c38f43b0d37..5045d87a03b 100644
--- a/src/components/views/location/Marker.tsx
+++ b/src/components/views/location/Marker.tsx
@@ -78,8 +78,7 @@ const Marker = React.forwardRef(({ id, roomMember, useMem
{roomMember ? (
= ({ onBack, onCancel, displayBack })
@@ -44,7 +44,7 @@ const ShareDialogButtons: React.FC = ({ onBack, onCancel, displayBack })
diff --git a/src/components/views/location/ShareType.tsx b/src/components/views/location/ShareType.tsx
index d17bcdc8ce3..4e99c286227 100644
--- a/src/components/views/location/ShareType.tsx
+++ b/src/components/views/location/ShareType.tsx
@@ -31,8 +31,8 @@ const UserAvatar: React.FC = () => {
const userId = matrixClient.getSafeUserId();
const displayName = OwnProfileStore.instance.displayName ?? undefined;
// 40 - 2px border
- const avatarSize = 36;
- const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize) ?? undefined;
+ const avatarSize = "36px";
+ const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(parseInt(avatarSize, 10)) ?? undefined;
return (
@@ -40,9 +40,7 @@ const UserAvatar: React.FC = () => {
idName={userId}
name={displayName}
url={avatarUrl}
- width={avatarSize}
- height={avatarSize}
- resizeMethod="crop"
+ size={avatarSize}
className="mx_UserMenu_userAvatar_BaseAvatar"
/>
diff --git a/src/components/views/location/ZoomButtons.tsx b/src/components/views/location/ZoomButtons.tsx
index 461cdad3cdb..970835cffd4 100644
--- a/src/components/views/location/ZoomButtons.tsx
+++ b/src/components/views/location/ZoomButtons.tsx
@@ -40,7 +40,7 @@ const ZoomButtons: React.FC = ({ map }) => {
@@ -48,7 +48,7 @@ const ZoomButtons: React.FC = ({ map }) => {
diff --git a/src/components/views/location/shareLocation.ts b/src/components/views/location/shareLocation.ts
index a0c7b6febc3..dd3a0ce9d0a 100644
--- a/src/components/views/location/shareLocation.ts
+++ b/src/components/views/location/shareLocation.ts
@@ -14,10 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { MatrixClient, IContent, IEventRelation, MatrixError, THREAD_RELATION_TYPE } from "matrix-js-sdk/src/matrix";
-import { makeLocationContent, makeBeaconInfoContent } from "matrix-js-sdk/src/content-helpers";
+import {
+ MatrixClient,
+ IContent,
+ IEventRelation,
+ MatrixError,
+ THREAD_RELATION_TYPE,
+ ContentHelpers,
+ LocationAssetType,
+} from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
-import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
@@ -57,7 +63,7 @@ const getPermissionsErrorParams = (
const modalParams = {
title: _t("You don't have permission to share locations"),
description: _t("You need to have the right permissions in order to share locations in this room."),
- button: _t("OK"),
+ button: _t("action|ok"),
hasCancelButton: false,
onFinished: () => {}, // NOOP
};
@@ -80,8 +86,8 @@ const getDefaultErrorParams = (
description: _t("%(brand)s could not send your location. Please try again later.", {
brand: SdkConfig.get().brand,
}),
- button: _t("Try again"),
- cancelButton: _t("Cancel"),
+ button: _t("action|try_again"),
+ cancelButton: _t("action|cancel"),
onFinished: (tryAgain: boolean) => {
if (tryAgain) {
openMenu();
@@ -109,7 +115,7 @@ export const shareLiveLocation =
try {
await OwnBeaconStore.instance.createLiveBeacon(
roomId,
- makeBeaconInfoContent(
+ ContentHelpers.makeBeaconInfoContent(
timeout ?? DEFAULT_LIVE_DURATION,
true /* isLive */,
description,
@@ -134,7 +140,13 @@ export const shareLocation =
try {
const threadId = (relation?.rel_type === THREAD_RELATION_TYPE.name && relation?.event_id) || null;
const assetType = shareType === LocationShareType.Pin ? LocationAssetType.Pin : LocationAssetType.Self;
- const content = makeLocationContent(undefined, uri, timestamp, undefined, assetType) as IContent;
+ const content = ContentHelpers.makeLocationContent(
+ undefined,
+ uri,
+ timestamp,
+ undefined,
+ assetType,
+ ) as IContent;
await doMaybeLocalRoomAction(
roomId,
(actualRoomId: string) => client.sendMessage(actualRoomId, threadId, content),
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 067bffce30f..575f19c3a24 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -62,8 +62,7 @@ const ActiveCallEvent = forwardRef(
member={mxEvent.sender}
fallbackUserId={mxEvent.getSender()}
viewUserOnClick
- width={24}
- height={24}
+ size="24px"
/>
@@ -76,7 +75,7 @@ const ActiveCallEvent = forwardRef
(
active={false}
participantCount={participatingMembers.length}
/>
-
+
{call &&
}
(({ mxE
const [buttonText, buttonKind, onButtonClick] = useMemo(() => {
switch (connectionState) {
case ConnectionState.Disconnected:
- return [_t("Join"), "primary", connect];
+ return [_t("action|join"), "primary", connect];
case ConnectionState.Connecting:
- return [_t("Join"), "primary", null];
+ return [_t("action|join"), "primary", null];
case ConnectionState.Connected:
- return [_t("Leave"), "danger", disconnect];
+ return [_t("action|leave"), "danger", disconnect];
case ConnectionState.Disconnecting:
- return [_t("Leave"), "danger", null];
+ return [_t("action|leave"), "danger", null];
}
}, [connectionState, connect, disconnect]);
@@ -189,7 +188,7 @@ export const CallEvent = forwardRef(({ mxEvent }, ref) => {
mxEvent={mxEvent}
call={null}
participatingMembers={[]}
- buttonText={_t("Join")}
+ buttonText={_t("action|join")}
buttonKind="primary"
onButtonClick={null}
/>
diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx
index 0e6815ed36a..4175b7d0218 100644
--- a/src/components/views/messages/DateSeparator.tsx
+++ b/src/components/views/messages/DateSeparator.tsx
@@ -19,8 +19,8 @@ import React from "react";
import { Direction, ConnectionError, MatrixError, HTTPError } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
-import { _t } from "../../../languageHandler";
-import { formatFullDateNoDay, formatFullDateNoTime } from "../../../DateUtils";
+import { _t, getUserLanguage } from "../../../languageHandler";
+import { formatFullDateNoDay, formatFullDateNoTime, getDaysArray } from "../../../DateUtils";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import dispatcher from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
@@ -40,10 +40,6 @@ import JumpToDatePicker from "./JumpToDatePicker";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { SdkContextClass } from "../../../contexts/SDKContext";
-function getDaysArray(): string[] {
- return [_t("Sunday"), _t("Monday"), _t("Tuesday"), _t("Wednesday"), _t("Thursday"), _t("Friday"), _t("Saturday")];
-}
-
interface IProps {
roomId: string;
ts: number;
@@ -105,15 +101,16 @@ export default class DateSeparator extends React.Component {
const today = new Date();
const yesterday = new Date();
- const days = getDaysArray();
+ const days = getDaysArray("long");
yesterday.setDate(today.getDate() - 1);
+ const relativeTimeFormat = new Intl.RelativeTimeFormat(getUserLanguage(), { style: "long", numeric: "auto" });
if (date.toDateString() === today.toDateString()) {
- return _t("Today");
+ return relativeTimeFormat.format(0, "day"); // Today
} else if (date.toDateString() === yesterday.toDateString()) {
- return _t("Yesterday");
+ return relativeTimeFormat.format(-1, "day"); // Yesterday
} else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
- return days[date.getDay()];
+ return days[date.getDay()]; // Sunday-Saturday
} else {
return formatFullDateNoTime(date);
}
@@ -170,16 +167,12 @@ export default class DateSeparator extends React.Component {
let submitDebugLogsContent: JSX.Element = <>;
if (err instanceof ConnectionError) {
friendlyErrorMessage = _t(
- "A network error occurred while trying to find and jump to the given date. " +
- "Your homeserver might be down or there was just a temporary problem with " +
- "your internet connection. Please try again. If this continues, please " +
- "contact your homeserver administrator.",
+ "A network error occurred while trying to find and jump to the given date. Your homeserver might be down or there was just a temporary problem with your internet connection. Please try again. If this continues, please contact your homeserver administrator.",
);
} else if (err instanceof MatrixError) {
if (err?.errcode === "M_NOT_FOUND") {
friendlyErrorMessage = _t(
- "We were unable to find an event looking forwards from %(dateString)s. " +
- "Try choosing an earlier date.",
+ "We were unable to find an event looking forwards from %(dateString)s. Try choosing an earlier date.",
{ dateString: formatFullDateNoDay(new Date(unixTimestamp)) },
);
} else {
@@ -195,8 +188,7 @@ export default class DateSeparator extends React.Component {
submitDebugLogsContent = (
{_t(
- "Please submit debug logs to help us " +
- "track down the problem.",
+ "Please submit debug logs to help us track down the problem.",
{},
{
debugLogsLink: (sub) => (
diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx
index 20788b71cbf..6810723c6e3 100644
--- a/src/components/views/messages/DisambiguatedProfile.tsx
+++ b/src/components/views/messages/DisambiguatedProfile.tsx
@@ -40,7 +40,7 @@ export default class DisambiguatedProfile extends React.Component {
let colorClass: string | undefined;
if (colored) {
- colorClass = getUserNameColorClass(fallbackName);
+ colorClass = getUserNameColorClass(mxid ?? "");
}
let mxidElement;
diff --git a/src/components/views/messages/DownloadActionButton.tsx b/src/components/views/messages/DownloadActionButton.tsx
index 8e974c1e15e..5123ed63f2a 100644
--- a/src/components/views/messages/DownloadActionButton.tsx
+++ b/src/components/views/messages/DownloadActionButton.tsx
@@ -22,7 +22,7 @@ import { Icon as DownloadIcon } from "../../../../res/img/download.svg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Spinner from "../elements/Spinner";
-import { _t, _td } from "../../../languageHandler";
+import { _t, _td, TranslationKey } from "../../../languageHandler";
import { FileDownloader } from "../../../utils/FileDownloader";
interface IProps {
@@ -37,7 +37,7 @@ interface IProps {
interface IState {
loading: boolean;
blob?: Blob;
- tooltip: string;
+ tooltip: TranslationKey;
}
export default class DownloadActionButton extends React.PureComponent {
@@ -95,7 +95,7 @@ export default class DownloadActionButton extends React.PureComponent
diff --git a/src/components/views/messages/EditHistoryMessage.tsx b/src/components/views/messages/EditHistoryMessage.tsx
index f49db88d7c1..49e0f1f7de4 100644
--- a/src/components/views/messages/EditHistoryMessage.tsx
+++ b/src/components/views/messages/EditHistoryMessage.tsx
@@ -137,13 +137,13 @@ export default class EditHistoryMessage extends React.PureComponent{_t("Remove")};
+ redactButton = {_t("action|remove")};
}
let viewSourceButton: JSX.Element | undefined;
if (SettingsStore.getValue("developerMode")) {
viewSourceButton = (
- {_t("View Source")}
+ {_t("action|view_source")}
);
}
diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx
index bcd6136ec90..b9566f65306 100644
--- a/src/components/views/messages/EncryptionEvent.tsx
+++ b/src/components/views/messages/EncryptionEvent.tsx
@@ -53,23 +53,21 @@ const EncryptionEvent = forwardRef(({ mxEvent, timestamp
} else if (dmPartner) {
const displayName = room?.getMember(dmPartner)?.rawDisplayName || dmPartner;
subtitle = _t(
- "Messages here are end-to-end encrypted. " +
- "Verify %(displayName)s in their profile - tap on their profile picture.",
+ "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their profile picture.",
{ displayName },
);
} else if (room && isLocalRoom(room)) {
subtitle = _t("Messages in this chat will be end-to-end encrypted.");
} else {
subtitle = _t(
- "Messages in this room are end-to-end encrypted. " +
- "When people join, you can verify them in their profile, just tap on their profile picture.",
+ "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.",
);
}
return (
@@ -80,7 +78,7 @@ const EncryptionEvent = forwardRef(({ mxEvent, timestamp
return (
diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx
index 9516d035779..c56d424d950 100644
--- a/src/components/views/messages/LegacyCallEvent.tsx
+++ b/src/components/views/messages/LegacyCallEvent.tsx
@@ -137,14 +137,14 @@ export default class LegacyCallEvent extends React.PureComponent
onClick={this.props.callEventGrouper.rejectCall}
kind="danger"
>
- {_t("Decline")}
+ {_t("action|decline")}
- {_t("Accept")}
+ {_t("action|accept")}
{this.props.timestamp}
@@ -234,7 +234,7 @@ export default class LegacyCallEvent extends React.PureComponent
kind={InfoTooltipKind.Warning}
/>
{_t("Connection failed")}
- {this.renderCallBackButton(_t("Retry"))}
+ {this.renderCallBackButton(_t("action|retry"))}
{this.props.timestamp}
);
@@ -290,7 +290,7 @@ export default class LegacyCallEvent extends React.PureComponent
{silenceIcon}
-
+
{sender}
diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx
index c8e7f3b17e3..eeed20d5673 100644
--- a/src/components/views/messages/MBeaconBody.tsx
+++ b/src/components/views/messages/MBeaconBody.tsx
@@ -23,10 +23,10 @@ import {
MatrixClient,
RelationType,
IRedactOpts,
+ ContentHelpers,
+ M_BEACON,
} from "matrix-js-sdk/src/matrix";
-import { BeaconLocationState } from "matrix-js-sdk/src/content-helpers";
import { randomString } from "matrix-js-sdk/src/randomstring";
-import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
import classNames from "classnames";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -51,7 +51,7 @@ const useBeaconState = (
): {
beacon?: Beacon;
description?: string;
- latestLocationState?: BeaconLocationState;
+ latestLocationState?: ContentHelpers.BeaconLocationState;
isLive?: boolean;
waitingToStart?: boolean;
} => {
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 1fc0004fa1c..f430b0f9bdd 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -133,7 +133,7 @@ export default class MFileBody extends React.Component
{
}
private get fileName(): string {
- return this.content.body && this.content.body.length > 0 ? this.content.body : _t("Attachment");
+ return this.content.body && this.content.body.length > 0 ? this.content.body : _t("common|attachment");
}
private get linkText(): string {
@@ -173,7 +173,7 @@ export default class MFileBody extends React.Component {
} catch (err) {
logger.warn("Unable to decrypt attachment: ", err);
Modal.createDialog(ErrorDialog, {
- title: _t("Error"),
+ title: _t("common|error"),
description: _t("Error decrypting attachment"),
});
}
@@ -205,9 +205,9 @@ export default class MFileBody extends React.Component {
placeholder = (
-
+
- {presentableTextForFile(this.content, _t("Attachment"), true, true)}
+ {presentableTextForFile(this.content, _t("common|attachment"), true, true)}
@@ -284,7 +284,7 @@ export default class MFileBody extends React.Component {
*/}