From 9584d0a1afe3ba35deaecab3bb385991ca4c34a1 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 14 Sep 2020 14:29:37 +1000
Subject: [PATCH] fix closed group avatar for conversationlistItem
---
stylesheets/_avatar.scss | 1 +
stylesheets/themes.scss | 2 +-
ts/components/Avatar.tsx | 2 +-
.../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 25 ++++++++++++++++++-
ts/components/ConversationListItem.tsx | 20 +++++++--------
5 files changed, 36 insertions(+), 14 deletions(-)
diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss
index caa899939..ba61d4076 100644
--- a/stylesheets/_avatar.scss
+++ b/stylesheets/_avatar.scss
@@ -55,6 +55,7 @@
@include color-svg('../images/profile-individual.svg', $color-white);
}
+.module-avatar__icon-closed .module-avatar--28,
.module-avatar--28 {
height: 28px;
width: 28px;
diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss
index cf5b80caf..0c9835a55 100644
--- a/stylesheets/themes.scss
+++ b/stylesheets/themes.scss
@@ -9,7 +9,7 @@ $accentDarkTheme: #00f782;
$borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
$borderDarkTheme: rgba($white, 0.06);
-$borderAvatarColor: #000a; // search for references on ts TODO: make this exposed on ts
+$borderAvatarColor: #00000059; // search for references on ts TODO: make this exposed on ts
$themes: (
light: (
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index 0ff7cb3f6..d354cacc1 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -212,6 +212,6 @@ export class Avatar extends React.PureComponent<Props, State> {
}
private getAvatarBorderColor(): string {
- return '#000A'; // borderAvatarColor in themes.scss
+ return '#00000059'; // borderAvatarColor in themes.scss
}
}
diff --git a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx
index 63ee61afc..b4a5b5902 100644
--- a/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx
+++ b/ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx
@@ -30,7 +30,30 @@ export class ClosedGroupAvatar extends React.PureComponent<Props> {
);
} else if (conversations.length > 1) {
// in a closed group avatar, each visible avatar member size is 2/3 of the group avatar in size
- const avatarsDiameter = 28; //FIXME audric (size * 2) / 3;
+ // 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 80: {
+ avatarsDiameter = 48;
+ 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
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index a8bfe939f..a87b219e9 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@@ -23,6 +23,7 @@ import {
import { ConversationAttributes } from '../../js/models/conversations';
import { GroupUtils } from '../session/utils';
import { PubKey } from '../session/types';
+import { UserUtil } from '../util';
export type PropsData = {
id: string;
@@ -91,11 +92,15 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
public async fetchClosedConversationDetails() {
if (!this.props.isPublic && this.props.type === 'group') {
const groupId = this.props.phoneNumber;
- const members = await GroupUtils.getGroupMembers(PubKey.cast(groupId));
- const membersConvos = members.map(m =>
- window.ConversationController.get(m.key)
+ let members = await GroupUtils.getGroupMembers(PubKey.cast(groupId));
+ const ourPrimary = await UserUtil.getPrimary();
+ members = members.filter(m => m.key !== ourPrimary.key);
+ members.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+ const membersConvos = members.map(
+ m => window.ConversationController.get(m.key).cachedProps
);
-
+ // no need to forward more than 2 conversation for rendering the group avatar
+ membersConvos.slice(0, 2);
this.setState({ closedMemberConversations: membersConvos });
}
}
@@ -113,12 +118,6 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
isPublic,
} = this.props;
- if (!isPublic && type === 'group') {
- if (!this.state.closedMemberConversations) {
- return <></>;
- }
- }
-
const iconSize = 36;
return (
@@ -341,7 +340,6 @@ export class ConversationListItem extends React.PureComponent<Props, State> {
style,
mentionedUs,
} = this.props;
-
const triggerId = `conversation-item-${phoneNumber}-ctxmenu`;
return (