Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Migrate TooltipTarget usage to compound Tooltip (#12542)
Browse files Browse the repository at this point in the history 
* Use new tooltip in `RoomTopic.tsx`

* Use new tooltip in `MLocationBody.tsx`

* Fix room topic

* Update location snapshot

* Use new tooltip in `AppPermission.tsx`

* Remove `TooltipTarget`

* Add tests for `RoomTopic`
  • Loading branch information
@florianduros
florianduros authored May 22, 2024
1 parent a29cabe commit 1190de9
Show file tree
Hide file tree
Showing 12 changed files with 90 additions and 383 deletions.
Binary file modified ...snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 0 additions & 21 deletions res/css/components/views/elements/_AppPermission.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,24 +44,3 @@ limitations under the License.
}
}
}

.mx_Tooltip.mx_Tooltip--appPermission {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;

&.mx_Tooltip--appPermission--dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}

ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}
44 changes: 20 additions & 24 deletions src/components/views/elements/AppPermission.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ limitations under the License.

import React from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";

import { _t } from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig";
Expand All @@ -29,7 +30,6 @@ import Heading from "../typography/Heading";
import AccessibleButton from "./AccessibleButton";
import { parseUrl } from "../../../utils/UrlUtils";
import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";
import TooltipTarget from "./TooltipTarget";

interface IProps {
url: string;
Expand Down Expand Up @@ -99,31 +99,27 @@ export default class AppPermission extends React.Component<IProps, IState> {
<BaseAvatar name={this.props.creatorUserId} size="38px" />
);

const warningTooltipText = (
<div>
{_t("analytics|shared_data_heading")}
<ul>
<li>{_t("widget|shared_data_name")}</li>
<li>{_t("widget|shared_data_avatar")}</li>
<li>{_t("widget|shared_data_mxid")}</li>
<li>{_t("widget|shared_data_device_id")}</li>
<li>{_t("widget|shared_data_theme")}</li>
<li>{_t("widget|shared_data_lang")}</li>
<li>{_t("widget|shared_data_url", { brand })}</li>
<li>{_t("widget|shared_data_room_id")}</li>
<li>{_t("widget|shared_data_widget_id")}</li>
</ul>
</div>
);
const warningTooltip = (
<TooltipTarget
label={warningTooltipText}
tooltipClassName="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
tooltipTargetClassName="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
className="mx_TextWithTooltip_tooltip"
<Tooltip
label={_t("analytics|shared_data_heading")}
caption={
<ul>
<li>{_t("widget|shared_data_name")}</li>
<li>{_t("widget|shared_data_avatar")}</li>
<li>{_t("widget|shared_data_mxid")}</li>
<li>{_t("widget|shared_data_device_id")}</li>
<li>{_t("widget|shared_data_theme")}</li>
<li>{_t("widget|shared_data_lang")}</li>
<li>{_t("widget|shared_data_url", { brand })}</li>
<li>{_t("widget|shared_data_room_id")}</li>
<li>{_t("widget|shared_data_widget_id")}</li>
</ul>
}
>
<HelpIcon className="mx_Icon mx_Icon_12" />
</TooltipTarget>
<div className="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon">
<HelpIcon className="mx_Icon mx_Icon_12" />
</div>
</Tooltip>
);

// Due to i18n limitations, we can't dedupe the code for variables in these two messages.
Expand Down
45 changes: 25 additions & 20 deletions src/components/views/elements/RoomTopic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { useCallback, useContext, useRef } from "react";
import React, { useCallback, useContext, useState } from "react";
import { Room, EventType } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { Tooltip } from "@vector-im/compound-web";

import { useTopic } from "../../../hooks/room/useTopic";
import { Alignment } from "./Tooltip";
import { _t } from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
Expand All @@ -28,7 +28,6 @@ import InfoDialog from "../dialogs/InfoDialog";
import { useDispatcher } from "../../../hooks/useDispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AccessibleButton from "./AccessibleButton";
import TooltipTarget from "./TooltipTarget";
import { Linkify, topicToHtml } from "../../../HtmlUtils";
import { tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";

Expand All @@ -49,10 +48,10 @@ export function onRoomTopicLinkClick(e: React.MouseEvent): void {

export default function RoomTopic({ room, className, ...props }: IProps): JSX.Element {
const client = useContext(MatrixClientContext);
const ref = useRef<HTMLDivElement>(null);
const [disableTooltip, setDisableTooltip] = useState(false);

const topic = useTopic(room);
const body = topicToHtml(topic?.text, topic?.html, ref);
const body = topicToHtml(topic?.text, topic?.html);

const onClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
Expand All @@ -70,14 +69,14 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
[props],
);

const ignoreHover = (ev: React.MouseEvent): boolean => {
return (ev.target as HTMLElement).tagName.toUpperCase() === "A";
const onHover = (ev: React.MouseEvent | React.FocusEvent): void => {
setDisableTooltip((ev.target as HTMLElement).tagName.toUpperCase() === "A");
};

useDispatcher(dis, (payload) => {
if (payload.action === Action.ShowRoomTopic) {
const canSetTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, client.getSafeUserId());
const body = topicToHtml(topic?.text, topic?.html, ref, true);
const body = topicToHtml(topic?.text, topic?.html, undefined, true);

const modal = Modal.createDialog(InfoDialog, {
title: room.name,
Expand Down Expand Up @@ -115,18 +114,24 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
}
});

// Do not render the tooltip if the topic is empty
// We still need to have a div for the header buttons to be displayed correctly
if (!body) return <div className={classNames(className, "mx_RoomTopic")} />;

return (
<TooltipTarget
{...props}
ref={ref}
onClick={onClick}
dir="auto"
tooltipTargetClassName={classNames(className, "mx_RoomTopic")}
label={_t("room|read_topic")}
alignment={Alignment.Bottom}
ignoreHover={ignoreHover}
>
<Linkify>{body}</Linkify>
</TooltipTarget>
<Tooltip label={_t("room|read_topic")} disabled={disableTooltip}>
<div
{...props}
tabIndex={0}
role="button"
onClick={onClick}
className={classNames(className, "mx_RoomTopic")}
onMouseOver={onHover}
onFocus={onHover}
aria-label={_t("room|read_topic")}
>
<Linkify>{body}</Linkify>
</div>
</Tooltip>
);
}
92 changes: 0 additions & 92 deletions src/components/views/elements/TooltipTarget.tsx
View file

This file was deleted.

15 changes: 5 additions & 10 deletions src/components/views/messages/MLocationBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { MatrixEvent, ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Tooltip } from "@vector-im/compound-web";

import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
Expand All @@ -27,8 +28,6 @@ import {
isSelfLocation,
} from "../../../utils/location";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import TooltipTarget from "../elements/TooltipTarget";
import { Alignment } from "../elements/Tooltip";
import { SmartMarker, Map, LocationViewDialog } from "../location";
import { IBodyProps } from "./IBodyProps";
import { createReconnectedListener } from "../../../utils/connection";
Expand Down Expand Up @@ -126,7 +125,7 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent; error:
interface LocationBodyContentProps {
mxEvent: MatrixEvent;
mapId: string;
tooltip?: string;
tooltip: string;
onError: (error: Error) => void;
onClick?: () => void;
}
Expand Down Expand Up @@ -156,13 +155,9 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({

return (
<div className="mx_MLocationBody">
{tooltip ? (
<TooltipTarget label={tooltip} alignment={Alignment.InnerBottom} maxParentWidth={450}>
{mapElement}
</TooltipTarget>
) : (
mapElement
)}
<Tooltip label={tooltip}>
<div className="mx_MLocationBody_map">{mapElement}</div>
</Tooltip>
</div>
);
};
12 changes: 0 additions & 12 deletions test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
Expand Down Expand Up @@ -121,10 +118,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
Expand Down Expand Up @@ -284,10 +278,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
Expand Down Expand Up @@ -531,10 +522,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
Expand Down
Loading

0 comments on commit 1190de9

Please sign in to comment.