From 4cbc452f26bf40cc792525fbe87a0bdacac2dffd Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 9 Nov 2023 14:08:27 +1100 Subject: [PATCH] fix: avatar style for incoming messages in groups had to refactor a fair bit, but well... --- .../SessionMessagesListContainer.tsx | 5 ++-- .../message-content/MessageAuthorText.tsx | 7 +++-- .../message/message-content/MessageAvatar.tsx | 14 ++++++---- .../message-content/MessageContent.tsx | 28 +++++++++++++++++-- .../MessageContentWithStatus.tsx | 21 ++++---------- ts/state/selectors/messages.ts | 7 +++++ ts/themes/globals.tsx | 2 ++ 7 files changed, 55 insertions(+), 29 deletions(-) diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 392890bba..4651fca7b 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -65,8 +65,7 @@ const StyledMessagesContainer = styled.div<{ isGroup: boolean }>` padding-top: var(--margins-sm); padding-right: var(--margins-lg); padding-bottom: var(--margins-xl); - padding-left: ${props => - props.isGroup ? 'calc(var(--margins-lg) + 11px)' : 'var(--margins-lg)'}; + padding-left: ${props => (props.isGroup ? 'var(--margins-xs)' : 'var(--margins-lg)')}; .session-icon-button { display: flex; @@ -127,7 +126,7 @@ class SessionMessagesListContainerInner extends React.Component { ` color: var(--text-primary-color); text-overflow: ellipsis; + margin-inline-start: ${props => (props.hideAvatar ? 0 : 'var(--width-avatar-group-msg-list)')}; `; export const MessageAuthorText = (props: Props) => { @@ -32,6 +34,7 @@ export const MessageAuthorText = (props: Props) => { const sender = useMessageAuthor(props.messageId); const direction = useMessageDirection(props.messageId); const firstMessageOfSeries = useFirstMessageOfSeries(props.messageId); + const hideAvatar = useHideAvatarInMsgList(props.messageId); if (!props.messageId || !sender || !direction) { return null; @@ -46,7 +49,7 @@ export const MessageAuthorText = (props: Props) => { const displayedPubkey = authorProfileName ? PubKey.shorten(sender) : sender; return ( - + { } if (!lastMessageOfSeries) { - return
; + return
; } /* eslint-disable @typescript-eslint/no-misused-promises */ - + // The styledAvatar, when rendered needs to have a width with margins included of var(--width-avatar-group-msg-list). + // This is so that the other message is still aligned when the avatar is not rendered (we need to make up for the space used by the avatar, and we use a margin of width-avatar-group-msg-list) return ( ) } } -const StyledMessageContent = styled.div``; +const StyledMessageContent = styled.div` + display: flex; +`; const opacityAnimation = keyframes` 0% { @@ -92,6 +99,12 @@ const StyledMessageOpaqueContent = styled(StyledMessageHighlighter)<{ export const IsMessageVisibleContext = createContext(false); +// NOTE aligns group member avatars with the ExpireTimer +const StyledAvatarContainer = styled.div<{ hideAvatar: boolean; isGroup: boolean }>` + /* margin-inline-start: ${props => (!props.hideAvatar && props.isGroup ? '-11px' : '')}; */ + align-self: flex-end; +`; + export const MessageContent = (props: Props) => { const [highlight, setHighlight] = useState(false); const [didScroll, setDidScroll] = useState(false); @@ -102,6 +115,9 @@ export const MessageContent = (props: Props) => { const [isMessageVisible, setMessageIsVisible] = useState(false); const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext); + const selectedIsPrivate = useSelectedIsPrivate(); + const isGroup = useSelectedIsGroup(); + const hideAvatar = useHideAvatarInMsgList(props.messageId); const [imageBroken, setImageBroken] = useState(false); @@ -169,6 +185,14 @@ export const MessageContent = (props: Props) => { onClick={onClickOnMessageInnerContainer} title={toolTipTitle} > + + + + ` } `; -const StyledMessageWithAuthor = styled.div<{ isIncoming: boolean }>` +const StyledMessageWithAuthor = styled.div` max-width: '100%'; display: flex; flex-direction: column; min-width: 0; `; -// NOTE aligns group member avatars with the ExpireTimer -const StyledAvatarContainer = styled.div<{ hideAvatar: boolean; isGroup: boolean }>` - margin-inline-start: ${props => (!props.hideAvatar && props.isGroup ? '-11px' : '')}; -`; - export const MessageContentWithStatuses = (props: Props) => { const contentProps = useSelector((state: StateType) => getMessageContentWithStatusesSelectorProps(state, props.messageId) ); const dispatch = useDispatch(); + const hideAvatar = useHideAvatarInMsgList(props.messageId); const multiSelectMode = useSelector(isMessageSelectionMode); @@ -103,12 +99,9 @@ export const MessageContentWithStatuses = (props: Props) => { return null; } - const { conversationType, direction, isDeleted, isGroup } = contentProps; + const { direction, isDeleted } = contentProps; const isIncoming = direction === 'incoming'; - const isPrivate = conversationType === 'private'; - const hideAvatar = isPrivate || direction === 'outgoing'; - const handleMessageReaction = async (emoji: string) => { await Reactions.sendMessageReaction(messageId, emoji); }; @@ -132,12 +125,8 @@ export const MessageContentWithStatuses = (props: Props) => { onDoubleClickCapture={onDoubleClickReplyToMessage} dataTestId={dataTestId} > - - - - - + diff --git a/ts/state/selectors/messages.ts b/ts/state/selectors/messages.ts index c23e9c41f..4880780d3 100644 --- a/ts/state/selectors/messages.ts +++ b/ts/state/selectors/messages.ts @@ -8,6 +8,7 @@ import { } from '../ducks/conversations'; import { StateType } from '../reducer'; import { getMessagePropsByMessageId } from './conversations'; +import { useSelectedIsPrivate } from './selectedConversation'; function useMessagePropsByMessageId(messageId: string | undefined) { return useSelector((state: StateType) => getMessagePropsByMessageId(state, messageId)); @@ -125,3 +126,9 @@ export function useMessageTimestamp(messageId: string) { export function useMessageBody(messageId: string) { return useMessagePropsByMessageId(messageId)?.propsForMessage.text; } + +export function useHideAvatarInMsgList(messageId?: string) { + const msgProps = useMessagePropsByMessageId(messageId); + const selectedIsPrivate = useSelectedIsPrivate(); + return msgProps?.propsForMessage.direction === 'outgoing' || selectedIsPrivate; +} diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index a5d1d1339..680fca95f 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -27,6 +27,7 @@ export type ThemeGlobals = { /* Padding */ '--padding-message-content': string; '--padding-link-preview': string; + '--width-avatar-group-msg-list': string; /* Border Radius */ '--border-radius': string; @@ -108,6 +109,7 @@ export const THEME_GLOBALS: ThemeGlobals = { '--padding-message-content': '7px 13px', '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below + '--width-avatar-group-msg-list': '46px', // the width used by the avatar (and its margins when rendered as part of a group.) '--border-radius': '5px', '--border-radius-message-box': '16px',