From bd32a4ac9fffc373c806e95212e63ecb6a2481f8 Mon Sep 17 00:00:00 2001 From: Przemyslaw Jozwik Date: Tue, 23 Jan 2024 17:09:37 +0100 Subject: [PATCH 1/3] fix: read indicator images improvements --- .../Message/ContentMessage/asset/index.tsx | 33 ++++++++++++++----- .../ReadIndicator/ReadIndicator.styles.ts | 3 +- src/script/media/MediaEmbeds.ts | 2 +- .../components/asset/link-preview-asset.less | 3 +- src/style/components/asset/video-asset.less | 2 ++ .../content/conversation/message-list.less | 25 +++++--------- 6 files changed, 37 insertions(+), 31 deletions(-) diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx index 6ca98655f37..e7c1454bc1a 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx +++ b/src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx @@ -74,12 +74,15 @@ const ContentAsset = ({ switch (asset.type) { case AssetType.TEXT: + const shouldRenderText = (asset as Text).should_render_text(); + const renderText = (asset as Text).render(selfId, message.accent_color()); + return ( <> - {(asset as Text).should_render_text() && ( + {shouldRenderText && ( )} + + {shouldRenderText && ( + + )} + {(asset as Text).previews().map(preview => (
+ + {!shouldRenderText && ( + + )}
))} - - ); case AssetType.FILE: diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts index 7356bae61a2..19870b89fd8 100644 --- a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts +++ b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts @@ -22,7 +22,7 @@ import {CSSObject} from '@emotion/react'; export const ReadReceiptText: CSSObject = { display: 'inline-flex', alignItems: 'center', - verticalAlign: 'bottom', + verticalAlign: 'text-bottom', }; export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({ @@ -45,7 +45,6 @@ export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({ }), '.message-asset &': { - marginTop: '8px', marginLeft: '12px', }, diff --git a/src/script/media/MediaEmbeds.ts b/src/script/media/MediaEmbeds.ts index 729b07c2823..fc985da43b0 100644 --- a/src/script/media/MediaEmbeds.ts +++ b/src/script/media/MediaEmbeds.ts @@ -49,7 +49,7 @@ const _createIFrameContainer = (options?: Partial): string => { }; options = {...defaults, ...options}; - const iFrameContainer = `
`; + const iFrameContainer = ``; if (!options.video) { options.allowfullscreen = ''; diff --git a/src/style/components/asset/link-preview-asset.less b/src/style/components/asset/link-preview-asset.less index bfef1522521..afb84a4bbe1 100644 --- a/src/style/components/asset/link-preview-asset.less +++ b/src/style/components/asset/link-preview-asset.less @@ -20,15 +20,14 @@ // variables @link-preview-height: 88px; -link-preview-asset, .link-preview-asset { .asset-container-style; - width: 100%; } .link-preview-asset { display: flex; width: 100%; + max-width: var(--conversation-message-asset-width); cursor: pointer; &.ephemeral-asset-expired { diff --git a/src/style/components/asset/video-asset.less b/src/style/components/asset/video-asset.less index 9f56914f02a..2696715baa4 100644 --- a/src/style/components/asset/video-asset.less +++ b/src/style/components/asset/video-asset.less @@ -29,6 +29,8 @@ .video-asset { position: relative; display: block; + max-width: var(--conversation-message-asset-width); + flex: 1 1 auto; &__container { .asset-container-style; diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less index 89387ea8dff..5bbb9d13d4c 100644 --- a/src/style/content/conversation/message-list.less +++ b/src/style/content/conversation/message-list.less @@ -37,7 +37,6 @@ // MESSAGE .message { position: relative; - margin-bottom: 16px; & * { .accent-selection; @@ -315,6 +314,7 @@ &-content { width: 100%; max-width: calc(@conversation-max-width - var(--conversation-message-sender-width)); + height: fit-content; } .text { @@ -342,23 +342,14 @@ line-height: 2.5rem; } - .iframe-container { + embed, + iframe, + object { + max-width: var(--conversation-message-asset-width); margin-top: 16px; - margin-bottom: 24px; + aspect-ratio: 16 / 9; } - .iframe-container-video { - position: relative; - padding-bottom: 75%; - - embed, - iframe, - object { - position: absolute; - left: 0; - max-width: 100%; - } - } .message-ephemeral-timer { position: absolute; top: 2px; @@ -388,7 +379,8 @@ .image-asset { position: relative; display: flex; - margin: 8px 0 24px; + max-width: var(--conversation-message-asset-width); + margin: 0 0 24px; cursor: pointer; &--no-image { @@ -727,7 +719,6 @@ // MESSAGE SPACING .message-asset { display: flex; - max-width: var(--conversation-message-asset-width); align-items: flex-start; margin-top: 8px; } From 3278746e8a2e6f9cb3548da88467f245939481b8 Mon Sep 17 00:00:00 2001 From: Przemyslaw Jozwik Date: Tue, 23 Jan 2024 19:04:37 +0100 Subject: [PATCH 2/3] fixes --- src/script/media/MediaEmbeds.ts | 2 +- src/style/content/conversation/message-list.less | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/script/media/MediaEmbeds.ts b/src/script/media/MediaEmbeds.ts index fc985da43b0..729b07c2823 100644 --- a/src/script/media/MediaEmbeds.ts +++ b/src/script/media/MediaEmbeds.ts @@ -49,7 +49,7 @@ const _createIFrameContainer = (options?: Partial): string => { }; options = {...defaults, ...options}; - const iFrameContainer = ``; + const iFrameContainer = `
`; if (!options.video) { options.allowfullscreen = ''; diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less index 5bbb9d13d4c..16fde55bc67 100644 --- a/src/style/content/conversation/message-list.less +++ b/src/style/content/conversation/message-list.less @@ -315,6 +315,10 @@ width: 100%; max-width: calc(@conversation-max-width - var(--conversation-message-sender-width)); height: fit-content; + + .text:has(> .iframe-container) { + margin-right: 0; + } } .text { From 8b2d7b4c0fcb7506831016cd09ff4511ed98c286 Mon Sep 17 00:00:00 2001 From: Przemyslaw Jozwik Date: Tue, 23 Jan 2024 19:29:29 +0100 Subject: [PATCH 3/3] fix image asset width --- .../MessagesList/Message/ContentMessage/asset/ImageAsset.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx b/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx index a06793f10ee..74bc261947a 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx +++ b/src/script/components/MessagesList/Message/ContentMessage/asset/ImageAsset.tsx @@ -102,7 +102,7 @@ export const ImageAsset: React.FC = ({ const imageContainerStyle: CSSObject = { aspectRatio: isFileSharingReceivingEnabled ? `${asset.ratio}` : undefined, - maxWidth: '100%', + maxWidth: 'var(--conversation-message-asset-width)', width: asset.width, maxHeight: '80vh', };