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

Read Receipts: never show +1, if it’s just 4, show all of them #8428

Merged
merged 2 commits into from
Apr 27, 2022
Merged

Read Receipts: never show +1, if it’s just 4, show all of them #8428

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9a2ecf
read receipts: never show +1, if it’s just 4, show all of them
justjanne Apr 27, 2022
986bc6f
read receipts: improve type signature for determineAvatarPosition
justjanne Apr 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions src/components/views/rooms/ReadReceiptGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import { useTooltip } from "../../../utils/useTooltip";
import { _t } from "../../../languageHandler";
import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";

const MAX_READ_AVATARS = 3;
const MAX_READ_AVATARS = 4;
const MAX_READ_AVATARS_PLUS_N = MAX_READ_AVATARS - 1;
const READ_AVATAR_OFFSET = 10;
export const READ_AVATAR_SIZE = 16;

Expand All @@ -44,8 +45,8 @@ interface Props {
}

// Design specified that we should show the three latest read receipts
function determineAvatarPosition(index, count): [boolean, number] {
const firstVisible = Math.max(0, count - MAX_READ_AVATARS);
function determineAvatarPosition(index, count, max): [boolean, number] {
justjanne marked this conversation as resolved.
Show resolved Hide resolved
const firstVisible = Math.max(0, count - max);

if (index >= firstVisible) {
return [false, index - firstVisible];
Expand Down Expand Up @@ -83,8 +84,13 @@ export function ReadReceiptGroup(
);
}

// If we are above MAX_READ_AVATARS, we’ll have to remove a few to have space for the +n count.
const maxAvatars = readReceipts.length > MAX_READ_AVATARS
? MAX_READ_AVATARS_PLUS_N
: MAX_READ_AVATARS;

const avatars = readReceipts.map((receipt, index) => {
const [hidden, position] = determineAvatarPosition(index, readReceipts.length);
const [hidden, position] = determineAvatarPosition(index, readReceipts.length, maxAvatars);

const userId = receipt.userId;
let readReceiptInfo: IReadReceiptInfo;
Expand Down Expand Up @@ -114,7 +120,7 @@ export function ReadReceiptGroup(
});

let remText: JSX.Element;
const remainder = readReceipts.length - MAX_READ_AVATARS;
const remainder = readReceipts.length - maxAvatars;
t3chguy marked this conversation as resolved.
Show resolved Hide resolved
if (remainder > 0) {
remText = (
<span className="mx_ReadReceiptGroup_remainder" aria-live="off">
Expand Down Expand Up @@ -163,7 +169,7 @@ export function ReadReceiptGroup(
<span
className="mx_ReadReceiptGroup_container"
style={{
width: Math.min(MAX_READ_AVATARS, readReceipts.length) * READ_AVATAR_OFFSET +
width: Math.min(maxAvatars, readReceipts.length) * READ_AVATAR_OFFSET +
READ_AVATAR_SIZE - READ_AVATAR_OFFSET,
}}
>
Expand Down