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 { User } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
import { IReadReceiptProps } from "./EventTile";
@ -87,18 +88,6 @@ export function ReadReceiptGroup({
const tooltipMembers: string[] = readReceipts.map((it) => it.roomMember?.name ?? it.userId);
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
if (readReceipts.length === 0) {
// We currently must include `mx_ReadReceiptGroup_container` in
@ -185,34 +174,35 @@ export function ReadReceiptGroup({
return (
<div className="mx_EventTile_msgOption">
<div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}>
<AccessibleButton
className="mx_ReadReceiptGroup_button"
ref={button}
aria-label={tooltipText}
aria-haspopup="true"
onClick={openMenu}
onMouseOver={showTooltip}
onMouseLeave={hideTooltip}
onFocus={showTooltip}
onBlur={hideTooltip}
>
{remText}
<span
className="mx_ReadReceiptGroup_container"
style={{
width:
Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
READ_AVATAR_SIZE -
READ_AVATAR_OFFSET,
}}
<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")}>
<AccessibleButton
className="mx_ReadReceiptGroup_button"
ref={button}
aria-label={tooltipText}
aria-haspopup="true"
onClick={openMenu}
>
{avatars}
</span>
</AccessibleButton>
{tooltip}
{contextMenu}
</div>
{remText}
<span
className="mx_ReadReceiptGroup_container"
style={{
width:
Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
READ_AVATAR_SIZE -
READ_AVATAR_OFFSET,
}}
>
{avatars}
</span>
</AccessibleButton>
{contextMenu}
</div>
</Tooltip>
</div>
);
}