Refactor some logic into common AvatarSetting component (#12544)
* Refactor some logic into common AvatarSetting component We duplicated some of the logic of setting avatars between profiles & rooms. This pulls some of that logic into the AvatarSetting component and hopefully make things a little simpler. * Unsed import * Convert JS based hover to CSS * Remove unnecessary container * Test avatar-as-file path * Test file upload * Unused imports * Add test for RoomProfileSettings * Test removing room avatar * Move upload control CSS too * Remove commented code Co-authored-by: Florian Duros <florianduros@element.io> * Prettier * Coments & move style to inline as per PR suggestion * Better test names Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Fix test Upload input doesn't have that class anymore --------- Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
David Baker
GitHub
parent
f6e919021a
commit
3342aa5ff8
8 changed files with 296 additions and 164 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
Copyright 2019, 2024 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -21,11 +21,9 @@ import { EventType } from "matrix-js-sdk/src/matrix";
|
|||
import { _t } from "../../../languageHandler";
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import Field from "../elements/Field";
|
||||
import { mediaFromMxc } from "../../../customisations/Media";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import AvatarSetting from "../settings/AvatarSetting";
|
||||
import { htmlSerializeFromMdIfNeeded } from "../../../editor/serialize";
|
||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
|
|
@ -35,8 +33,9 @@ interface IState {
|
|||
originalDisplayName: string;
|
||||
displayName: string;
|
||||
originalAvatarUrl: string | null;
|
||||
avatarUrl: string | null;
|
||||
avatarFile: File | null;
|
||||
// If true, the user has indicated that they wish to remove the avatar and this should happen on save.
|
||||
avatarRemovalPending: boolean;
|
||||
originalTopic: string;
|
||||
topic: string;
|
||||
profileFieldsTouched: Record<string, boolean>;
|
||||
|
|
@ -57,8 +56,7 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
if (!room) throw new Error(`Expected a room for ID: ${props.roomId}`);
|
||||
|
||||
const avatarEvent = room.currentState.getStateEvents(EventType.RoomAvatar, "");
|
||||
let avatarUrl = avatarEvent?.getContent()["url"] ?? null;
|
||||
if (avatarUrl) avatarUrl = mediaFromMxc(avatarUrl).getSquareThumbnailHttp(96);
|
||||
const avatarUrl = avatarEvent?.getContent()["url"] ?? null;
|
||||
|
||||
const topicEvent = room.currentState.getStateEvents(EventType.RoomTopic, "");
|
||||
const topic = topicEvent && topicEvent.getContent() ? topicEvent.getContent()["topic"] : "";
|
||||
|
|
@ -71,8 +69,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
originalDisplayName: name,
|
||||
displayName: name,
|
||||
originalAvatarUrl: avatarUrl,
|
||||
avatarUrl: avatarUrl,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: false,
|
||||
originalTopic: topic,
|
||||
topic: topic,
|
||||
profileFieldsTouched: {},
|
||||
|
|
@ -82,16 +80,23 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
};
|
||||
}
|
||||
|
||||
private uploadAvatar = (): void => {
|
||||
this.avatarUpload.current?.click();
|
||||
private onAvatarChanged = (file: File): void => {
|
||||
this.setState({
|
||||
avatarFile: file,
|
||||
avatarRemovalPending: false,
|
||||
profileFieldsTouched: {
|
||||
...this.state.profileFieldsTouched,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
private removeAvatar = (): void => {
|
||||
// clear file upload field so same file can be selected
|
||||
if (this.avatarUpload.current) this.avatarUpload.current.value = "";
|
||||
this.setState({
|
||||
avatarUrl: null,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: true,
|
||||
profileFieldsTouched: {
|
||||
...this.state.profileFieldsTouched,
|
||||
avatar: true,
|
||||
|
|
@ -112,8 +117,8 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
profileFieldsTouched: {},
|
||||
displayName: this.state.originalDisplayName,
|
||||
topic: this.state.originalTopic,
|
||||
avatarUrl: this.state.originalAvatarUrl,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -138,11 +143,12 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
if (this.state.avatarFile) {
|
||||
const { content_uri: uri } = await client.uploadContent(this.state.avatarFile);
|
||||
await client.sendStateEvent(this.props.roomId, EventType.RoomAvatar, { url: uri }, "");
|
||||
newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96);
|
||||
newState.originalAvatarUrl = newState.avatarUrl;
|
||||
newState.originalAvatarUrl = uri;
|
||||
newState.avatarFile = null;
|
||||
} else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
|
||||
} else if (this.state.avatarRemovalPending) {
|
||||
await client.sendStateEvent(this.props.roomId, EventType.RoomAvatar, {}, "");
|
||||
newState.avatarRemovalPending = false;
|
||||
newState.originalAvatarUrl = null;
|
||||
}
|
||||
|
||||
if (this.state.originalTopic !== this.state.topic) {
|
||||
|
|
@ -192,34 +198,6 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
}
|
||||
};
|
||||
|
||||
private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
if (!e.target.files || !e.target.files.length) {
|
||||
this.setState({
|
||||
avatarUrl: this.state.originalAvatarUrl,
|
||||
avatarFile: null,
|
||||
profileFieldsTouched: {
|
||||
...this.state.profileFieldsTouched,
|
||||
avatar: false,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
this.setState({
|
||||
avatarUrl: String(ev.target?.result),
|
||||
avatarFile: file,
|
||||
profileFieldsTouched: {
|
||||
...this.state.profileFieldsTouched,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
let profileSettingsButtons;
|
||||
if (this.state.canSetName || this.state.canSetTopic || this.state.canSetAvatar) {
|
||||
|
|
@ -241,14 +219,6 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
|
||||
return (
|
||||
<form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
|
||||
<input
|
||||
type="file"
|
||||
ref={this.avatarUpload}
|
||||
className="mx_ProfileSettings_avatarUpload"
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={this.onAvatarChanged}
|
||||
accept="image/*"
|
||||
/>
|
||||
<div className="mx_ProfileSettings_profile">
|
||||
<div className="mx_ProfileSettings_profile_controls">
|
||||
<Field
|
||||
|
|
@ -275,11 +245,15 @@ export default class RoomProfileSettings extends React.Component<IProps, IState>
|
|||
/>
|
||||
</div>
|
||||
<AvatarSetting
|
||||
avatarUrl={this.state.avatarUrl ?? undefined}
|
||||
avatarName={this.state.displayName || this.props.roomId}
|
||||
avatar={
|
||||
this.state.avatarRemovalPending
|
||||
? undefined
|
||||
: this.state.avatarFile ?? this.state.originalAvatarUrl ?? undefined
|
||||
}
|
||||
avatarAltText={_t("room_settings|general|avatar_field_label")}
|
||||
uploadAvatar={this.state.canSetAvatar ? this.uploadAvatar : undefined}
|
||||
removeAvatar={this.state.canSetAvatar ? this.removeAvatar : undefined}
|
||||
disabled={!this.state.canSetAvatar}
|
||||
onChange={this.onAvatarChanged}
|
||||
removeAvatar={this.removeAvatar}
|
||||
/>
|
||||
</div>
|
||||
{profileSettingsButtons}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019, 2024 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,51 +14,102 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import classNames from "classnames";
|
||||
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import { mediaFromMxc } from "../../../customisations/Media";
|
||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||
|
||||
interface IProps {
|
||||
avatarUrl?: string;
|
||||
avatarName: string; // name of user/room the avatar belongs to
|
||||
uploadAvatar?: (e: ButtonEvent) => void;
|
||||
removeAvatar?: (e: ButtonEvent) => void;
|
||||
/**
|
||||
* The current value of the avatar URL, as an mxc URL or a File.
|
||||
* Generally, an mxc URL would be specified until the user selects a file, then
|
||||
* the file supplied by the onChange callback would be supplied here until it's
|
||||
* saved.
|
||||
*/
|
||||
avatar?: string | File;
|
||||
|
||||
/**
|
||||
* If true, the user cannot change the avatar
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Called when the user has selected a new avatar
|
||||
* The callback is passed a File object for the new avatar data
|
||||
*/
|
||||
onChange?: (f: File) => void;
|
||||
|
||||
/**
|
||||
* Called when the user wishes to remove the avatar
|
||||
*/
|
||||
removeAvatar?: () => void;
|
||||
|
||||
/**
|
||||
* The alt text for the avatar
|
||||
*/
|
||||
avatarAltText: string;
|
||||
}
|
||||
|
||||
const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar }) => {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const hoveringProps = {
|
||||
onMouseEnter: () => setIsHovering(true),
|
||||
onMouseLeave: () => setIsHovering(false),
|
||||
};
|
||||
/**
|
||||
* Component for setting or removing an avatar on something (eg. a user or a room)
|
||||
*/
|
||||
const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, removeAvatar, disabled }) => {
|
||||
const fileInputRef = createRef<HTMLInputElement>();
|
||||
|
||||
// Real URL that we can supply to the img element, either a data URL or whatever mediaFromMxc gives
|
||||
// This represents whatever avatar the user has chosen at the time
|
||||
const [avatarURL, setAvatarURL] = useState<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
if (avatar instanceof File) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setAvatarURL(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(avatar);
|
||||
} else if (avatar) {
|
||||
setAvatarURL(mediaFromMxc(avatar).getSquareThumbnailHttp(96) ?? undefined);
|
||||
} else {
|
||||
setAvatarURL(undefined);
|
||||
}
|
||||
}, [avatar]);
|
||||
|
||||
// TODO: Use useId() as soon as we're using React 18.
|
||||
// Prevents ID collisions when this component is used more than once on the same page.
|
||||
const a11yId = useRef(`hover-text-${Math.random()}`);
|
||||
|
||||
const onFileChanged = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files) onChange?.(e.target.files[0]);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const uploadAvatar = useCallback((): void => {
|
||||
fileInputRef.current?.click();
|
||||
}, [fileInputRef]);
|
||||
|
||||
let avatarElement = (
|
||||
<AccessibleButton
|
||||
element="div"
|
||||
onClick={uploadAvatar ?? null}
|
||||
className="mx_AvatarSetting_avatarPlaceholder"
|
||||
aria-labelledby={uploadAvatar ? a11yId.current : undefined}
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay"
|
||||
aria-labelledby={disabled ? undefined : a11yId.current}
|
||||
// Inhibit tab stop as we have explicit upload/remove buttons
|
||||
tabIndex={-1}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
);
|
||||
if (avatarUrl) {
|
||||
if (avatarURL) {
|
||||
avatarElement = (
|
||||
<AccessibleButton
|
||||
element="img"
|
||||
src={avatarUrl}
|
||||
className="mx_AvatarSetting_avatarDisplay"
|
||||
src={avatarURL}
|
||||
alt={avatarAltText}
|
||||
onClick={uploadAvatar ?? null}
|
||||
onClick={uploadAvatar}
|
||||
// Inhibit tab stop as we have explicit upload/remove buttons
|
||||
tabIndex={-1}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -67,17 +118,27 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
|
|||
if (uploadAvatar) {
|
||||
// insert an empty div to be the host for a css mask containing the upload.svg
|
||||
uploadAvatarBtn = (
|
||||
<AccessibleButton
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_uploadButton"
|
||||
aria-labelledby={a11yId.current}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
<>
|
||||
<AccessibleButton
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_uploadButton"
|
||||
aria-labelledby={a11yId.current}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
style={{ display: "none" }}
|
||||
ref={fileInputRef}
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={onFileChanged}
|
||||
accept="image/*"
|
||||
alt={_t("action|upload")}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
let removeAvatarBtn: JSX.Element | undefined;
|
||||
if (avatarUrl && removeAvatar) {
|
||||
if (avatarURL && removeAvatar && !disabled) {
|
||||
removeAvatarBtn = (
|
||||
<AccessibleButton onClick={removeAvatar} kind="link_sm">
|
||||
{_t("action|remove")}
|
||||
|
|
@ -85,16 +146,12 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
|
|||
);
|
||||
}
|
||||
|
||||
const avatarClasses = classNames({
|
||||
mx_AvatarSetting_avatar: true,
|
||||
mx_AvatarSetting_avatar_hovering: isHovering && uploadAvatar,
|
||||
});
|
||||
return (
|
||||
<div className={avatarClasses} role="group" aria-label={avatarAltText}>
|
||||
<div className="mx_AvatarSetting_avatar" role="group" aria-label={avatarAltText}>
|
||||
{avatarElement}
|
||||
<div className="mx_AvatarSetting_hover" aria-hidden="true">
|
||||
<div className="mx_AvatarSetting_hoverBg" />
|
||||
{uploadAvatar && <span id={a11yId.current}>{_t("action|upload")}</span>}
|
||||
{!disabled && <span id={a11yId.current}>{_t("action|upload")}</span>}
|
||||
</div>
|
||||
{uploadAvatarBtn}
|
||||
{removeAvatarBtn}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019 - 2024 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.
|
||||
|
|
@ -23,11 +23,9 @@ import Field from "../elements/Field";
|
|||
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
|
||||
import Modal from "../../../Modal";
|
||||
import ErrorDialog from "../dialogs/ErrorDialog";
|
||||
import { mediaFromMxc } from "../../../customisations/Media";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import AvatarSetting from "./AvatarSetting";
|
||||
import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
|
||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||
import PosthogTrackers from "../../../PosthogTrackers";
|
||||
import { SettingsSubsectionHeading } from "./shared/SettingsSubsectionHeading";
|
||||
|
||||
|
|
@ -35,8 +33,9 @@ interface IState {
|
|||
originalDisplayName: string;
|
||||
displayName: string;
|
||||
originalAvatarUrl: string | null;
|
||||
avatarUrl?: string | ArrayBuffer;
|
||||
avatarFile?: File | null;
|
||||
// If true, the user has indicated that they wish to remove the avatar and this should happen on save.
|
||||
avatarRemovalPending: boolean;
|
||||
enableProfileSave?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -48,20 +47,24 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
super(props);
|
||||
|
||||
this.userId = MatrixClientPeg.safeGet().getSafeUserId();
|
||||
let avatarUrl = OwnProfileStore.instance.avatarMxc;
|
||||
if (avatarUrl) avatarUrl = mediaFromMxc(avatarUrl).getSquareThumbnailHttp(96);
|
||||
const avatarUrl = OwnProfileStore.instance.avatarMxc;
|
||||
this.state = {
|
||||
originalDisplayName: OwnProfileStore.instance.displayName ?? "",
|
||||
displayName: OwnProfileStore.instance.displayName ?? "",
|
||||
originalAvatarUrl: avatarUrl,
|
||||
avatarUrl: avatarUrl ?? undefined,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: false,
|
||||
enableProfileSave: false,
|
||||
};
|
||||
}
|
||||
|
||||
private uploadAvatar = (): void => {
|
||||
this.avatarUpload.current?.click();
|
||||
private onChange = (file: File): void => {
|
||||
PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton");
|
||||
this.setState({
|
||||
avatarFile: file,
|
||||
avatarRemovalPending: false,
|
||||
enableProfileSave: true,
|
||||
});
|
||||
};
|
||||
|
||||
private removeAvatar = (): void => {
|
||||
|
|
@ -70,8 +73,8 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
this.avatarUpload.current.value = "";
|
||||
}
|
||||
this.setState({
|
||||
avatarUrl: undefined,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: true,
|
||||
enableProfileSave: true,
|
||||
});
|
||||
};
|
||||
|
|
@ -84,8 +87,8 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
this.setState({
|
||||
enableProfileSave: false,
|
||||
displayName: this.state.originalDisplayName,
|
||||
avatarUrl: this.state.originalAvatarUrl ?? undefined,
|
||||
avatarFile: null,
|
||||
avatarRemovalPending: false,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -114,11 +117,12 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
);
|
||||
const { content_uri: uri } = await client.uploadContent(this.state.avatarFile);
|
||||
await client.setAvatarUrl(uri);
|
||||
newState.avatarUrl = mediaFromMxc(uri).getSquareThumbnailHttp(96) ?? undefined;
|
||||
newState.originalAvatarUrl = newState.avatarUrl;
|
||||
newState.originalAvatarUrl = uri;
|
||||
newState.avatarFile = null;
|
||||
} else if (this.state.originalAvatarUrl !== this.state.avatarUrl) {
|
||||
} else if (this.state.avatarRemovalPending) {
|
||||
await client.setAvatarUrl(""); // use empty string as Synapse 500s on undefined
|
||||
newState.originalAvatarUrl = null;
|
||||
newState.avatarRemovalPending = false;
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log("Failed to save profile", err);
|
||||
|
|
@ -138,50 +142,13 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
});
|
||||
};
|
||||
|
||||
private onAvatarChanged = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
if (!e.target.files || !e.target.files.length) {
|
||||
this.setState({
|
||||
avatarUrl: this.state.originalAvatarUrl ?? undefined,
|
||||
avatarFile: null,
|
||||
enableProfileSave: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (ev) => {
|
||||
this.setState({
|
||||
avatarUrl: ev.target?.result ?? undefined,
|
||||
avatarFile: file,
|
||||
enableProfileSave: true,
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier(this.userId, {
|
||||
withDisplayName: true,
|
||||
});
|
||||
|
||||
// False negative result from no-base-to-string rule, doesn't seem to account for Symbol.toStringTag
|
||||
// eslint-disable-next-line @typescript-eslint/no-base-to-string
|
||||
const avatarUrl = this.state.avatarUrl?.toString();
|
||||
|
||||
return (
|
||||
<form onSubmit={this.saveProfile} autoComplete="off" noValidate={true} className="mx_ProfileSettings">
|
||||
<input
|
||||
type="file"
|
||||
ref={this.avatarUpload}
|
||||
className="mx_ProfileSettings_avatarUpload"
|
||||
onClick={(ev) => {
|
||||
chromeFileInputFix(ev);
|
||||
PosthogTrackers.trackInteraction("WebProfileSettingsAvatarUploadButton", ev);
|
||||
}}
|
||||
onChange={this.onAvatarChanged}
|
||||
accept="image/*"
|
||||
/>
|
||||
<div className="mx_ProfileSettings_profile">
|
||||
<div className="mx_ProfileSettings_profile_controls">
|
||||
<SettingsSubsectionHeading heading={_t("common|profile")} />
|
||||
|
|
@ -199,10 +166,13 @@ export default class ProfileSettings extends React.Component<{}, IState> {
|
|||
</p>
|
||||
</div>
|
||||
<AvatarSetting
|
||||
avatarUrl={avatarUrl}
|
||||
avatarName={this.state.displayName || this.userId}
|
||||
avatar={
|
||||
this.state.avatarRemovalPending
|
||||
? undefined
|
||||
: this.state.avatarFile ?? this.state.originalAvatarUrl ?? undefined
|
||||
}
|
||||
avatarAltText={_t("common|user_avatar")}
|
||||
uploadAvatar={this.uploadAvatar}
|
||||
onChange={this.onChange}
|
||||
removeAvatar={this.removeAvatar}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue