jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More chat list unread count tweaks

This commit is contained in:
Evan Hahn 2021-10-19 08:53:30 -05:00 committed by GitHub
parent 75248d8e2f
commit 755b549271
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
stylesheets/_modules.scss
View File

@ -5832,7 +5832,12 @@ button.module-image__border-overlay:focus {
background-color: $color-ultramarine-light;
}
&--big {
&--multiple-digits {
padding-left: 4px;
padding-right: 4px;
}
&--many {
font-size: 9px;
padding-right: 2px;

2
ts/components/ConversationList.stories.tsx
View File

@ -327,7 +327,7 @@ story.add('Contact checkboxes: disabled', () => (
story.add('Conversations: unread count', () => (
<ConversationList
{...createProps(
[4, 10, 250].map(unreadCount => ({
[4, 10, 34, 250].map(unreadCount => ({
type: RowType.Conversation,
conversation: createConversation({
lastMessage: {

9
ts/components/conversationList/BaseConversationListItem.tsx
View File

@ -234,10 +234,11 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
return (
<div
className={classNames(
`${BASE_CLASS_NAME}__unread-count`,
count > 99 && `${BASE_CLASS_NAME}__unread-count--big`
)}
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,
})}
>
{Boolean(count) && Math.min(count, 99)}
</div>