From ca7983caac6f86bc33add5badb6f8a2ca04f84fb Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 5 Oct 2023 14:53:09 +1100 Subject: [PATCH] fix: align expire timers with the member avatars in groups --- ts/components/conversation/SessionMessagesList.tsx | 11 ++++++++--- .../conversation/SessionMessagesListContainer.tsx | 1 + .../message/message-content/MessageAvatar.tsx | 6 ++++-- .../message-content/MessageContentWithStatus.tsx | 12 +++++++++--- .../message-item/ExpirableReadableMessage.tsx | 8 +------- ts/state/selectors/conversations.ts | 4 ++++ 6 files changed, 27 insertions(+), 15 deletions(-) diff --git a/ts/components/conversation/SessionMessagesList.tsx b/ts/components/conversation/SessionMessagesList.tsx index 435665fc5..fa4a7ffc0 100644 --- a/ts/components/conversation/SessionMessagesList.tsx +++ b/ts/components/conversation/SessionMessagesList.tsx @@ -34,8 +34,12 @@ function isNotTextboxEvent(e: KeyboardEvent) { return (e?.target as any)?.type === undefined; } -const StyledMessagesList = styled.div` - padding: 0 var(--margins-lg) 0; +// isGroup is used to align the ExpireTimer with the member avatars +const StyledMessagesList = styled.div<{ isGroup: boolean }>` + padding: ${props => + props.isGroup + ? '0 var(--margins-lg) 0 calc(var(--margins-lg) + 11px)' + : '0 var(--margins-lg) 0'}; `; let previousRenderedConvo: string | undefined; @@ -49,6 +53,7 @@ export const SessionMessagesList = (props: { onPageDownPressed: () => void; onHomePressed: () => void; onEndPressed: () => void; + isGroup: boolean; }) => { const messagesProps = useSelector(getSortedMessagesTypesOfSelectedConversation); const convoKey = useSelectedConversationKey(); @@ -101,7 +106,7 @@ export const SessionMessagesList = (props: { } return ( - + {messagesProps.map(messageProps => { const messageId = messageProps.message.props.messageId; const unreadIndicator = messageProps.showUnreadIndicator ? ( diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 37eda011f..0e786004a 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -144,6 +144,7 @@ class SessionMessagesListContainerInner extends React.Component { onPageUpPressed={this.scrollPgUp} onHomePressed={this.scrollTop} onEndPressed={this.scrollEnd} + isGroup={!conversation.isMe && !conversation.isPrivate && !conversation.isPublic} /> diff --git a/ts/components/conversation/message/message-content/MessageAvatar.tsx b/ts/components/conversation/message/message-content/MessageAvatar.tsx index 375b3158a..b57e24438 100644 --- a/ts/components/conversation/message/message-content/MessageAvatar.tsx +++ b/ts/components/conversation/message/message-content/MessageAvatar.tsx @@ -36,10 +36,10 @@ export type MessageAvatarSelectorProps = Pick< 'sender' | 'isSenderAdmin' | 'lastMessageOfSeries' >; -type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean }; +type Props = { messageId: string; hideAvatar: boolean; isPrivate: boolean; isGroup: boolean }; export const MessageAvatar = (props: Props) => { - const { messageId, hideAvatar, isPrivate } = props; + const { messageId, hideAvatar, isPrivate, isGroup } = props; const dispatch = useDispatch(); const selectedConvoKey = useSelectedConversationKey(); @@ -137,6 +137,8 @@ export const MessageAvatar = (props: Props) => { diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index 7ffb99e8a..7ba344500 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx @@ -19,7 +19,7 @@ import { MessageReactions, StyledMessageReactions } from './MessageReactions'; import { MessageStatus } from './MessageStatus'; import { ExpirableReadableMessage } from '../message-item/ExpirableReadableMessage'; -export type MessageContentWithStatusSelectorProps = Pick< +export type MessageContentWithStatusSelectorProps = { isGroup: boolean } & Pick< MessageRenderingProps, 'conversationType' | 'direction' | 'isDeleted' >; @@ -95,7 +95,8 @@ export const MessageContentWithStatuses = (props: Props) => { if (!contentProps) { return null; } - const { conversationType, direction, isDeleted } = contentProps; + + const { conversationType, direction, isDeleted, isGroup } = contentProps; const isIncoming = direction === 'incoming'; const isPrivate = conversationType === 'private'; @@ -124,7 +125,12 @@ export const MessageContentWithStatuses = (props: Props) => { onDoubleClickCapture={onDoubleClickReplyToMessage} data-testid={dataTestId} > - + { const selected = useMessageExpirationPropsById(props.messageId); - const isClosedGroup = useIsClosedGroup(selected?.convoId); const { isCentered, onClick, onDoubleClickCapture, role, dataTestId } = props; @@ -138,8 +134,6 @@ export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) = display: !isCentered && isIncoming ? 'none' : 'block', visibility: !isIncoming ? 'visible' : 'hidden', flexGrow: !isCentered ? 1 : undefined, - // Align timer with group member avatar - marginLeft: !isCentered && isClosedGroup ? '11px' : undefined, }} /> )} diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index d690e7ce1..42df21273 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -938,8 +938,12 @@ export const getMessageContentWithStatusesSelectorProps = createSelector( return undefined; } + const isGroup = + props.propsForMessage.conversationType !== 'private' && !props.propsForMessage.isPublic; + const msgProps: MessageContentWithStatusSelectorProps = { ...pick(props.propsForMessage, ['conversationType', 'direction', 'isDeleted']), + isGroup, }; return msgProps;