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

68
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,34 +174,35 @@ export function ReadReceiptGroup({
return ( return (
<div className="mx_EventTile_msgOption"> <div className="mx_EventTile_msgOption">
<div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}> <Tooltip
<AccessibleButton label={_t("timeline|read_receipt_title", { count: readReceipts.length })}
className="mx_ReadReceiptGroup_button" caption={tooltipText}
ref={button} placement="top-end"
aria-label={tooltipText} >
aria-haspopup="true" <div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}>
onClick={openMenu} <AccessibleButton
onMouseOver={showTooltip} className="mx_ReadReceiptGroup_button"
onMouseLeave={hideTooltip} ref={button}
onFocus={showTooltip} aria-label={tooltipText}
onBlur={hideTooltip} aria-haspopup="true"
> onClick={openMenu}
{remText}
<span
className="mx_ReadReceiptGroup_container"
style={{
width:
Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
READ_AVATAR_SIZE -
READ_AVATAR_OFFSET,
}}
> >
{avatars} {remText}
</span> <span
</AccessibleButton> className="mx_ReadReceiptGroup_container"
{tooltip} style={{
{contextMenu} width:
</div> Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
READ_AVATAR_SIZE -
READ_AVATAR_OFFSET,
}}
>
{avatars}
</span>
</AccessibleButton>
{contextMenu}
</div>
</Tooltip>
</div> </div>
); );
} }