Update to new design for avatars: individual/group icons/colors

And two initials.
This commit is contained in:
Scott Nonnenberg 2018-09-26 17:23:17 -07:00
parent cf16ced91c
commit 8f3e3b7aaf
21 changed files with 1210 additions and 1017 deletions

View file

@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import { Avatar } from './Avatar';
import { Emojify } from './conversation/Emojify';
import { Localizer } from '../types/Util';
@ -17,35 +18,28 @@ interface Props {
onClick?: () => void;
}
function getInitial(name: string): string {
return name.trim()[0] || '#';
}
export class ContactListItem extends React.Component<Props> {
public renderAvatar({ displayName }: { displayName: string }) {
const { avatarPath, i18n, color, name } = this.props;
if (avatarPath) {
return (
<div className="module-contact-list-item__avatar">
<img alt={i18n('contactAvatarAlt', [displayName])} src={avatarPath} />
</div>
);
}
const title = name ? getInitial(name) : '#';
public renderAvatar() {
const {
avatarPath,
i18n,
color,
name,
phoneNumber,
profileName,
} = this.props;
return (
<div
className={classNames(
'module-contact-list-item__avatar-default',
`module-contact-list-item__avatar-default--${color}`
)}
>
<div className="module-contact-list-item__avatar-default__label">
{title}
</div>
</div>
<Avatar
avatarPath={avatarPath}
color={color}
conversationType="direct"
i18n={i18n}
name={name}
phoneNumber={phoneNumber}
profileName={profileName}
size={48}
/>
);
}
@ -82,7 +76,7 @@ export class ContactListItem extends React.Component<Props> {
onClick ? 'module-contact-list-item--with-click-handler' : null
)}
>
{this.renderAvatar({ displayName })}
{this.renderAvatar()}
<div className="module-contact-list-item__text">
<div className="module-contact-list-item__text__name">
<Emojify text={displayName} i18n={i18n} /> {profileElement}