ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Menu: Remove transparency in Firefox (#1730)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-02-27 18:29:37 +02:00
parent 86b636f941
commit cd04a2c689
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ui/Menu.scss
View File

@ -89,5 +89,9 @@
.footer { .footer {
background: none; background: none;
} }
&.no-blur .bubble {
background: var(--color-background);
}
} }
} }

9
src/components/ui/Menu.tsx
View File

@ -10,7 +10,7 @@ import buildClassName from '../../util/buildClassName';
import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'; import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
import useHistoryBack from '../../hooks/useHistoryBack'; import useHistoryBack from '../../hooks/useHistoryBack';
import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur'; import { preventMessageInputBlurWithBubbling } from '../middle/helpers/preventMessageInputBlur';
import { IS_COMPACT_MENU } from '../../util/environment'; import { IS_BACKDROP_BLUR_SUPPORTED, IS_COMPACT_MENU } from '../../util/environment';
import './Menu.scss'; import './Menu.scss';
@ -113,7 +113,12 @@ const Menu: FC<OwnProps> = ({
return ( return (
<div <div
className={buildClassName('Menu no-selection', !noCompact && IS_COMPACT_MENU && 'compact', className)} className={buildClassName(
'Menu no-selection',
!noCompact && IS_COMPACT_MENU && 'compact',
!IS_BACKDROP_BLUR_SUPPORTED && 'no-blur',
className,
)}
onKeyDown={isOpen ? handleKeyDown : undefined} onKeyDown={isOpen ? handleKeyDown : undefined}
onMouseEnter={onMouseEnter} onMouseEnter={onMouseEnter}
onMouseLeave={isOpen ? onMouseLeave : undefined} onMouseLeave={isOpen ? onMouseLeave : undefined}

2
src/util/environment.ts
View File

@ -86,6 +86,8 @@ export const DPR = window.devicePixelRatio || 1;
export const MASK_IMAGE_DISABLED = true; export const MASK_IMAGE_DISABLED = true;
export const IS_BACKDROP_BLUR_SUPPORTED = CSS.supports('backdrop-filter: blur()')
|| CSS.supports('-webkit-backdrop-filter: blur()');
export const IS_COMPACT_MENU = !IS_TOUCH_ENV; export const IS_COMPACT_MENU = !IS_TOUCH_ENV;
export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID; export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID;