fix: set a min height for attachments preview so they cover their box
even if they are smaller that them and close the replyTo in composition box on Escape press
This commit is contained in:
parent
e125979b7a
commit
a8c3463673
|
@ -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` : '',
|
||||
}}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -219,7 +219,7 @@ export const MessageContent = (props: Props) => {
|
|||
{!isDeleted && (
|
||||
<MessagePreview messageId={props.messageId} handleImageError={handleImageError} />
|
||||
)}
|
||||
<Flex padding="7px" container={true} flexDirection="column">
|
||||
<Flex padding="7px 13px" container={true} flexDirection="column">
|
||||
<MessageText messageId={props.messageId} />
|
||||
</Flex>
|
||||
</>
|
||||
|
|
Loading…
Reference in New Issue