Merge pull request #2818 from Bilb/fix/padding-selection-mode

Fix/padding selection mode

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;

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) => {

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 { useDispatch } from 'react-redux';
-import { Image } from '../../Image';
 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;

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 { QuoteText } from './QuoteText';
-import { isEmpty } from 'lodash';
 
 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) => {
       <StyledQuote
         hasAttachment={Boolean(!isEmpty(attachment))}
         isIncoming={isIncoming}
-        onClick={onClick}
+        onClick={e => {
+          if (onClick && !isSelectionMode) {
+            onClick(e);
+          }
+        }}
       >
         <QuoteIconContainer
           attachment={attachment}

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -118,8 +118,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   align-items: center;
   width: 100%;
   letter-spacing: 0.03rem;
-  padding: var(--margins-xs) var(--margins-lg) 0;
+  padding: 0 var(--margins-lg) 0;
-  margin: var(--margins-xxs) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;

ts/components/conversation/message/reactions/Reaction.tsx

@@ -1,13 +1,14 @@
 import React, { ReactElement, useRef, useState } from 'react';
-import { SortedReactionList } from '../../../../types/Reaction';
+import { useMouse } from 'react-use';
+import styled from 'styled-components';
+import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { UserUtils } from '../../../../session/utils';
+import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation';
+import { SortedReactionList } from '../../../../types/Reaction';
 import { abbreviateNumber } from '../../../../util/abbreviateNumber';
 import { nativeEmojiData } from '../../../../util/emoji';
-import styled from 'styled-components';
-import { useMouse } from 'react-use';
-import { POPUP_WIDTH, ReactionPopup, TipPosition } from './ReactionPopup';
 import { popupXDefault, popupYDefault } from '../message-content/MessageReactions';
-import { isUsAnySogsFromCache } from '../../../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
+import { POPUP_WIDTH, ReactionPopup, TipPosition } from './ReactionPopup';
 
 const StyledReaction = styled.button<{ selected: boolean; inModal: boolean; showCount: boolean }>`
   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 = () => {
+    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

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);
+}