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);
}