Action Message: Add blur background (#6691)

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";

src/components/left/main/LeftSideMenuItems.tsx

@@ -222,7 +222,7 @@ const LeftSideMenuItems = ({
               icon="animations"
               onClick={handleAnimationLevelChange}
             >
-              <span className="menu-item-name capitalize">{lang('MenuAnimationsSwitch')}</span>
+              <span className="menu-item-name capitalize">{lang('MenuUIFeaturesSwitch')}</span>
               <Toggle value={animationLevelValue} />
             </MenuItem>
             <MenuSeparator />

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' },
   ]],

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 {

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 & {

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;

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);
+      opacity: 0.85;
-      filter: brightness(1.05);
     }
   }
 }
@@ -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;

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 {

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);
+      opacity: 0.85;
-      backdrop-filter: brightness(115%);
+      background-color: var(--action-message-bg);
-
-      @supports not (backdrop-filter: brightness(115%)) {
-        filter: brightness(115%);
-      }
     }
 
     &.disabled {
-      background-color: var(--pattern-color);
+      background-color: var(--action-message-bg);
     }
 
     .Message:hover &, &.loading {

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 {

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;
 

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"] {

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) {

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,
+    &:hover {
-    &:focus {
+      opacity: 0.85;
       background: var(--action-message-bg) !important;
-      backdrop-filter: brightness(115%);
-
-      @supports not (backdrop-filter: brightness(115%)) {
-        filter: brightness(115%);
-      }
     }
   }
 }

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 & {

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

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,

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

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'
+  | 'messageComposerAnimations' | 'contextMenuAnimations' | 'contextMenuBlur' | 'messageBlur'
-  | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects' | 'autoplayGifs' | 'autoplayVideos'
+  | 'rightColumnAnimations' | 'animatedEmoji' | 'loopAnimatedStickers' | 'reactionEffects' | 'stickerEffects'
-  | 'storyRibbonAnimations' | 'snapEffect'
+  | 'autoplayGifs' | 'autoplayVideos' | 'storyRibbonAnimations' | 'snapEffect'
 );
 export type PerformanceType = Record<PerformanceTypeKey, boolean>;
 

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;

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