Unread badge is now attached to avatar in left pane

This commit is contained in:
Scott Nonnenberg 2018-09-26 15:55:13 -07:00
parent 10c53bddb0
commit cf16ced91c
3 changed files with 62 additions and 45 deletions

View file

@ -45,14 +45,17 @@ export class ConversationListItem extends React.Component<Props> {
const initial = getInitial(name || '');
return (
<div
className={classNames(
'module-conversation-list-item__avatar',
'module-conversation-list-item__default-avatar',
`module-conversation-list-item__default-avatar--${color}`
)}
>
{initial}
<div className="module-conversation-list-item__avatar-container">
<div
className={classNames(
'module-conversation-list-item__avatar',
'module-conversation-list-item__default-avatar',
`module-conversation-list-item__default-avatar--${color}`
)}
>
{initial}
</div>
{this.renderUnread()}
</div>
);
}
@ -62,14 +65,31 @@ export class ConversationListItem extends React.Component<Props> {
}`;
return (
<img
className="module-conversation-list-item__avatar"
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
<div className="module-conversation-list-item__avatar-container">
<img
className="module-conversation-list-item__avatar"
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
{this.renderUnread()}
</div>
);
}
public renderUnread() {
const { unreadCount } = this.props;
if (unreadCount > 0) {
return (
<div className="module-conversation-list-item__unread-count">
{unreadCount}
</div>
);
}
return null;
}
public renderHeader() {
const {
unreadCount,
@ -116,20 +136,6 @@ export class ConversationListItem extends React.Component<Props> {
);
}
public renderUnread() {
const { unreadCount } = this.props;
if (unreadCount > 0) {
return (
<div className="module-conversation-list-item__unread-count">
{unreadCount}
</div>
);
}
return null;
}
public renderMessage() {
const { lastMessage, unreadCount, i18n } = this.props;
@ -164,7 +170,6 @@ export class ConversationListItem extends React.Component<Props> {
)}
/>
) : null}
{this.renderUnread()}
</div>
);
}