OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use tooltip compound in `ReadReceiptGroup` component

pull/28217/head
Florian Duros 2024-05-21 18:17:31 +02:00
parent 7d3b3d7f95
commit dbe00e5889
No known key found for this signature in database
GPG Key ID: A5BBB4041B493F15
1 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/views/rooms/ReadReceiptGroup.tsx
View File

@ -16,6 +16,7 @@ limitations under the License.
import React, { PropsWithChildren } from "react"; import React, { PropsWithChildren } from "react";
import { User } from "matrix-js-sdk/src/matrix"; import { User } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker"; import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
import { IReadReceiptProps } from "./EventTile"; import { IReadReceiptProps } from "./EventTile";
@ -87,18 +88,6 @@ export function ReadReceiptGroup({
const tooltipMembers: string[] = readReceipts.map((it) => it.roomMember?.name ?? it.userId); const tooltipMembers: string[] = readReceipts.map((it) => it.roomMember?.name ?? it.userId);
const tooltipText = readReceiptTooltip(tooltipMembers, maxAvatars); const tooltipText = readReceiptTooltip(tooltipMembers, maxAvatars);
const [{ showTooltip, hideTooltip }, tooltip] = useTooltip({
label: (
<>
<div className="mx_Tooltip_title">
{_t("timeline|read_receipt_title", { count: readReceipts.length })}
</div>
<div className="mx_Tooltip_sub">{tooltipText}</div>
</>
),
alignment: Alignment.TopRight,
});
// return early if there are no read receipts // return early if there are no read receipts
if (readReceipts.length === 0) { if (readReceipts.length === 0) {
// We currently must include `mx_ReadReceiptGroup_container` in // We currently must include `mx_ReadReceiptGroup_container` in
@ -185,6 +174,11 @@ export function ReadReceiptGroup({
return ( return (
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
<Tooltip
label={_t("timeline|read_receipt_title", { count: readReceipts.length })}
caption={tooltipText}
placement="top-end"
>
<div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}> <div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}>
<AccessibleButton <AccessibleButton
className="mx_ReadReceiptGroup_button" className="mx_ReadReceiptGroup_button"
@ -192,10 +186,6 @@ export function ReadReceiptGroup({
aria-label={tooltipText} aria-label={tooltipText}
aria-haspopup="true" aria-haspopup="true"
onClick={openMenu} onClick={openMenu}
onMouseOver={showTooltip}
onMouseLeave={hideTooltip}
onFocus={showTooltip}
onBlur={hideTooltip}
> >
{remText} {remText}
<span <span
@ -210,9 +200,9 @@ export function ReadReceiptGroup({
{avatars} {avatars}
</span> </span>
</AccessibleButton> </AccessibleButton>
{tooltip}
{contextMenu} {contextMenu}
</div> </div>
</Tooltip>
</div> </div>
); );
} }