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

More chat list unread count tweaks

Browse source
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; background-color: $color-ultramarine-light;
} }
&--big { &--multiple-digits {
padding-left: 4px;
padding-right: 4px;
}
&--many {
font-size: 9px; font-size: 9px;
padding-right: 2px; 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', () => ( story.add('Conversations: unread count', () => (
<ConversationList <ConversationList
{...createProps( {...createProps(
[4, 10, 250].map(unreadCount => ({ [4, 10, 34, 250].map(unreadCount => ({
type: RowType.Conversation, type: RowType.Conversation,
conversation: createConversation({ conversation: createConversation({
lastMessage: { 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 }>) { function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
return ( return (
<div <div
className={classNames( className={classNames(`${BASE_CLASS_NAME}__unread-count`, {
`${BASE_CLASS_NAME}__unread-count`, [`${BASE_CLASS_NAME}__unread-count--multiple-digits`]:
count > 99 && `${BASE_CLASS_NAME}__unread-count--big` count > 9 && count <= 99,
)} [`${BASE_CLASS_NAME}__unread-count--many`]: count > 99,
})}
> >
{Boolean(count) && Math.min(count, 99)} {Boolean(count) && Math.min(count, 99)}
</div> </div>