diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index b1a81c417..15d409af0 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -88,6 +88,8 @@ export const Image = (props: Props) => { style={{ maxHeight: `${height}px`, maxWidth: `${width}px`, + minHeight: `${height}px`, + minWidth: `${width}px`, }} data-attachmentindex={attachmentIndex} > @@ -116,6 +118,8 @@ export const Image = (props: Props) => { style={{ maxHeight: `${height}px`, maxWidth: `${width}px`, + minHeight: `${height}px`, + minWidth: `${width}px`, width: forceSquare ? `${width}px` : '', height: forceSquare ? `${height}px` : '', }} diff --git a/ts/components/conversation/SessionQuotedMessageComposition.tsx b/ts/components/conversation/SessionQuotedMessageComposition.tsx index 32606b300..41d8ded6d 100644 --- a/ts/components/conversation/SessionQuotedMessageComposition.tsx +++ b/ts/components/conversation/SessionQuotedMessageComposition.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import React from 'react'; import { SessionIcon, SessionIconButton } from '../icon'; import styled from 'styled-components'; import { useDispatch, useSelector } from 'react-redux'; @@ -8,6 +8,8 @@ import { getAlt, isAudio } from '../../types/Attachment'; import { AUDIO_MP3 } from '../../types/MIME'; import { Flex } from '../basic/Flex'; import { Image } from '../../../ts/components/conversation/Image'; +// tslint:disable-next-line: no-submodule-imports +import useKey from 'react-use/lib/useKey'; const QuotedMessageComposition = styled.div` width: 100%; @@ -58,9 +60,11 @@ export const SessionQuotedMessageComposition = () => { const hasAudioAttachment = hasAttachments && attachments && attachments.length > 0 && isAudio(attachments); - const removeQuotedMessage = useCallback(() => { + const removeQuotedMessage = () => { dispatch(quoteMessage(undefined)); - }, []); + }; + + useKey('Escape', removeQuotedMessage, undefined, []); if (!quotedMessageProps?.id) { return null; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index e1fbaeb03..5159389ce 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/ts/components/conversation/message/message-content/MessageContent.tsx @@ -32,15 +32,7 @@ import styled from 'styled-components'; export type MessageContentSelectorProps = Pick< MessageRenderingProps, - | 'text' - | 'direction' - | 'timestamp' - | 'serverTimestamp' - | 'firstMessageOfSeries' - | 'lastMessageOfSeries' - | 'previews' - | 'quote' - | 'attachments' + 'text' | 'direction' | 'timestamp' | 'serverTimestamp' | 'previews' | 'quote' | 'attachments' >; type Props = { @@ -96,22 +88,8 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent) } } -const radiusLg = '18px'; -const radiusSm = '4px'; - -const StyledMessageContent = styled.div<{ - isOutgoing: boolean; - firstOfSeries: boolean; - lastOfSeries: boolean; -}>` - border-top-right-radius: ${props => - props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`}; - border-bottom-right-radius: ${props => - props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`}; - border-top-left-radius: ${props => - !props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`}; - border-bottom-left-radius: ${props => - !props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`}; +const StyledMessageContent = styled.div` + border-radius: 18px; `; export const IsMessageVisibleContext = createContext(false); @@ -178,8 +156,6 @@ export const MessageContent = (props: Props) => { text, timestamp, serverTimestamp, - firstMessageOfSeries, - lastMessageOfSeries, previews, quote, attachments, @@ -216,9 +192,6 @@ export const MessageContent = (props: Props) => { style={{ width: isShowingImage ? width : undefined, }} - firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)} - lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)} - isOutgoing={direction === 'outgoing'} role="button" onClick={onClickOnMessageInnerContainer} title={toolTipTitle} @@ -246,7 +219,7 @@ export const MessageContent = (props: Props) => { {!isDeleted && ( )} - + diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 5bf3108c0..73922ef10 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -1089,8 +1089,6 @@ export const getMessageContentSelectorProps = createSelector(getMessagePropsByMe } const msgProps: MessageContentSelectorProps = { - firstMessageOfSeries: props.firstMessageOfSeries, - lastMessageOfSeries: props.lastMessageOfSeries, ...pick(props.propsForMessage, [ 'direction', 'serverTimestamp',