diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index efadb4958..53401c118 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/ts/components/conversation/SessionMessagesListContainer.tsx @@ -54,6 +54,7 @@ type Props = SessionMessageListProps & { const StyledMessagesContainer = styled.div<{}>` display: flex; flex-grow: 1; + gap: var(--margins-xxs); flex-direction: column-reverse; position: relative; overflow-x: hidden; diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index d83616b02..9296ee1c9 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx @@ -46,6 +46,8 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' } const StyledMessageWithAuthor = styled.div<{ isIncoming: boolean }>` max-width: ${props => (props.isIncoming ? '100%' : 'calc(100% - 17px)')}; + display: flex; + flex-direction: column; `; export const MessageContentWithStatuses = (props: Props) => { diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx index 164721ca2..2c55150e5 100644 --- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx +++ b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx @@ -1,17 +1,17 @@ import classNames from 'classnames'; import React from 'react'; -import { isImageAttachment } from '../../../../types/Attachment'; -import { Image } from '../../Image'; +import { useDispatch } from 'react-redux'; import { MessageRenderingProps } from '../../../../models/messageType'; -import { useDispatch, useSelector } from 'react-redux'; -import { getIsMessageSelectionMode } from '../../../../state/selectors/conversations'; -import { SessionIcon } from '../../../icon'; -import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; import { useMessageAttachments, useMessageDirection, useMessageLinkPreview, } from '../../../../state/selectors'; +import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation'; +import { isImageAttachment } from '../../../../types/Attachment'; +import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; +import { SessionIcon } from '../../../icon'; +import { Image } from '../../Image'; export type MessageLinkPreviewSelectorProps = Pick< MessageRenderingProps, @@ -30,7 +30,7 @@ export const MessageLinkPreview = (props: Props) => { const direction = useMessageDirection(props.messageId); const attachments = useMessageAttachments(props.messageId); const previews = useMessageLinkPreview(props.messageId); - const isMessageSelectionMode = useSelector(getIsMessageSelectionMode); + const isMessageSelectionMode = useIsMessageSelectionMode(); if (!props.messageId) { return null; diff --git a/ts/components/conversation/message/message-content/quote/Quote.tsx b/ts/components/conversation/message/message-content/quote/Quote.tsx index 079fc6500..76ddbe79c 100644 --- a/ts/components/conversation/message/message-content/quote/Quote.tsx +++ b/ts/components/conversation/message/message-content/quote/Quote.tsx @@ -2,11 +2,12 @@ import React, { MouseEvent, useState } from 'react'; import * as MIME from '../../../../../types/MIME'; +import { isEmpty } from 'lodash'; +import styled from 'styled-components'; +import { useIsMessageSelectionMode } from '../../../../../state/selectors/selectedConversation'; import { QuoteAuthor } from './QuoteAuthor'; -import { QuoteText } from './QuoteText'; import { QuoteIconContainer } from './QuoteIconContainer'; -import styled from 'styled-components'; -import { isEmpty } from 'lodash'; +import { QuoteText } from './QuoteText'; const StyledQuoteContainer = styled.div` min-width: 300px; // if the quoted content is small it doesn't look very good so we set a minimum @@ -69,6 +70,7 @@ export interface QuotedAttachmentType { } export const Quote = (props: QuoteProps) => { + const isSelectionMode = useIsMessageSelectionMode(); const { isIncoming, attachment, text, referencedMessageNotFound, onClick } = props; const [imageBroken, setImageBroken] = useState(false); @@ -81,7 +83,11 @@ export const Quote = (props: QuoteProps) => { { + if (onClick && !isSelectionMode) { + onClick(e); + } + }} > ` display: flex; @@ -68,6 +69,8 @@ export const Reaction = (props: ReactionProps): ReactElement => { handlePopupReaction, handlePopupClick, } = props; + + const isMessageSelection = useIsMessageSelectionMode(); const reactionsMap = (reactions && Object.fromEntries(reactions)) || {}; const senders = reactionsMap[emoji]?.senders || []; const count = reactionsMap[emoji]?.count; @@ -93,7 +96,9 @@ export const Reaction = (props: ReactionProps): ReactElement => { }; const handleReactionClick = () => { - onClick(emoji); + if (!isMessageSelection) { + onClick(emoji); + } }; return ( @@ -104,7 +109,7 @@ export const Reaction = (props: ReactionProps): ReactElement => { inModal={inModal} onClick={handleReactionClick} onMouseEnter={() => { - if (inGroup) { + if (inGroup && !isMessageSelection) { const { innerWidth: windowWidth } = window; if (handlePopupReaction) { // overflow on far right means we shift left diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts index de5563aec..ad79c090f 100644 --- a/ts/state/selectors/selectedConversation.ts +++ b/ts/state/selectors/selectedConversation.ts @@ -5,7 +5,7 @@ import { PubKey } from '../../session/types'; import { UserUtils } from '../../session/utils'; import { StateType } from '../reducer'; import { getCanWrite, getModerators, getSubscriberCount } from './sogsRoomInfo'; -import { getSelectedConversation } from './conversations'; +import { getIsMessageSelectionMode, getSelectedConversation } from './conversations'; /** * Returns the formatted text for notification setting. @@ -269,3 +269,7 @@ export function useSelectedWeAreModerator() { const weAreModerator = mods.includes(us); return isPublic && isString(selectedConvoKey) && weAreModerator; } + +export function useIsMessageSelectionMode() { + return useSelector(getIsMessageSelectionMode); +}