From e40a91ca7dbbc5f56e584f8b9088ceccbe40dec5 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sat, 2 Nov 2024 21:11:43 +0400 Subject: [PATCH] Forwards: Fix styles (#5126) --- src/components/middle/message/Album.scss | 14 --- src/components/middle/message/Message.scss | 4 +- src/components/middle/message/Message.tsx | 70 ++++++++------- .../middle/message/MessageMeta.scss | 11 --- .../middle/message/_message-content.scss | 90 +++++++++++++++---- 5 files changed, 114 insertions(+), 75 deletions(-) diff --git a/src/components/middle/message/Album.scss b/src/components/middle/message/Album.scss index 1feb37d89..b23b8f92f 100644 --- a/src/components/middle/message/Album.scss +++ b/src/components/middle/message/Album.scss @@ -15,20 +15,6 @@ margin: -0.3125rem -0.5rem 0.3125rem -0.625rem; } - .forwarded-message & { - margin-bottom: 0.125rem; - - .message-content.media.text & { - margin: 0 0 0.3125rem; - --border-bottom-left-radius: inherit; - --border-bottom-right-radius: inherit; - - + .message-paid-media-status { - margin-right: 0; - } - } - } - &, .message-content.media.text & { > .album-item-select-wrapper .media-inner { diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index 89ac29e00..bf8bbb0d6 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -646,7 +646,7 @@ .message-content { &.has-replies:not(.custom-shape), - &.has-footer:not(.web-page):not(.is-forwarded) { + &.has-footer:not(.web-page) { .media-inner, .Album { --border-bottom-left-radius: 0; @@ -654,7 +654,7 @@ } } - &.text.is-inverted-media:not(.is-forwarded) { + &.text.is-inverted-media { .Album, .media-inner { --border-top-left-radius: 0; diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index fc7c895d8..f31ac1106 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -927,13 +927,13 @@ const Message: FC = ({ calculatedWidth = Math.max( getMinMediaWidth(text?.text, isMediaWithCommentButton), albumLayout.containerStyle.width, ); - if (!asForwarded && calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) { + if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) { noMediaCorners = true; } } if (calculatedWidth) { - style = `width: ${calculatedWidth + extraPadding}px`; + style = `width: ${calculatedWidth}px`; reactionsMaxWidth = calculatedWidth + EXTRA_SPACE_FOR_REACTIONS; } else if (sticker && !hasSubheader) { const { width } = getStickerDimensions(sticker, isMobile); @@ -1058,7 +1058,7 @@ const Message: FC = ({ noMediaCorners && 'no-media-corners', ); const hasCustomAppendix = isLastInGroup - && (!hasText || (isInvertedMedia && !hasFactCheck && !hasReactions)) && !asForwarded && !withCommentButton; + && (!hasText || (isInvertedMedia && !hasFactCheck && !hasReactions)) && !withCommentButton; const textContentClass = buildClassName( 'text-content', 'clearfix', @@ -1467,40 +1467,48 @@ const Message: FC = ({ {(senderTitle || asForwarded) ? ( - {asForwarded && ( - - )} - {asForwarded && ( - - {lang('ForwardedFrom')} + + {asForwarded && ( + + )} + {asForwarded && ( + + {lang('ForwardedFrom')} + + )} + + + {storyData && } + {shouldRenderForwardAvatar && ( + + )} + + {senderTitle ? renderText(senderTitle) : (asForwarded ? NBSP : undefined)} - )} - {storyData && } - {shouldRenderForwardAvatar && ( - - )} - {senderTitle ? renderText(senderTitle) : (asForwarded ? NBSP : undefined)} - {!asForwarded && senderEmojiStatus && ( - - )} - {!asForwarded && !senderEmojiStatus && senderIsPremium && } - {senderPeer?.fakeType && } + {!asForwarded && senderEmojiStatus && ( + + )} + {!asForwarded && !senderEmojiStatus && senderIsPremium && } + {senderPeer?.fakeType && } + ) : !botSender ? ( NBSP diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index 34acc22ee..aa65e8df6 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -133,17 +133,6 @@ padding: 0 0.375rem 0 0.3125rem; } - .is-forwarded.media.no-footer:dir(rtl) &, - .Message .is-forwarded.custom-shape:dir(rtl) & { - left: 0.8125rem; - } - - .is-forwarded.media.no-footer & { - bottom: 0.9375rem; - right: 0.8125rem; - max-width: calc(100% - 2.25rem); - } - .Message.own .has-solid-background & { color: var(--color-message-meta-own); } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index e42dd6f0f..a89ff7c9f 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -285,12 +285,33 @@ color: var(--accent-color); unicode-bidi: plaintext; display: flex; + user-select: none; + .forward-title-container, + .message-title-name-container, .message-title-name { display: flex; align-items: center; } + .message-title-name-container { + flex-wrap: wrap; + } + + .forward-title-container, + .message-title-name { + white-space: nowrap; + } + + .message-title-name { + max-width: 100%; + } + + .sender-title { + overflow: hidden; + text-overflow: ellipsis; + } + .forward-title { font-weight: normal; margin-right: 0.25rem; @@ -306,19 +327,21 @@ unicode-bidi: plaintext; } - &.interactive, - & > .interactive { - cursor: var(--custom-cursor, pointer); - - &:hover { - opacity: 0.85; - } - } - .sender-hidden { font-weight: normal; } + &.interactive, + & > .interactive { + .sender-title { + cursor: var(--custom-cursor, pointer); + + &:hover { + opacity: 0.85; + } + } + } + & + .File { margin-top: 0.25rem; } @@ -593,6 +616,10 @@ } } + &.is-forwarded.text .media-inner { + margin-top: 0; + } + &.text .media-inner { margin-top: -0.3125rem; } @@ -723,7 +750,7 @@ } .message-content.story { - max-width: 13.625rem; + max-width: 12rem; } .message-content.custom-shape { @@ -886,7 +913,6 @@ .forwarded-message { .message-content.contact &, - .message-content.voice &, .message-content.poll &, .message-content.giveaway & { // MessageOutgoingStatus's icon needs more space @@ -898,14 +924,44 @@ margin-top: 0.25rem; } - --border-top-left-radius: var(--border-radius-messages-small); - --border-top-right-radius: var(--border-radius-messages-small); - --border-bottom-left-radius: var(--border-radius-messages-small); - --border-bottom-right-radius: var(--border-radius-messages-small); + --border-top-left-radius: 0; + --border-top-right-radius: 0; + .has-footer & { + --border-bottom-left-radius: 0; + --border-bottom-right-radius: 0; + } + + .Album, .media-inner:not(.file-preview) { - margin: 0 !important; - margin-bottom: 0.25rem !important; + margin-left: -0.5rem; + margin-right: -0.5rem; + + body.is-ios .Message.own & { + margin-left: -0.625rem; + } + + :not(.has-footer) & { + margin-bottom: -0.375rem; + + body.is-ios .Message.own & { + margin-bottom: -0.4375rem; + } + } + } + + .Album { + margin-bottom: 0.125rem; + + .message-content.media.text & { + margin-top: 0.25rem; + --border-bottom-left-radius: inherit; + --border-bottom-right-radius: inherit; + + + .message-paid-media-status { + margin-right: 0; + } + } } }