mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Improve readability of unread indicator

Browse source
This commit is contained in:
Evan Hahn 2021-10-26 14:14:40 -05:00 • committed by GitHub
parent d92911f475
commit 0f635af8a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

23
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -175,7 +175,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
</div>
)}
{messageStatusIcon}
{isUnread && <UnreadCount count={unreadCount} />}
{isUnread && <UnreadIndicator count={unreadCount} />}
</div>
) : null}
</div>
@ -233,14 +233,23 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
}
);
function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
function UnreadIndicator({ count = 0 }: Readonly<{ count?: number }>) {
let classModifier: undefined | string;
if (count > 99) {
classModifier = 'many';
} else if (count > 9) {
classModifier = 'two-digits';
} else if (count === 0) {
classModifier = 'marked-unread';
}
return (
<div
className={classNames(`${BASE_CLASS_NAME}__unread-count`, {
[`${BASE_CLASS_NAME}__unread-count--multiple-digits`]:
count > 9 && count <= 99,
[`${BASE_CLASS_NAME}__unread-count--many`]: count > 99,
})}
className={classNames(
`${BASE_CLASS_NAME}__unread-indicator`,
classModifier &&
`${BASE_CLASS_NAME}__unread-indicator--${classModifier}`
)}
>
{Boolean(count) && Math.min(count, 99)}
</div>