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 React from 'react';
|
||||||
import { Avatar } from '../Avatar';
|
import { Avatar } from '../Avatar';
|
||||||
import { LocalizerType } from '../../types/Util';
|
import { LocalizerType } from '../../types/Util';
|
||||||
import { ConversationAttributes } from '../../../js/models/conversations';
|
import { ConversationAvatar } from '../session/usingClosedConversationDetails';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
size: number;
|
size: number;
|
||||||
conversations: Array<ConversationAttributes>;
|
memberAvatars: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
|
||||||
i18n: LocalizerType;
|
i18n: LocalizerType;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class ClosedGroupAvatar extends React.PureComponent<Props> {
|
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() {
|
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) {
|
// use the 2 first members as group avatars
|
||||||
const conv = conversations[0];
|
return (
|
||||||
return (
|
<div className="module-avatar__icon-closed">
|
||||||
<Avatar
|
<Avatar
|
||||||
avatarPath={conv.avatarPath}
|
avatarPath={conv1?.avatarPath}
|
||||||
noteToSelf={conv.isMe}
|
name={name1}
|
||||||
conversationType="direct"
|
size={avatarsDiameter}
|
||||||
i18n={i18n}
|
pubkey={conv1?.id}
|
||||||
name={name}
|
|
||||||
phoneNumber={conv.id}
|
|
||||||
profileName={conv.name}
|
|
||||||
size={size}
|
|
||||||
isPublic={false}
|
|
||||||
/>
|
/>
|
||||||
);
|
<Avatar
|
||||||
} else if (conversations.length > 1) {
|
avatarPath={conv2?.avatarPath}
|
||||||
// in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size
|
name={name2}
|
||||||
// Always use the size directly under the one requested
|
size={avatarsDiameter}
|
||||||
let avatarsDiameter = 0;
|
pubkey={conv2?.id}
|
||||||
switch (size) {
|
/>
|
||||||
case 36: {
|
</div>
|
||||||
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 <></>;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue