More chat list unread count tweaks
This commit is contained in:
parent
75248d8e2f
commit
755b549271
3 changed files with 12 additions and 6 deletions
|
@ -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;
|
||||
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue