From 48b722939bbff3b187e0d5137129ffbf75840afc Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Sun, 22 Feb 2026 23:43:53 +0100 Subject: [PATCH] Action Message: Add blur background (#6691) --- src/assets/localization/fallback.strings | 3 ++- src/components/left/main/LeftSideMenuItems.tsx | 2 +- .../left/settings/SettingsPerformance.tsx | 1 + .../middle/ContactGreeting.module.scss | 6 ++++-- src/components/middle/MessageList.scss | 8 ++++---- src/components/middle/NoMessages.scss | 4 +++- .../RequirementToContactMessage.module.scss | 9 +++++---- .../middle/message/ActionMessage.module.scss | 14 +++++++++----- .../middle/message/CommentButton.scss | 15 +++++++-------- .../middle/message/InlineButtons.module.scss | 12 +++++------- src/components/middle/message/Message.scss | 4 +++- src/components/middle/message/MessageMeta.scss | 4 +++- .../middle/message/_message-content.scss | 4 +++- .../actions/StarGiftPurchaseOffer.module.scss | 11 +++-------- .../middle/message/reactions/Reactions.scss | 6 ++++++ src/global/cache.ts | 4 ++++ src/global/initialState.ts | 3 +++ src/styles/_mixins.scss | 18 ++++++++++++++++++ src/types/index.ts | 6 +++--- src/types/language.d.ts | 3 ++- src/util/perfomanceSettings.ts | 2 ++ 21 files changed, 91 insertions(+), 48 deletions(-) diff --git a/src/assets/localization/fallback.strings b/src/assets/localization/fallback.strings index 4c2c720d2..0606d9f6c 100644 --- a/src/assets/localization/fallback.strings +++ b/src/assets/localization/fallback.strings @@ -686,6 +686,7 @@ "SettingsPerformanceComposer" = "Message Composer Animations"; "SettingsPerformanceContextAnimation" = "Context Menu Animation"; "SettingsPerformanceContextBlur" = "Context Menu Blur"; +"SettingsPerformanceMessageBlur" = "Message Blur"; "SettingsPerformanceRightColumn" = "Right Column Animation"; "SettingsPerformanceThanos" = "Dust-effect deletion"; "SettingsPerformanceAnimatedEmoji" = "Allow Animated Emoji"; @@ -1458,7 +1459,7 @@ "AriaMenuEnableNightMode" = "Enable night mode"; "AriaMenuDisableNightMode" = "Disable night mode"; "AriaSettingsEditProfilePhoto" = "Edit profile photo"; -"MenuAnimationsSwitch" = "Animations"; +"MenuUIFeaturesSwitch" = "UI Features"; "MenuTelegramFeatures" = "Telegram Features"; "TelegramFeaturesUsername" = "TelegramTips"; "RemoveEffect" = "Remove effect"; diff --git a/src/components/left/main/LeftSideMenuItems.tsx b/src/components/left/main/LeftSideMenuItems.tsx index fbf6fc9e4..3e7c8ffe1 100644 --- a/src/components/left/main/LeftSideMenuItems.tsx +++ b/src/components/left/main/LeftSideMenuItems.tsx @@ -222,7 +222,7 @@ const LeftSideMenuItems = ({ icon="animations" onClick={handleAnimationLevelChange} > - {lang('MenuAnimationsSwitch')} + {lang('MenuUIFeaturesSwitch')} diff --git a/src/components/left/settings/SettingsPerformance.tsx b/src/components/left/settings/SettingsPerformance.tsx index 382c99285..242e34308 100644 --- a/src/components/left/settings/SettingsPerformance.tsx +++ b/src/components/left/settings/SettingsPerformance.tsx @@ -61,6 +61,7 @@ const PERFORMANCE_OPTIONS: PerformanceSection[] = [ { key: 'messageComposerAnimations', label: 'SettingsPerformanceComposer' }, { key: 'contextMenuAnimations', label: 'SettingsPerformanceContextAnimation' }, { key: 'contextMenuBlur', label: 'SettingsPerformanceContextBlur', disabled: !IS_BACKDROP_BLUR_SUPPORTED }, + { key: 'messageBlur', label: 'SettingsPerformanceMessageBlur', disabled: !IS_BACKDROP_BLUR_SUPPORTED }, { key: 'rightColumnAnimations', label: 'SettingsPerformanceRightColumn' }, { key: 'snapEffect', label: 'SettingsPerformanceThanos' }, ]], diff --git a/src/components/middle/ContactGreeting.module.scss b/src/components/middle/ContactGreeting.module.scss index 421fdd198..66f5fa673 100644 --- a/src/components/middle/ContactGreeting.module.scss +++ b/src/components/middle/ContactGreeting.module.scss @@ -1,3 +1,5 @@ +@use "../../styles/mixins"; + .root { display: flex; flex-direction: column; @@ -21,7 +23,7 @@ color: #fff; - background: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); } .explainer { @@ -33,7 +35,7 @@ color: #fff; text-wrap: balance; - background: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); } .title { diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 176dec950..6aa6f3650 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -1,3 +1,5 @@ +@use "../../styles/mixins"; + .MessageList { overflow-x: hidden; overflow-y: scroll; @@ -186,7 +188,7 @@ .Message, .ActionMessage { &::before { - background-color: var(--action-message-bg); + @include mixins.action-message-bg; } &.focused, @@ -228,12 +230,10 @@ > span { position: relative; z-index: 0; - border-radius: var(--border-radius-messages); - color: white; - background-color: var(--action-message-bg); + @include mixins.action-message-bg; body.is-ios &, body.is-macos & { diff --git a/src/components/middle/NoMessages.scss b/src/components/middle/NoMessages.scss index 84acbf322..1e2743add 100644 --- a/src/components/middle/NoMessages.scss +++ b/src/components/middle/NoMessages.scss @@ -1,3 +1,5 @@ +@use "../../styles/mixins"; + .NoMessages { display: flex; align-items: center; @@ -29,7 +31,7 @@ color: #fff; - background: var(--action-message-bg); + @include mixins.action-message-bg; &[dir="rtl"] { text-align: right; diff --git a/src/components/middle/RequirementToContactMessage.module.scss b/src/components/middle/RequirementToContactMessage.module.scss index 3da8d8f46..d5b4e1278 100644 --- a/src/components/middle/RequirementToContactMessage.module.scss +++ b/src/components/middle/RequirementToContactMessage.module.scss @@ -1,3 +1,5 @@ +@use "../../styles/mixins"; + .root { display: flex; align-items: center; @@ -17,13 +19,12 @@ color: var(--color-white); text-transform: none; - background: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); transition: filter 150ms ease-in-out; &:not(.disabled):not(:disabled):hover { - background-color: var(--action-message-bg); - filter: brightness(1.05); + opacity: 0.85; } } } @@ -37,7 +38,7 @@ padding: 1.0625rem 0; border-radius: 1.5rem; - background: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); &[dir="rtl"] { text-align: right; diff --git a/src/components/middle/message/ActionMessage.module.scss b/src/components/middle/message/ActionMessage.module.scss index e39915f65..73a9f69e1 100644 --- a/src/components/middle/message/ActionMessage.module.scss +++ b/src/components/middle/message/ActionMessage.module.scss @@ -1,3 +1,5 @@ +@use "../../../styles/mixins"; + .root { display: grid; grid-template-columns: minmax(0, 1fr); @@ -28,7 +30,7 @@ color: white; - background-color: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); } .textContent { @@ -43,7 +45,7 @@ color: white; - background-color: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); } .hasFullContent { @@ -120,6 +122,7 @@ .textContent { background-color: transparent !important; + backdrop-filter: none !important; } } @@ -156,7 +159,7 @@ font-weight: var(--font-weight-semibold); - background-color: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); transition: opacity 0.15s; @@ -193,7 +196,7 @@ border-radius: calc(var(--border-radius-messages) + 0.25rem); - background: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); } } @@ -298,7 +301,8 @@ padding: 1.25rem; border-radius: 50%; font-size: 2.5rem; - background-color: var(--action-message-bg); + + @include mixins.action-message-bg($isModule: true); } .botForumTopicTitle { diff --git a/src/components/middle/message/CommentButton.scss b/src/components/middle/message/CommentButton.scss index 5cb970081..ea864f1ab 100644 --- a/src/components/middle/message/CommentButton.scss +++ b/src/components/middle/message/CommentButton.scss @@ -1,3 +1,5 @@ +@use "../../../styles/mixins"; + .CommentButton { --background-color: var(--color-background); --hover-color: var(--color-chat-hover); @@ -66,7 +68,8 @@ color: white; opacity: 0; - background-color: var(--pattern-color); + + @include mixins.action-message-bg; &::after { content: attr(data-cnt); @@ -84,16 +87,12 @@ } &:hover { - background-color: var(--pattern-color); - backdrop-filter: brightness(115%); - - @supports not (backdrop-filter: brightness(115%)) { - filter: brightness(115%); - } + opacity: 0.85; + background-color: var(--action-message-bg); } &.disabled { - background-color: var(--pattern-color); + background-color: var(--action-message-bg); } .Message:hover &, &.loading { diff --git a/src/components/middle/message/InlineButtons.module.scss b/src/components/middle/message/InlineButtons.module.scss index 988bc29e4..94b3af16f 100644 --- a/src/components/middle/message/InlineButtons.module.scss +++ b/src/components/middle/message/InlineButtons.module.scss @@ -1,3 +1,5 @@ +@use "../../../styles/mixins"; + .root { display: flex; flex-direction: column; @@ -16,9 +18,9 @@ font-weight: var(--font-weight-medium); line-height: 1.25; - background-color: var(--action-message-bg); + @include mixins.action-message-bg($isModule: true); - transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms; + transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms, opacity 150ms; &::before { content: ''; @@ -38,12 +40,8 @@ &:active, &:hover, &:focus { + opacity: 0.85; background-color: var(--action-message-bg) !important; - backdrop-filter: brightness(115%); - - @supports not (backdrop-filter: brightness(115%)) { - filter: brightness(115%); - } } &:first-of-type { diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss index c974b338e..b1502592e 100644 --- a/src/components/middle/message/Message.scss +++ b/src/components/middle/message/Message.scss @@ -1,4 +1,5 @@ @use "message-content"; +@use "../../../styles/mixins"; // General styles .Message { @@ -752,7 +753,8 @@ border-radius: 1.125rem; opacity: 0; - background-color: var(--action-message-bg); + + @include mixins.action-message-bg; transition: opacity 150ms; diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index 8904b5d9d..f3108e4b4 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -1,3 +1,5 @@ +@use "../../../styles/mixins"; + .MessageMeta { cursor: var(--custom-cursor, pointer); user-select: none; @@ -137,7 +139,7 @@ } .Message .custom-shape & { - background: var(--action-message-bg); + @include mixins.action-message-bg; } .voice &[dir="rtl"] { diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index baca3d26f..862f9c0fc 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "../../../styles/icons"; +@use "../../../styles/mixins"; @mixin subheader-styles() { overflow: hidden; @@ -12,7 +13,8 @@ font-size: calc(var(--message-text-size, 1rem) - 0.125rem); - background-color: var(--action-message-bg); + @include mixins.action-message-bg; + box-shadow: 0 1px 2px var(--color-default-shadow); @media (max-width: 600px) { diff --git a/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss b/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss index 29d589a5f..45a45a1d0 100644 --- a/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss +++ b/src/components/middle/message/actions/StarGiftPurchaseOffer.module.scss @@ -8,16 +8,11 @@ &.clickable { cursor: var(--custom-cursor, pointer); - transition: background-color 150ms, backdrop-filter 150ms, filter 150ms; + transition: background-color 150ms, backdrop-filter 150ms, filter 150ms, opacity 150ms; - &:hover, - &:focus { + &:hover { + opacity: 0.85; background: var(--action-message-bg) !important; - backdrop-filter: brightness(115%); - - @supports not (backdrop-filter: brightness(115%)) { - filter: brightness(115%); - } } } } diff --git a/src/components/middle/message/reactions/Reactions.scss b/src/components/middle/message/reactions/Reactions.scss index 13fd245dc..9d7810b79 100644 --- a/src/components/middle/message/reactions/Reactions.scss +++ b/src/components/middle/message/reactions/Reactions.scss @@ -1,3 +1,5 @@ +@use "../../../../styles/mixins"; + .Reactions { overflow: visible; display: flex; @@ -12,6 +14,10 @@ &.is-outside { margin-top: 0.25rem; + + .message-reaction { + @include mixins.action-message-bg($noBackground: true); + } } .is-forwarded.is-inverted-media & { diff --git a/src/global/cache.ts b/src/global/cache.ts index 496b4794f..4d2e2ee38 100644 --- a/src/global/cache.ts +++ b/src/global/cache.ts @@ -353,6 +353,10 @@ function unsafeMigrateCache(cached: GlobalState, initialState: GlobalState) { cachedSharedSettings.performance = INITIAL_PERFORMANCE_STATE_MED; } + if (cachedSharedSettings.performance.messageBlur === undefined) { + cachedSharedSettings.performance.messageBlur = false; + } + if (!cachedSharedSettings.foldersPosition) { cachedSharedSettings.foldersPosition = FOLDERS_POSITION_DEFAULT; } diff --git a/src/global/initialState.ts b/src/global/initialState.ts index b755fcd41..4e1374634 100644 --- a/src/global/initialState.ts +++ b/src/global/initialState.ts @@ -19,6 +19,7 @@ import { IS_IOS, IS_MAC_OS } from '../util/browser/windowEnvironment'; import { DEFAULT_APP_CONFIG } from '../limits'; export const INITIAL_PERFORMANCE_STATE_MAX: PerformanceType = { + messageBlur: true, animatedEmoji: true, autoplayGifs: true, autoplayVideos: true, @@ -37,6 +38,7 @@ export const INITIAL_PERFORMANCE_STATE_MAX: PerformanceType = { }; export const INITIAL_PERFORMANCE_STATE_MED: PerformanceType = { + messageBlur: false, animatedEmoji: true, autoplayGifs: true, autoplayVideos: true, @@ -55,6 +57,7 @@ export const INITIAL_PERFORMANCE_STATE_MED: PerformanceType = { }; export const INITIAL_PERFORMANCE_STATE_MIN: PerformanceType = { + messageBlur: false, animatedEmoji: false, autoplayGifs: false, autoplayVideos: false, diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ee80525a1..0f6d9f6b6 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -256,3 +256,21 @@ @include chat-pattern-styles($path); } } + +@mixin action-message-bg($isModule: false, $noBackground: false) { + @if not $noBackground { + background-color: var(--action-message-bg); + } + + @if $isModule { + :global(body.with-message-blur) & { + backdrop-filter: blur(4px); + } + } + + @else { + body.with-message-blur & { + backdrop-filter: blur(4px); + } + } +} diff --git a/src/types/index.ts b/src/types/index.ts index fe8183128..f064f731e 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -103,9 +103,9 @@ export type AnimationLevel = 0 | 1 | 2; export type FoldersPosition = 'top' | 'left'; export type PerformanceTypeKey = ( 'pageTransitions' | 'messageSendingAnimations' | 'mediaViewerAnimations' - | 'messageComposerAnimations' | 'contextMenuAnimations' | 'contextMenuBlur' | 'rightColumnAnimations' - | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects' | 'autoplayGifs' | 'autoplayVideos' - | 'storyRibbonAnimations' | 'snapEffect' + | 'messageComposerAnimations' | 'contextMenuAnimations' | 'contextMenuBlur' | 'messageBlur' + | 'rightColumnAnimations' | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects' + | 'autoplayGifs' | 'autoplayVideos' | 'storyRibbonAnimations' | 'snapEffect' ); export type PerformanceType = Record; diff --git a/src/types/language.d.ts b/src/types/language.d.ts index fe287703e..254dfcded 100644 --- a/src/types/language.d.ts +++ b/src/types/language.d.ts @@ -608,6 +608,7 @@ export interface LangPair { 'SettingsPerformanceComposer': undefined; 'SettingsPerformanceContextAnimation': undefined; 'SettingsPerformanceContextBlur': undefined; + 'SettingsPerformanceMessageBlur': undefined; 'SettingsPerformanceRightColumn': undefined; 'SettingsPerformanceThanos': undefined; 'SettingsPerformanceAnimatedEmoji': undefined; @@ -1243,7 +1244,7 @@ export interface LangPair { 'AriaMenuEnableNightMode': undefined; 'AriaMenuDisableNightMode': undefined; 'AriaSettingsEditProfilePhoto': undefined; - 'MenuAnimationsSwitch': undefined; + 'MenuUIFeaturesSwitch': undefined; 'MenuTelegramFeatures': undefined; 'TelegramFeaturesUsername': undefined; 'RemoveEffect': undefined; diff --git a/src/util/perfomanceSettings.ts b/src/util/perfomanceSettings.ts index 55010059c..6609752cc 100644 --- a/src/util/perfomanceSettings.ts +++ b/src/util/perfomanceSettings.ts @@ -8,6 +8,7 @@ export function applyPerformanceSettings(performanceType: PerformanceType) { messageComposerAnimations, contextMenuAnimations, contextMenuBlur, + messageBlur, rightColumnAnimations, } = performanceType; @@ -19,5 +20,6 @@ export function applyPerformanceSettings(performanceType: PerformanceType) { root.classList.toggle('no-message-composer-animations', !messageComposerAnimations); root.classList.toggle('no-context-menu-animations', !contextMenuAnimations); root.classList.toggle('no-menu-blur', !contextMenuBlur); + root.classList.toggle('with-message-blur', messageBlur); root.classList.toggle('no-right-column-animations', !rightColumnAnimations); }