Merge pull request #1341 from Bilb/avatar-always-show-two-members
Audric Ackermann
5 years ago
committed by
GitHub
commit
ffab04c7f4
Binary file not shown.
|
Before Width: | Height: | Size: 555 B |
@ -1,94 +1,60 @@
|
||||
import React from 'react';
|
||||
import { Avatar } from '../Avatar';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { ConversationAttributes } from '../../../js/models/conversations';
|
||||
import { ConversationAvatar } from '../session/usingClosedConversationDetails';
|
||||
|
||||
interface Props {
|
||||
size: number;
|
||||
conversations: Array<ConversationAttributes>;
|
||||
memberAvatars: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
||||
i18n: LocalizerType;
|
||||
}
|
||||
|
||||
export class ClosedGroupAvatar extends React.PureComponent<Props> {
|
||||
public getClosedGroupAvatarsSize(size: number) {
|
||||
// Always use the size directly under the one requested
|
||||
switch (size) {
|
||||
case 36:
|
||||
return 28;
|
||||
case 48:
|
||||
return 36;
|
||||
case 64:
|
||||
return 48;
|
||||
case 80:
|
||||
return 64;
|
||||
case 300:
|
||||
return 80;
|
||||
default:
|
||||
throw new Error(
|
||||
`Invalid size request for closed group avatar: ${size}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { conversations, size, i18n } = this.props;
|
||||
const { memberAvatars, size } = this.props;
|
||||
const avatarsDiameter = this.getClosedGroupAvatarsSize(size);
|
||||
|
||||
const conv1 = memberAvatars.length > 0 ? memberAvatars[0] : undefined;
|
||||
const conv2 = memberAvatars.length > 1 ? memberAvatars[1] : undefined;
|
||||
const name1 = conv1?.name || conv1?.id || undefined;
|
||||
const name2 = conv2?.name || conv2?.id || undefined;
|
||||
|
||||
if (conversations.length === 1) {
|
||||
const conv = conversations[0];
|
||||
return (
|
||||
// use the 2 first members as group avatars
|
||||
return (
|
||||
<div className="module-avatar__icon-closed">
|
||||
<Avatar
|
||||
avatarPath={conv.avatarPath}
|
||||
noteToSelf={conv.isMe}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
phoneNumber={conv.id}
|
||||
profileName={conv.name}
|
||||
size={size}
|
||||
isPublic={false}
|
||||
avatarPath={conv1?.avatarPath}
|
||||
name={name1}
|
||||
size={avatarsDiameter}
|
||||
pubkey={conv1?.id}
|
||||
/>
|
||||
);
|
||||
} else if (conversations.length > 1) {
|
||||
// in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size
|
||||
// Always use the size directly under the one requested
|
||||
let avatarsDiameter = 0;
|
||||
switch (size) {
|
||||
case 36: {
|
||||
avatarsDiameter = 28;
|
||||
break;
|
||||
}
|
||||
case 48: {
|
||||
avatarsDiameter = 36;
|
||||
break;
|
||||
}
|
||||
case 64: {
|
||||
avatarsDiameter = 48;
|
||||
break;
|
||||
}
|
||||
case 80: {
|
||||
avatarsDiameter = 64;
|
||||
break;
|
||||
}
|
||||
case 300: {
|
||||
avatarsDiameter = 80;
|
||||
break;
|
||||
}
|
||||
default:
|
||||
throw new Error(
|
||||
`Invalid size request for closed group avatar: ${size}`
|
||||
);
|
||||
}
|
||||
const conv1 = conversations[0];
|
||||
const conv2 = conversations[1];
|
||||
// use the 2 first members as group avatars
|
||||
return (
|
||||
<div className="module-avatar__icon-closed">
|
||||
<Avatar
|
||||
avatarPath={conv1.avatarPath}
|
||||
noteToSelf={conv1.isMe}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
phoneNumber={conv1.id}
|
||||
profileName={conv1.name}
|
||||
size={avatarsDiameter}
|
||||
isPublic={false}
|
||||
/>
|
||||
<Avatar
|
||||
avatarPath={conv2.avatarPath}
|
||||
noteToSelf={conv2.isMe}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
name={name}
|
||||
phoneNumber={conv2.id}
|
||||
profileName={conv2.name}
|
||||
size={avatarsDiameter}
|
||||
isPublic={false}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <></>;
|
||||
}
|
||||
<Avatar
|
||||
avatarPath={conv2?.avatarPath}
|
||||
name={name2}
|
||||
size={avatarsDiameter}
|
||||
pubkey={conv2?.id}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue