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

Conform to new react and typescript eslint rules

Browse source
This commit is contained in:
Michael Telatynski 2021-07-19 22:43:11 +01:00
parent b6feaf74bc
commit ce78cdf4ad
266 changed files with 1992 additions and 2000 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/right_panel/BaseCard.tsx
View file

@ -43,8 +43,8 @@ interface IGroupProps {
export const Group: React.FC<IGroupProps> = ({ className, title, children }) => {
return <div className={classNames("mx_BaseCard_Group", className)}>
<h1>{title}</h1>
{children}
<h1>{ title }</h1>
{ children }
</div>;
};

22
src/components/views/right_panel/EncryptionInfo.tsx
View file

@ -66,7 +66,7 @@ const EncryptionInfo: React.FC<IProps> = ({
} else {
content = (
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={onStartVerification}>
{_t("Start Verification")}
{ _t("Start Verification") }
</AccessibleButton>
);
}
@ -75,17 +75,17 @@ const EncryptionInfo: React.FC<IProps> = ({
if (isRoomEncrypted) {
description = (
<div>
<p>{_t("Messages in this room are end-to-end encrypted.")}</p>
<p>{_t("Your messages are secured and only you and the recipient have " +
"the unique keys to unlock them.")}</p>
<p>{ _t("Messages in this room are end-to-end encrypted.") }</p>
<p>{ _t("Your messages are secured and only you and the recipient have " +
"the unique keys to unlock them.") }</p>
</div>
);
} else {
description = (
<div>
<p>{_t("Messages in this room are not end-to-end encrypted.")}</p>
<p>{_t("In encrypted rooms, your messages are secured and only you and the recipient have " +
"the unique keys to unlock them.")}</p>
<p>{ _t("Messages in this room are not end-to-end encrypted.") }</p>
<p>{ _t("In encrypted rooms, your messages are secured and only you and the recipient have " +
"the unique keys to unlock them.") }</p>
</div>
);
}
@ -96,14 +96,14 @@ const EncryptionInfo: React.FC<IProps> = ({
return <React.Fragment>
<div className="mx_UserInfo_container">
<h3>{_t("Encryption")}</h3>
<h3>{ _t("Encryption") }</h3>
{ description }
</div>
<div className="mx_UserInfo_container">
<h3>{_t("Verify User")}</h3>
<h3>{ _t("Verify User") }</h3>
<div>
<p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
<p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
<p>{ _t("For extra security, verify this user by checking a one-time code on both of your devices.") }</p>
<p>{ _t("To be secure, do this in person or use a trusted way to communicate.") }</p>
{ content }
</div>
</div>

10
src/components/views/right_panel/EncryptionPanel.tsx
View file

@ -87,12 +87,12 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
headerImage: require("../../../../res/img/e2e/warning.svg"),
title: _t("Your messages are not secure"),
description: <div>
{_t("One of the following may be compromised:")}
{ _t("One of the following may be compromised:") }
<ul>
<li>{_t("Your homeserver")}</li>
<li>{_t("The homeserver the user you’re verifying is connected to")}</li>
<li>{_t("Yours, or the other users’ internet connection")}</li>
<li>{_t("Yours, or the other users’ session")}</li>
<li>{ _t("Your homeserver") }</li>
<li>{ _t("The homeserver the user you’re verifying is connected to") }</li>
<li>{ _t("Yours, or the other users’ internet connection") }</li>
<li>{ _t("Yours, or the other users’ session") }</li>
</ul>
</div>,
onFinished: onClose,

2
src/components/views/right_panel/HeaderButtons.tsx
View file

@ -99,7 +99,7 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
public render() {
return <div className="mx_HeaderButtons">
{this.renderButtons()}
{ this.renderButtons() }
</div>;
}
}

12
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -148,7 +148,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
yOffset={-48}
>
<WidgetAvatar app={app} />
<span>{name}</span>
<span>{ name }</span>
{ subtitle }
</AccessibleTooltipButton>
@ -256,7 +256,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
<h2 title={name}>
{ name }
</h2>
)}
) }
</RoomName>
<div className="mx_RoomSummaryCard_alias" title={alias}>
{ alias }
@ -268,16 +268,16 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
{_t("%(count)s people", { count: memberCount })}
{ _t("%(count)s people", { count: memberCount }) }
</Button>
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{_t("Show files")}
{ _t("Show files") }
</Button>
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
{_t("Share room")}
{ _t("Share room") }
</Button>
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
{_t("Room settings")}
{ _t("Room settings") }
</Button>
</Group>

30
src/components/views/right_panel/UserInfo.tsx
View file

@ -207,8 +207,8 @@ function DeviceItem({ userId, device }: {userId: string, device: IDevice}) {
return (
<div className={classes} title={device.deviceId} >
<div className={iconClasses} />
<div className="mx_UserInfo_device_name">{deviceName}</div>
<div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
<div className="mx_UserInfo_device_name">{ deviceName }</div>
<div className="mx_UserInfo_device_trusted">{ trustedLabel }</div>
</div>
);
} else {
@ -219,8 +219,8 @@ function DeviceItem({ userId, device }: {userId: string, device: IDevice}) {
onClick={onDeviceClick}
>
<div className={iconClasses} />
<div className="mx_UserInfo_device_name">{deviceName}</div>
<div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
<div className="mx_UserInfo_device_name">{ deviceName }</div>
<div className="mx_UserInfo_device_trusted">{ trustedLabel }</div>
</AccessibleButton>
);
}
@ -237,7 +237,7 @@ function DevicesSection({ devices, userId, loading }: {devices: IDevice[], userI
return <Spinner />;
}
if (devices === null) {
return <>{_t("Unable to load session list")}</>;
return <>{ _t("Unable to load session list") }</>;
}
const isMe = userId === cli.getUserId();
const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));
@ -282,14 +282,14 @@ function DevicesSection({ devices, userId, loading }: {devices: IDevice[], userI
expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
onClick={() => setExpanded(false)}
>
<div>{expandHideCaption}</div>
<div>{ expandHideCaption }</div>
</AccessibleButton>);
} else {
expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
onClick={() => setExpanded(true)}
>
<div className={expandIconClasses} />
<div>{expandCountCaption}</div>
<div>{ expandCountCaption }</div>
</AccessibleButton>);
}
}
@ -306,8 +306,8 @@ function DevicesSection({ devices, userId, loading }: {devices: IDevice[], userI
return (
<div className="mx_UserInfo_devices">
<div>{deviceList}</div>
<div>{expandButton}</div>
<div>{ deviceList }</div>
<div>{ expandButton }</div>
</div>
);
}
@ -385,7 +385,7 @@ const UserOptionsSection: React.FC<{
}
insertPillButton = (
<AccessibleButton onClick={onInsertPillButton} className={"mx_UserInfo_field"}>
<AccessibleButton onClick={onInsertPillButton} className="mx_UserInfo_field">
{ _t('Mention') }
</AccessibleButton>
);
@ -1038,7 +1038,7 @@ const PowerLevelSection: React.FC<{
const role = textualPowerLevel(powerLevel, powerLevelUsersDefault);
return (
<div className="mx_UserInfo_profileField">
<div className="mx_UserInfo_roleDescription">{role}</div>
<div className="mx_UserInfo_roleDescription">{ role }</div>
</div>
);
}
@ -1267,7 +1267,7 @@ const BasicUserInfo: React.FC<{
if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
synapseDeactivateButton = (
<AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
{_t("Deactivate user")}
{ _t("Deactivate user") }
</AccessibleButton>
);
}
@ -1360,7 +1360,7 @@ const BasicUserInfo: React.FC<{
legacyVerifyUser(member as User);
}
}}>
{_t("Verify")}
{ _t("Verify") }
</AccessibleButton>
);
} else if (!showDeviceListSpinner) {
@ -1518,8 +1518,8 @@ const UserInfoHeader: React.FC<{
</div>
<div>{ member.userId }</div>
<div className="mx_UserInfo_profileStatus">
{presenceLabel}
{statusLabel}
{ presenceLabel }
{ statusLabel }
</div>
</div>
</div>

60
src/components/views/right_panel/VerificationPanel.tsx
View file

@ -85,12 +85,12 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
const brand = SdkConfig.get().brand;
const noCommonMethodError: JSX.Element = !showSAS && !showQR ?
<p>{_t(
<p>{ _t(
"The session you are trying to verify doesn't support scanning a " +
"QR code or emoji verification, which is what %(brand)s supports. Try " +
"with a different client.",
{ brand },
)}</p> :
) }</p> :
null;
if (this.props.layout === 'dialog') {
@ -100,31 +100,31 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
if (showQR) {
qrBlockDialog =
<div className='mx_VerificationPanel_QRPhase_startOption'>
<p>{_t("Scan this unique code")}</p>
<p>{ _t("Scan this unique code") }</p>
<VerificationQRCode qrCodeData={request.qrCodeData} />
</div>;
}
if (showSAS) {
sasBlockDialog = <div className='mx_VerificationPanel_QRPhase_startOption'>
<p>{_t("Compare unique emoji")}</p>
<p>{ _t("Compare unique emoji") }</p>
<span className='mx_VerificationPanel_QRPhase_helpText'>
{_t("Compare a unique set of emoji if you don't have a camera on either device")}
{ _t("Compare a unique set of emoji if you don't have a camera on either device") }
</span>
<AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this.startSAS} kind='primary'>
{_t("Start")}
{ _t("Start") }
</AccessibleButton>
</div>;
}
const or = qrBlockDialog && sasBlockDialog ?
<div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div> : null;
<div className='mx_VerificationPanel_QRPhase_betweenText'>{ _t("or") }</div> : null;
return (
<div>
{_t("Verify this session by completing one of the following:")}
{ _t("Verify this session by completing one of the following:") }
<div className='mx_VerificationPanel_QRPhase_startOptions'>
{qrBlockDialog}
{or}
{sasBlockDialog}
{noCommonMethodError}
{ qrBlockDialog }
{ or }
{ sasBlockDialog }
{ noCommonMethodError }
</div>
</div>
);
@ -133,10 +133,10 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
let qrBlock: JSX.Element;
if (showQR) {
qrBlock = <div className="mx_UserInfo_container">
<h3>{_t("Verify by scanning")}</h3>
<p>{_t("Ask %(displayName)s to scan your code:", {
<h3>{ _t("Verify by scanning") }</h3>
<p>{ _t("Ask %(displayName)s to scan your code:", {
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
})}</p>
}) }</p>
<div className="mx_VerificationPanel_qrCode">
<VerificationQRCode qrCodeData={request.qrCodeData} />
@ -153,28 +153,28 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
// Note: mx_VerificationPanel_verifyByEmojiButton is for the end-to-end tests
sasBlock = <div className="mx_UserInfo_container">
<h3>{_t("Verify by emoji")}</h3>
<p>{sasLabel}</p>
<h3>{ _t("Verify by emoji") }</h3>
<p>{ sasLabel }</p>
<AccessibleButton
disabled={disabled}
kind="primary"
className="mx_UserInfo_wideButton mx_VerificationPanel_verifyByEmojiButton"
onClick={this.startSAS}
>
{_t("Verify by emoji")}
{ _t("Verify by emoji") }
</AccessibleButton>
</div>;
}
const noCommonMethodBlock = noCommonMethodError ?
<div className="mx_UserInfo_container">{noCommonMethodError}</div> :
<div className="mx_UserInfo_container">{ noCommonMethodError }</div> :
null;
// TODO: add way to open camera to scan a QR code
return <React.Fragment>
{qrBlock}
{sasBlock}
{noCommonMethodBlock}
{ qrBlock }
{ sasBlock }
{ noCommonMethodBlock }
</React.Fragment>;
}
@ -204,7 +204,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
if (this.state.reciprocateQREvent) {
// Element Web doesn't support scanning yet, so assume here we're the client being scanned.
body = <React.Fragment>
<p>{description}</p>
<p>{ description }</p>
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
<div className="mx_VerificationPanel_reciprocateButtons">
<AccessibleButton
@ -227,7 +227,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
body = <p><Spinner /></p>;
}
return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
<h3>{_t("Verify by scanning")}</h3>
<h3>{ _t("Verify by scanning") }</h3>
{ body }
</div>;
}
@ -266,12 +266,12 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
return (
<div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
<h3>{_t("Verified")}</h3>
<p>{description}</p>
<h3>{ _t("Verified") }</h3>
<p>{ description }</p>
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
{ text ? <p>{ text }</p> : null }
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
{_t("Got it")}
{ _t("Got it") }
</AccessibleButton>
</div>
);
@ -305,11 +305,11 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
return (
<div className="mx_UserInfo_container">
<h3>{_t("Verification cancelled")}</h3>
<h3>{ _t("Verification cancelled") }</h3>
<p>{ text }</p>
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
{_t("Got it")}
{ _t("Got it") }
</AccessibleButton>
</div>
);
@ -339,7 +339,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
isSelf={request.isSelfVerification}
/> : <Spinner />;
return <div className="mx_UserInfo_container">
<h3>{_t("Compare emoji")}</h3>
<h3>{ _t("Compare emoji") }</h3>
{ emojis }
</div>;
}