From d15258a253b25775d2cd6867ac2dbfbce5b018a5 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 17 Oct 2022 17:34:53 +0200 Subject: [PATCH] Message List: Use Pattern Color more (#2047) --- src/components/middle/MessageList.scss | 22 ++++++++++++++++- src/components/middle/MessageList.tsx | 3 +++ src/components/middle/MiddleColumn.tsx | 1 + .../middle/message/CommentButton.scss | 11 ++++++--- .../middle/message/InlineButtons.scss | 24 +++++-------------- src/components/middle/message/Message.scss | 11 ++++++--- .../middle/message/MessageMeta.scss | 10 +++++++- .../middle/message/_message-content.scss | 4 ++++ 8 files changed, 60 insertions(+), 26 deletions(-) diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 79142b4b8..28abf8759 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -139,7 +139,7 @@ left: -50vw; right: -50vw; background: black; - z-index: -1; + z-index: 0; opacity: 0; transition: opacity var(--select-transition); @@ -180,6 +180,24 @@ } } + html.theme-light &.with-default-bg { + .Message, + .ActionMessage { + &::before { + background: var(--pattern-color); + } + + &.focused, + &.is-forwarding, + &.is-selected, + &.has-menu-open { + &::before { + opacity: 0.55; + } + } + } + } + > .empty { width: 100%; height: 100%; @@ -243,6 +261,8 @@ padding: 0 0.5rem; border-radius: var(--border-radius-messages); word-break: break-word; + position: relative; + z-index: 0; body.is-ios &, body.is-macos & { diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index c328093f4..2ef05359b 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -77,6 +77,7 @@ type OwnProps = { onNotchToggle: (shouldShow: boolean) => void; hasTools?: boolean; withBottomShift?: boolean; + withDefaultBg: boolean; }; type StateProps = { @@ -151,6 +152,7 @@ const MessageList: FC = ({ hasLinkedChat, lastSyncTime, withBottomShift, + withDefaultBg, }) => { const { loadViewportMessages, setScrollOffset, loadSponsoredMessages, loadMessageReactions, copyMessagesByIds, @@ -522,6 +524,7 @@ const MessageList: FC = ({ !canPost && 'no-composer', type === 'pinned' && 'type-pinned', withBottomShift && 'with-bottom-shift', + withDefaultBg && 'with-default-bg', isSelectModeActive && 'select-mode-active', isScrolled && 'scrolled', !isReady && 'is-animating', diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 3d0ec3943..9a432200b 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -429,6 +429,7 @@ const MiddleColumn: FC = ({ onNotchToggle={setIsNotchShown} isReady={isReady} withBottomShift={withMessageListBottomShift} + withDefaultBg={Boolean(!customBackground && !backgroundColor)} />
{renderingCanPost && ( diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 795bc50a2..7c9c840fb 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -56,17 +56,22 @@ padding: 0.375rem 0.3125rem 0.25rem; align-items: flex-start; color: white; - background-color: rgba(0, 0, 0, 0.2); + background-color: var(--pattern-color); opacity: 0; - transition: opacity 0.2s ease; + transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; @media (pointer: coarse) { opacity: 1 !important; } &:hover { - background-color: rgba(0, 0, 0, 0.28); + background-color: var(--pattern-color); + backdrop-filter: brightness(115%); + + @supports not (backdrop-filter: brightness(115%)) { + filter: brightness(115%); + } } .Message:hover & { diff --git a/src/components/middle/message/InlineButtons.scss b/src/components/middle/message/InlineButtons.scss index f47b061df..c7dfab1b5 100644 --- a/src/components/middle/message/InlineButtons.scss +++ b/src/components/middle/message/InlineButtons.scss @@ -17,27 +17,15 @@ border-radius: var(--border-radius-messages-small); font-weight: 500; text-transform: none; + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms; - &::before { - content: ""; - background-color: var(--color-white); - opacity: 0; - - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: var(--border-radius-messages-small); - z-index: var(--z-below); - transition: opacity 200ms; - } - - &:hover { + &:hover, + &:focus { background: var(--pattern-color) !important; + backdrop-filter: brightness(115%); - &::before { - opacity: 0.4; + @supports not (backdrop-filter: brightness(115%)) { + filter: brightness(115%); } } diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index f04888640..e5a4e6771 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -616,10 +616,10 @@ position: absolute; bottom: 0; color: white; - background-color: rgba(0, 0, 0, 0.2); + background-color: var(--pattern-color); opacity: 0; - transition: opacity 0.2s ease; + transition: opacity 150ms, backdrop-filter 150ms, filter 150ms; @media (pointer: coarse) { opacity: 1 !important; @@ -628,7 +628,12 @@ &:hover, &:active, &:focus { - background-color: rgba(0, 0, 0, 0.28) !important; + background-color: var(--pattern-color) !important; + backdrop-filter: brightness(115%); + + @supports not (backdrop-filter: brightness(115%)) { + filter: brightness(115%); + } } } diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index f4d677c20..6413c065a 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -62,7 +62,6 @@ .media:not(.text) &, .Message .custom-shape &, .Message .invoice & { - background: rgba(0, 0, 0, 0.2); --color-accent-own: white; --color-accent: white; color: white !important; @@ -78,6 +77,15 @@ } } + .media:not(.text) &, + .Message .invoice & { + background: rgba(0, 0, 0, 0.2); + } + + .Message .custom-shape & { + background: var(--pattern-color); + } + .voice &[dir="rtl"] { right: auto !important; left: 0.25rem; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 0da949bb7..f18283f72 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -631,6 +631,10 @@ } } + .message-media-duration { + background: var(--pattern-color); + } + .text-content { margin-bottom: 1rem; }