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

Use new compound tooltip

Browse source
This commit is contained in:
Florian Duros 2024-04-12 14:56:23 +02:00
parent aadb46358b
commit 5354e6efea
No known key found for this signature in database
GPG key ID: A5BBB4041B493F15
49 changed files with 127 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/views/avatars/DecoratedRoomAvatar.tsx
View file

@ -218,7 +218,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
viewAvatarOnClick={this.props.viewAvatarOnClick}
/>
{icon && (
<Tooltip label={tooltipText(this.state.icon)!} side="bottom">
<Tooltip label={tooltipText(this.state.icon)!} placement="bottom">
{icon}
</Tooltip>
)}

2
src/components/views/elements/InfoTooltip.tsx
View file

@ -43,7 +43,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
// Tooltip are forced on the right for a more natural feel to them on info icons
return (
<Tooltip label={tooltip || title} side="right">
<Tooltip label={tooltip || title} placement="right">
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{children}

9
src/components/views/elements/PersistedElement.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { MutableRefObject, ReactNode } from "react";
import ReactDOM from "react-dom";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
import dis from "../../../dispatcher/dispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
@ -177,11 +176,9 @@ export default class PersistedElement extends React.Component<IProps> {
private renderApp(): void {
const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<TooltipProvider>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
</TooltipProvider>
<div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>
</MatrixClientContext.Provider>
);

2
src/components/views/elements/Pill.tsx
View file

@ -151,7 +151,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
<Tooltip
label={resourceId ?? ""}
open={resourceId ? undefined : false}
side="right"
placement="right"
isTriggerInteractive={isAnchor}
>
{isAnchor ? (

2
src/components/views/elements/TextWithTooltip.tsx
View file

@ -33,7 +33,7 @@ export default class TextWithTooltip extends React.Component<IProps> {
const { className, children, tooltip, tooltipProps } = this.props;
return (
<Tooltip label={tooltip} side="right">
<Tooltip label={tooltip} placement="right">
<span className={className} tabIndex={tooltipProps?.tabIndex ?? 0}>
{children}
</span>

3
src/components/views/messages/MStickerBody.tsx
View file

@ -69,8 +69,7 @@ export default class MStickerBody extends MImageBody {
if (!content?.body || !content.info?.w) return null;
return {
align: "center",
side: "right",
placement: "right",
label: content.body,
};
}

7
src/components/views/messages/TextualBody.tsx
View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import * as HtmlUtils from "../../../HtmlUtils";
import { formatDate } from "../../../DateUtils";
@ -349,11 +348,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = (
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);
const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
ReactDOM.render(spoiler, spoilerContainer);
node.parentNode?.replaceChild(spoilerContainer, node);

2
src/components/views/polls/pollHistory/PollListItem.tsx
View file

@ -36,7 +36,7 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
const formattedDate = formatLocalDateShort(event.getTs());
return (
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
<Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
<div className="mx_PollListItem_content">
<span>{formattedDate}</span>
<PollIcon className="mx_PollListItem_icon" />

2
src/components/views/polls/pollHistory/PollListItemEnded.tsx
View file

@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
return (
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
<Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
<div className="mx_PollListItemEnded_content">
<div className="mx_PollListItemEnded_title">
<PollIcon className="mx_PollListItemEnded_icon" />

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

@ -405,7 +405,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
align="center"
justify="space-between"
>
<Tooltip label={_t("action|search")} side="right">
<Tooltip label={_t("action|search")} placement="right">
<button
className="mx_RoomSummaryCard_searchBtn"
data-testid="summary-search"

6
src/components/views/rooms/E2EIcon.tsx
View file

@ -48,7 +48,7 @@ interface Props {
size?: number;
onClick?: () => void;
hideTooltip?: boolean;
tooltipSide?: ComponentProps<typeof Tooltip>["side"];
tooltipPlacement?: ComponentProps<typeof Tooltip>["placement"];
bordered?: boolean;
}
@ -69,7 +69,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
size,
onClick,
hideTooltip,
tooltipSide,
tooltipPlacement,
bordered,
}) => {
const classes = classNames(
@ -109,7 +109,7 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
}
return (
<Tooltip label={label} side={tooltipSide} isTriggerInteractive={!!onClick}>
<Tooltip label={label} placement={tooltipPlacement} isTriggerInteractive={!!onClick}>
{content}
</Tooltip>
);

2
src/components/views/rooms/EventTile.tsx
View file

@ -1546,7 +1546,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
return (
<div className="mx_EventTile_msgOption">
<div className="mx_ReadReceiptGroup">
<Tooltip label={label} side="top" align="end">
<Tooltip label={label} placement="top-end">
<div className="mx_ReadReceiptGroup_button">
<span className="mx_ReadReceiptGroup_container">
<span className={receiptClasses}>{nonCssBadge}</span>

2
src/components/views/rooms/LegacyRoomHeader.tsx
View file

@ -784,7 +784,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
const icon = this.props.viewingCall ? (
<div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" />
) : this.props.e2eStatus ? (
<E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipSide="bottom" />
<E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipPlacement="bottom" />
) : // If we're expecting an E2EE status to come in, but it hasn't
// yet been loaded, insert a blank div to reserve space
this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? (

2
src/components/views/rooms/NotificationBadge.tsx
View file

@ -121,7 +121,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
return (
<Tooltip label={_t("notifications|message_didnt_send")} side="right">
<Tooltip label={_t("notifications|message_didnt_send")} placement="right">
{badge}
</Tooltip>
);

6
src/components/views/rooms/RoomHeader.tsx
View file

@ -252,7 +252,7 @@ export default function RoomHeader({
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} side="right">
<Tooltip label={_t("common|public_room")} placement="right">
<PublicIcon
width="16px"
height="16px"
@ -263,7 +263,7 @@ export default function RoomHeader({
)}
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} side="right">
<Tooltip label={_t("common|verified")} placement="right">
<VerifiedIcon
width="16px"
height="16px"
@ -274,7 +274,7 @@ export default function RoomHeader({
)}
{isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} side="right">
<Tooltip label={_t("room|header_untrusted_label")} placement="right">
<ErrorIcon
width="16px"
height="16px"

2
src/components/views/settings/devices/FilteredDeviceListHeader.tsx
View file

@ -40,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
return (
<div className="mx_FilteredDeviceListHeader" {...rest}>
{!isSelectDisabled && (
<Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
<Tooltip label={checkboxLabel} placement="top" isTriggerInteractive={false}>
<StyledCheckbox
kind={CheckboxStyle.Solid}
checked={isAllSelected}

2
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View file

@ -45,7 +45,7 @@ export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, Threads
const openTooltip = displayLabel ? false : undefined;
return (
<Tooltip label={_t("common|threads")} side="right" open={openTooltip}>
<Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
<IconButton
aria-label={_t("common|threads")}
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}