Update to new design for avatars: individual/group icons/colors
And two initials.
This commit is contained in:
parent
cf16ced91c
commit
8f3e3b7aaf
21 changed files with 1210 additions and 1017 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue