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

@ -6,6 +6,7 @@ import {
isVideoTypeSupported,
} from '../../util/GoogleChrome';
import { Avatar } from '../Avatar';
import { MessageBody } from './MessageBody';
import { ExpireTimer, getIncrement } from './ExpireTimer';
import { Timestamp } from './Timestamp';
@ -133,10 +134,6 @@ function canDisplayImage(attachment?: Attachment) {
return height > 0 && height <= 4096 && width > 0 && width <= 4096;
}
function getInitial(name: string): string {
return name.trim()[0] || '#';
}
function getExtension({
fileName,
contentType,
@ -633,21 +630,17 @@ export class Message extends React.Component<Props, State> {
public renderAvatar() {
const {
authorAvatarPath,
authorName,
authorPhoneNumber,
authorProfileName,
authorAvatarPath,
conversationColor,
collapseMetadata,
conversationColor,
conversationType,
direction,
i18n,
} = this.props;
const title = `${authorName || authorPhoneNumber}${
!authorName && authorProfileName ? ` ~${authorProfileName}` : ''
}`;
if (
collapseMetadata ||
conversationType !== 'group' ||
@ -656,26 +649,18 @@ export class Message extends React.Component<Props, State> {
return;
}
if (!authorAvatarPath) {
const label = authorName ? getInitial(authorName) : '#';
return (
<div
className={classNames(
'module-message__author-default-avatar',
`module-message__author-default-avatar--${conversationColor}`
)}
>
<div className="module-message__author-default-avatar__label">
{label}
</div>
</div>
);
}
return (
<div className="module-message__author-avatar">
<img alt={i18n('contactAvatarAlt', [title])} src={authorAvatarPath} />
<Avatar
avatarPath={authorAvatarPath}
color={conversationColor}
conversationType="direct"
i18n={i18n}
name={authorName}
phoneNumber={authorPhoneNumber}
profileName={authorProfileName}
size={36}
/>
</div>
);
}