imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update „new device“ toast texts and buttons (#10200)

Browse source
This commit is contained in:
Michael Weimann 2023-02-23 10:25:33 +01:00 • committed by GitHub
parent e6fe7b7ea8
commit 880428ab94
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 336 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/views/settings/devices/DeviceTile.tsx
View file

@ -1,5 +1,5 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Copyright 2022 - 2023 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.
@ -14,17 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { Fragment } from "react";
import React from "react";
import classNames from "classnames";
import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
import { _t } from "../../../../languageHandler";
import { formatDate, formatRelativeTime } from "../../../../DateUtils";
import Heading from "../../typography/Heading";
import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
import { ExtendedDevice } from "./types";
import { DeviceTypeIcon } from "./DeviceTypeIcon";
import { preventDefaultWrapper } from "../../../../utils/NativeEventUtils";
import { DeviceMetaData } from "./DeviceMetaData";
export interface DeviceTileProps {
device: ExtendedDevice;
isSelected?: boolean;
@ -36,53 +33,7 @@ const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
return <Heading size="h4">{device.display_name || device.device_id}</Heading>;
};
const MS_DAY = 24 * 60 * 60 * 1000;
const MS_6_DAYS = 6 * MS_DAY;
const formatLastActivity = (timestamp: number, now = new Date().getTime()): string => {
// less than a week ago
if (timestamp + MS_6_DAYS >= now) {
const date = new Date(timestamp);
// Tue 20:15
return formatDate(date);
}
return formatRelativeTime(new Date(timestamp));
};
const getInactiveMetadata = (device: ExtendedDevice): { id: string; value: React.ReactNode } | undefined => {
const isInactive = isDeviceInactive(device);
if (!isInactive) {
return undefined;
}
return {
id: "inactive",
value: (
<>
<InactiveIcon className="mx_DeviceTile_inactiveIcon" />
{_t("Inactive for %(inactiveAgeDays)s+ days", { inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS }) +
` (${formatLastActivity(device.last_seen_ts)})`}
</>
),
};
};
const DeviceMetadata: React.FC<{ value: string | React.ReactNode; id: string }> = ({ value, id }) =>
value ? <span data-testid={`device-metadata-${id}`}>{value}</span> : null;
const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, onClick }) => {
const inactive = getInactiveMetadata(device);
const lastActivity = device.last_seen_ts && `${_t("Last activity")} ${formatLastActivity(device.last_seen_ts)}`;
const verificationStatus = device.isVerified ? _t("Verified") : _t("Unverified");
// if device is inactive, don't display last activity or verificationStatus
const metadata = inactive
? [inactive, { id: "lastSeenIp", value: device.last_seen_ip }]
: [
{ id: "isVerified", value: verificationStatus },
{ id: "lastActivity", value: lastActivity },
{ id: "lastSeenIp", value: device.last_seen_ip },
{ id: "deviceId", value: device.device_id },
];
return (
<div
className={classNames("mx_DeviceTile", { mx_DeviceTile_interactive: !!onClick })}
@ -93,14 +44,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, o
<div className="mx_DeviceTile_info">
<DeviceTileName device={device} />
<div className="mx_DeviceTile_metadata">
{metadata.map(({ id, value }, index) =>
!!value ? (
<Fragment key={id}>
{!!index && " · "}
<DeviceMetadata id={id} value={value} />
</Fragment>
) : null,
)}
<DeviceMetaData device={device} />
</div>
</div>
<div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>