From 35ea6af27fa0041d813cf48e94662c676f216de0 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 11 Sep 2020 15:06:13 +1000 Subject: [PATCH] Add group avatar as on mobile: with multiple group members avatar --- js/models/conversations.d.ts | 2 + stylesheets/_avatar.scss | 11 +-- stylesheets/themes.scss | 13 ++-- ts/components/Avatar.tsx | 38 +++++++++-- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 7 +- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 67 +++++++++++++++++++ ts/components/AvatarPlaceHolder/index.ts | 1 + ts/components/ConversationListItem.tsx | 43 ++++++++++-- ts/components/LeftPane.tsx | 12 +++- ts/components/UserDetailsDialog.tsx | 1 - .../conversation/ConversationHeader.tsx | 6 +- ts/components/conversation/MemberList.tsx | 1 + .../conversation/UpdateGroupNameDialog.tsx | 1 + ts/components/conversation/_contactUtil.tsx | 1 + .../session/LeftPaneMessageSection.tsx | 39 ++--------- .../session/SessionGroupSettings.tsx | 1 + ts/state/selectors/conversations.ts | 6 +- 17 files changed, 180 insertions(+), 70 deletions(-) create mode 100644 ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx diff --git a/js/models/conversations.d.ts b/js/models/conversations.d.ts index cc0432437..4556d85d2 100644 --- a/js/models/conversations.d.ts +++ b/js/models/conversations.d.ts @@ -15,6 +15,8 @@ interface ConversationAttributes { timestamp: number; // timestamp of what? groupAdmins?: Array; isKickedFromGroup?: boolean; + avatarPath?: string; + isMe?: boolean; } export interface ConversationModel diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index 02efb2fe3..caa899939 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -9,6 +9,7 @@ img { object-fit: cover; border-radius: 50%; + border: 1px solid $borderAvatarColor; } } @@ -167,8 +168,6 @@ @include color-svg('../images/note-28.svg', $color-white); } -// Module: Avatar - .module-avatar__label { color: $color-gray-05; } @@ -189,8 +188,10 @@ background-color: $color-gray-75; } -.module-avatar--no-image { - @include themify($themes) { - background-color: themed('steelColorShade'); +.module-avatar__icon-closed { + .module-avatar:last-child { + position: absolute; + right: 0px; + bottom: 0px; } } diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 45abec93d..cf5b80caf 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -6,6 +6,11 @@ $destructive: #ff453a; $accentLightTheme: #00e97b; $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 + $themes: ( light: ( accent: $accentLightTheme, @@ -40,7 +45,7 @@ $themes: ( conversationItemHasUnread: #fcfcfc, conversationItemSelected: #f0f0f0, clickableHovered: #dfdfdf, - sessionBorder: 1px solid #f1f1f1, + sessionBorder: 1px solid $borderLightTheme, sessionUnreadBorder: 4px solid $accentLightTheme, leftpaneOverlayBackground: $white, // scrollbars @@ -52,8 +57,6 @@ $themes: ( // context menu contextMenuBackground: #f5f5f5, filterSessionText: brightness(0) saturate(100%), - steelColor: #6b6b78, - steelColorShade: #5a5a63, lastSeenIndicatorColor: #62656a, lastSeenIndicatorTextColor: #070c14, quoteBottomBarBackground: #f0f0f0, @@ -91,7 +94,7 @@ $themes: ( conversationItemHasUnread: #2c2c2c, conversationItemSelected: #404040, clickableHovered: #414347, - sessionBorder: 1px solid rgba($white, 0.06), + sessionBorder: 1px solid $borderDarkTheme, sessionUnreadBorder: 4px solid $accentDarkTheme, leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%), // scrollbars @@ -103,8 +106,6 @@ $themes: ( // context menu contextMenuBackground: #212121, filterSessionText: none, - steelColor: #6b6b78, - steelColorShade: #5a5a63, lastSeenIndicatorColor: #353535, lastSeenIndicatorTextColor: #a8a9aa, quoteBottomBarBackground: #404040, diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx index 28762e5e0..0ff7cb3f6 100644 --- a/ts/components/Avatar.tsx +++ b/ts/components/Avatar.tsx @@ -3,19 +3,20 @@ import classNames from 'classnames'; import { getInitials } from '../util/getInitials'; import { LocalizerType } from '../types/Util'; -import { AvatarPlaceHolder } from './AvatarPlaceHolder'; +import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder'; +import { ConversationAttributes } from '../../js/models/conversations'; interface Props { avatarPath?: string; color?: string; conversationType: 'group' | 'direct'; + isPublic?: boolean; noteToSelf?: boolean; name?: string; phoneNumber?: string; profileName?: string; size: number; - borderColor?: string; - borderWidth?: number; + closedMemberConversations?: Array; i18n?: LocalizerType; onAvatarClick?: () => void; } @@ -40,8 +41,9 @@ export class Avatar extends React.PureComponent { } public handleImageError() { - // tslint:disable-next-line no-console - console.log('Avatar: Image failed to load; failing over to placeholder'); + window.log.warn( + 'Avatar: Image failed to load; failing over to placeholder' + ); this.setState({ imageBroken: true, }); @@ -62,6 +64,7 @@ export class Avatar extends React.PureComponent { diameter={size} name={userName} colors={this.getAvatarColors()} + borderColor={this.getAvatarBorderColor()} /> ); } @@ -88,7 +91,15 @@ export class Avatar extends React.PureComponent { } public renderNoImage() { - const { conversationType, name, noteToSelf, size } = this.props; + const { + conversationType, + closedMemberConversations, + isPublic, + name, + noteToSelf, + size, + i18n, + } = this.props; const initials = getInitials(name); const isGroup = conversationType === 'group'; @@ -118,6 +129,17 @@ export class Avatar extends React.PureComponent { ); } + if (isGroup && !isPublic && closedMemberConversations) { + const forcedI18n = i18n || window.i18n; + return ( + + ); + } + return (
{ // defined in session-android as `profile_picture_placeholder_colors` return ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']; } + + private getAvatarBorderColor(): string { + return '#000A'; // borderAvatarColor in themes.scss + } } diff --git a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx index da9929a43..056be82bd 100644 --- a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -5,6 +5,7 @@ interface Props { diameter: number; phoneNumber: string; colors: Array; + borderColor: string; name?: string; } @@ -41,7 +42,7 @@ export class AvatarPlaceHolder extends React.PureComponent { return <>; } - const { colors, diameter, phoneNumber, name } = this.props; + const { borderColor, colors, diameter, phoneNumber, name } = this.props; const r = diameter / 2; const initial = getInitials(name)?.toLocaleUpperCase() || @@ -66,8 +67,8 @@ export class AvatarPlaceHolder extends React.PureComponent { r={r} fill={bgColor} shape-rendering="geometricPrecision" - // stroke="black" - // stroke-width="1" + stroke={borderColor} + stroke-width="1" /> ; + i18n: LocalizerType; +} + +export class ClosedGroupAvatar extends React.PureComponent { + public render() { + const { conversations, size, i18n } = this.props; + + if (conversations.length === 1) { + const conv = conversations[0]; + return ( + + ); + } 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; + const conv1 = conversations[0]; + const conv2 = conversations[1]; + // use the 2 first members as group avatars + return ( +
+ + +
+ ); + } else { + return <>; + } + } +} diff --git a/ts/components/AvatarPlaceHolder/index.ts b/ts/components/AvatarPlaceHolder/index.ts index 5b9cfd23a..f6f819bd6 100644 --- a/ts/components/AvatarPlaceHolder/index.ts +++ b/ts/components/AvatarPlaceHolder/index.ts @@ -1 +1,2 @@ export { AvatarPlaceHolder } from './AvatarPlaceHolder'; +export { ClosedGroupAvatar } from './ClosedGroupAvatar'; diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 9e90ec3a4..a8bfe939f 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -10,7 +10,7 @@ import { Timestamp } from './conversation/Timestamp'; import { ContactName } from './conversation/ContactName'; import { TypingAnimation } from './conversation/TypingAnimation'; -import { Colors, LocalizerType } from '../types/Util'; +import { LocalizerType } from '../types/Util'; import { getBlockMenuItem, getClearNicknameMenuItem, @@ -20,6 +20,9 @@ import { getInviteContactMenuItem, getLeaveGroupMenuItem, } from '../session/utils/Menu'; +import { ConversationAttributes } from '../../js/models/conversations'; +import { GroupUtils } from '../session/utils'; +import { PubKey } from '../session/types'; export type PropsData = { id: string; @@ -71,7 +74,32 @@ type PropsHousekeeping = { type Props = PropsData & PropsHousekeeping; -export class ConversationListItem extends React.PureComponent { +type State = { + closedMemberConversations?: Array; +}; + +export class ConversationListItem extends React.PureComponent { + public constructor(props: Props) { + super(props); + this.state = { closedMemberConversations: undefined }; + } + + public componentDidMount() { + void this.fetchClosedConversationDetails(); + } + + 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) + ); + + this.setState({ closedMemberConversations: membersConvos }); + } + } + public renderAvatar() { const { avatarPath, @@ -82,10 +110,14 @@ export class ConversationListItem extends React.PureComponent { name, phoneNumber, profileName, - isOnline, + isPublic, } = this.props; - const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE; + if (!isPublic && type === 'group') { + if (!this.state.closedMemberConversations) { + return <>; + } + } const iconSize = 36; @@ -101,7 +133,8 @@ export class ConversationListItem extends React.PureComponent { phoneNumber={phoneNumber} profileName={profileName} size={iconSize} - borderColor={borderColor} + isPublic={isPublic} + closedMemberConversations={this.state.closedMemberConversations} />
); diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index a4c4c600c..dbf97a13e 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -112,6 +112,7 @@ export class LeftPane extends React.Component { const { openConversationInternal, conversations, + contacts, searchResults, searchTerm, isSecondaryDevice, @@ -119,12 +120,19 @@ export class LeftPane extends React.Component { search, clearSearch, } = this.props; + // be sure to filter out secondary conversations + let filteredConversations = conversations; + if (conversations !== undefined) { + filteredConversations = conversations.filter( + conversation => !conversation.isSecondary + ); + } return ( { profileName={this.props.profileName} size={size} onAvatarClick={this.handleShowEnlargedDialog} - borderWidth={size / 2} /> ); } diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index c097a2ad1..451e2576c 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -202,10 +202,9 @@ export class ConversationHeader extends React.Component { name, phoneNumber, profileName, - isOnline, + isPublic, } = this.props; - const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE_LIGHT; const conversationType = isGroup ? 'group' : 'direct'; return ( @@ -219,11 +218,10 @@ export class ConversationHeader extends React.Component { phoneNumber={phoneNumber} profileName={profileName} size={28} - borderColor={borderColor} - borderWidth={0} onAvatarClick={() => { this.onAvatarClickBound(phoneNumber); }} + isPublic={isPublic} /> ); diff --git a/ts/components/conversation/MemberList.tsx b/ts/components/conversation/MemberList.tsx index 69a7c2d58..2d494a54c 100644 --- a/ts/components/conversation/MemberList.tsx +++ b/ts/components/conversation/MemberList.tsx @@ -101,6 +101,7 @@ class MemberItem extends React.Component { phoneNumber={this.props.member.authorPhoneNumber} profileName={this.props.member.authorProfileName} size={28} + isPublic={false} /> ); } diff --git a/ts/components/conversation/UpdateGroupNameDialog.tsx b/ts/components/conversation/UpdateGroupNameDialog.tsx index ad7f380e7..b0aa7a34d 100644 --- a/ts/components/conversation/UpdateGroupNameDialog.tsx +++ b/ts/components/conversation/UpdateGroupNameDialog.tsx @@ -179,6 +179,7 @@ export class UpdateGroupNameDialog extends React.Component { conversationType="group" i18n={this.props.i18n} size={80} + isPublic={isPublic} />
); } diff --git a/ts/components/session/LeftPaneMessageSection.tsx b/ts/components/session/LeftPaneMessageSection.tsx index e66eb8e56..a7c1a405d 100644 --- a/ts/components/session/LeftPaneMessageSection.tsx +++ b/ts/components/session/LeftPaneMessageSection.tsx @@ -77,19 +77,6 @@ export class LeftPaneMessageSection extends React.Component { valuePasted: '', }; - const conversations = this.getCurrentConversations(); - - const realConversations: Array = []; - if (conversations) { - conversations.forEach(conversation => { - const isRSS = - conversation.id && - !!(conversation.id && conversation.id.match(/^rss:/)); - - return !isRSS && realConversations.push(conversation); - }); - } - this.updateSearchBound = this.updateSearch.bind(this); this.handleOnPaste = this.handleOnPaste.bind(this); @@ -112,29 +99,12 @@ export class LeftPaneMessageSection extends React.Component { this.updateSearch(''); } - public getCurrentConversations(): - | Array - | undefined { - const { conversations } = this.props; - - let conversationList = conversations; - if (conversationList !== undefined) { - conversationList = conversationList.filter( - conversation => !conversation.isSecondary - ); - } - - return conversationList; - } - public renderRow = ({ index, key, style, }: RowRendererParamsType): JSX.Element => { - const { openConversationInternal } = this.props; - - const conversations = this.getCurrentConversations(); + const { conversations, openConversationInternal } = this.props; if (!conversations) { throw new Error('renderRow: Tried to render without conversations'); @@ -154,7 +124,11 @@ export class LeftPaneMessageSection extends React.Component { }; public renderList(): JSX.Element | Array { - const { openConversationInternal, searchResults } = this.props; + const { + conversations, + openConversationInternal, + searchResults, + } = this.props; const contacts = searchResults?.contacts || []; if (searchResults) { @@ -168,7 +142,6 @@ export class LeftPaneMessageSection extends React.Component { ); } - const conversations = this.getCurrentConversations(); if (!conversations) { throw new Error( 'render: must provided conversations if no search results are provided' diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx index c94f09f9a..4b2f0f196 100644 --- a/ts/components/session/SessionGroupSettings.tsx +++ b/ts/components/session/SessionGroupSettings.tsx @@ -335,6 +335,7 @@ export class SessionGroupSettings extends React.Component { phoneNumber={id} conversationType="group" size={80} + isPublic={isPublic} />
{showInviteContacts && ( diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index f2189f24e..63b86af9e 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -108,12 +108,8 @@ export const _getLeftPaneLists = ( const archivedConversations: Array = []; const allContacts: Array = []; - const max = sorted.length; let unreadCount = 0; - - for (let i = 0; i < max; i += 1) { - let conversation = sorted[i]; - + for (let conversation of sorted) { if (selectedConversation === conversation.id) { conversation = { ...conversation,