fix: link preview with image displayed horizontal rather than vertical
This commit is contained in:
parent
d512f6911d
commit
d86d024a0a
|
@ -147,6 +147,11 @@
|
|||
cursor: pointer;
|
||||
border-top-left-radius: $session_message-container-border-radius;
|
||||
border-top-right-radius: $session_message-container-border-radius;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.module-message__link-preview__text {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.module-message__link-preview__content {
|
||||
|
@ -155,6 +160,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
border: 1px solid $color-black-015;
|
||||
}
|
||||
|
||||
|
@ -203,10 +209,6 @@
|
|||
background-color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-message__link-preview__text--with-icon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.module-message__link-preview__title {
|
||||
color: $color-gray-90;
|
||||
font-size: 16px;
|
||||
|
|
|
@ -14,7 +14,6 @@ import {
|
|||
import {
|
||||
canDisplayImage,
|
||||
getGridDimensions,
|
||||
getImageDimensionsInAttachment,
|
||||
hasImage,
|
||||
hasVideoScreenshot,
|
||||
isImage,
|
||||
|
@ -22,7 +21,6 @@ import {
|
|||
isVideo,
|
||||
} from '../../../../types/Attachment';
|
||||
import { Flex } from '../../../basic/Flex';
|
||||
import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
|
||||
import { MessageAttachment } from './MessageAttachment';
|
||||
import { MessagePreview } from './MessagePreview';
|
||||
import { MessageQuote } from './MessageQuote';
|
||||
|
@ -168,7 +166,7 @@ export const MessageContent = (props: Props) => {
|
|||
isDeleted = selectedMsg.isDeleted;
|
||||
}
|
||||
|
||||
const width = getWidth({ previews, attachments });
|
||||
const width = getWidth({ attachments });
|
||||
const isShowingImage = getIsShowingImage({ attachments, imageBroken, previews, text });
|
||||
const hasText = Boolean(text);
|
||||
const hasQuote = !isEmpty(quote);
|
||||
|
@ -230,10 +228,8 @@ export const MessageContent = (props: Props) => {
|
|||
);
|
||||
};
|
||||
|
||||
function getWidth(
|
||||
props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
|
||||
): number | undefined {
|
||||
const { attachments, previews } = props;
|
||||
function getWidth(props: Pick<MessageRenderingProps, 'attachments'>): number | undefined {
|
||||
const { attachments } = props;
|
||||
|
||||
if (attachments && attachments.length) {
|
||||
const dimensions = getGridDimensions(attachments);
|
||||
|
@ -241,22 +237,8 @@ function getWidth(
|
|||
return dimensions.width;
|
||||
}
|
||||
}
|
||||
|
||||
if (previews && previews.length) {
|
||||
const first = previews[0];
|
||||
|
||||
if (!first || !first.image) {
|
||||
return;
|
||||
}
|
||||
const { width } = first.image;
|
||||
|
||||
if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
|
||||
const dimensions = getImageDimensionsInAttachment(first.image);
|
||||
if (dimensions) {
|
||||
return dimensions.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
// we do not care about the presence of a preview or not to hardcode the width.
|
||||
// the width with a preview will be determined by a flexbox
|
||||
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -81,14 +81,7 @@ export const MessagePreview = (props: Props) => {
|
|||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__link-preview__text',
|
||||
previewHasImage && !isFullSizeImage
|
||||
? 'module-message__link-preview__text--with-icon'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
<div className={classNames('module-message__link-preview__text')}>
|
||||
<div className="module-message__link-preview__title">{first.title}</div>
|
||||
<div className="module-message__link-preview__location">{first.domain}</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue