nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Remove buggy tooltip on room intro & homepage (#29406)

Browse Source 
* Remove buggy tooltip on room intro & homepage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add knip ignore

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-03-04 13:24:38 +00:00
committed by GitHub
parent 21e9d93e69
commit 31af8b07dd
3 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
knip.ts
View File

@@ -19,6 +19,7 @@ export default {
ignore: [
// Keep for now
"src/hooks/useLocalStorageState.ts",
"src/hooks/useTimeout.ts",
"src/components/views/elements/InfoTooltip.tsx",
"src/components/views/elements/StyledCheckbox.tsx",
],

45
src/components/views/elements/MiniAvatarUploader.tsx
View File

@@ -9,10 +9,8 @@ Please see LICENSE files in the repository root for full details.
import classNames from "classnames";
import { EventType } from "matrix-js-sdk/src/matrix";
import React, { useContext, useRef, useState, type MouseEvent, type ReactNode } from "react";
import { Tooltip } from "@vector-im/compound-web";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { useTimeout } from "../../../hooks/useTimeout";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
import AccessibleButton from "./AccessibleButton";
import Spinner from "./Spinner";
@@ -42,15 +40,6 @@ const MiniAvatarUploader: React.FC<IProps> = ({
}) => {
const cli = useContext(MatrixClientContext);
const [busy, setBusy] = useState(false);
const [hover, setHover] = useState(false);
const [show, setShow] = useState(false);
useTimeout(() => {
setShow(true);
}, 3000); // show after 3 seconds
useTimeout(() => {
setShow(false);
}, 13000); // hide after being shown for 10 seconds
const uploadRef = useRef<HTMLInputElement>(null);
@@ -61,7 +50,6 @@ const MiniAvatarUploader: React.FC<IProps> = ({
isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getSafeUserId());
if (!canSetAvatar) return <React.Fragment>{children}</React.Fragment>;
const visible = !!label && (hover || show);
return (
<React.Fragment>
<input
@@ -84,24 +72,23 @@ const MiniAvatarUploader: React.FC<IProps> = ({
accept="image/*"
/>
<Tooltip label={label!} open={visible} onOpenChange={setHover}>
<AccessibleButton
className={classNames("mx_MiniAvatarUploader", {
mx_MiniAvatarUploader_busy: busy,
mx_MiniAvatarUploader_hasAvatar: hasAvatar,
})}
disabled={busy}
onClick={() => {
uploadRef.current?.click();
}}
>
{children}
<AccessibleButton
className={classNames("mx_MiniAvatarUploader", {
mx_MiniAvatarUploader_busy: busy,
mx_MiniAvatarUploader_hasAvatar: hasAvatar,
})}
disabled={busy}
onClick={() => {
uploadRef.current?.click();
}}
aria-label={label}
>
{children}
<div className="mx_MiniAvatarUploader_indicator">
{busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
</div>
</AccessibleButton>
</Tooltip>
<div className="mx_MiniAvatarUploader_indicator">
{busy ? <Spinner w={20} h={20} /> : <div className="mx_MiniAvatarUploader_cameraIcon" />}
</div>
</AccessibleButton>
</React.Fragment>
);
};

4
test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx
View File

@@ -26,12 +26,12 @@ describe("<MiniAvatarUploader />", () => {
const setAvatarUrl = jest.fn();
const user = userEvent.setup();
const { container, findByText } = render(
const { container, findByLabelText } = render(
<MiniAvatarUploader hasAvatar={false} noAvatarLabel="Upload" setAvatarUrl={setAvatarUrl} isUserAvatar />,
withClientContextRenderOptions(cli),
);
await findByText("Upload");
await findByLabelText("Upload");
await user.upload(container.querySelector("input")!, AVATAR_FILE);
expect(cli.uploadContent).toHaveBeenCalledWith(AVATAR_FILE);