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

Reaction Picker: Fix z-index (#6474)

Browse Source
This commit is contained in:
zubiden 2025-11-17 12:18:30 +04:00 committed by Alexander Zinchuk
parent a244d64670
commit aff179d666
4 changed files with 5 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/middle/message/MessageContextMenu.scss
View File

@ -7,11 +7,6 @@
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
padding: 0.5rem 0; padding: 0.5rem 0;
&-hidden {
opacity: 0;
transition: 300ms opacity;
}
} }
&.compact &_items { &.compact &_items {
@ -81,8 +76,3 @@
transform: translateY(calc(-100% - 0.5rem)); transform: translateY(calc(-100% - 0.5rem));
} }
} }
.ReactionSelector-hidden {
opacity: 0;
transition: 300ms opacity;
}

11
src/components/middle/message/MessageContextMenu.tsx
View File

@ -250,7 +250,6 @@ const MessageContextMenu: FC<OwnProps> = ({
const shouldShowGiftButton = isUserId(message.chatId) const shouldShowGiftButton = isUserId(message.chatId)
&& canGift && (isPremiumGift || isGiftCode || isStarGift || isStarGiftUnique); && canGift && (isPremiumGift || isGiftCode || isStarGift || isStarGiftUnique);
const [areItemsHidden, hideItems] = useFlag();
const [isReady, markIsReady, unmarkIsReady] = useFlag(); const [isReady, markIsReady, unmarkIsReady] = useFlag();
const { isMobile } = useAppLayout(); const { isMobile } = useAppLayout();
const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]); const seenByDatesCount = useMemo(() => (seenByDates ? Object.keys(seenByDates).length : 0), [seenByDates]);
@ -267,12 +266,6 @@ const MessageContextMenu: FC<OwnProps> = ({
onClose(); onClose();
}); });
useEffect(() => {
if (isOpen && areItemsHidden && !isReactionPickerOpen) {
onClose();
}
}, [onClose, isOpen, isReactionPickerOpen, areItemsHidden]);
useEffect(() => { useEffect(() => {
if (customEmojiSets?.length) { if (customEmojiSets?.length) {
customEmojiSets.map((customEmojiSet) => { customEmojiSets.map((customEmojiSet) => {
@ -348,7 +341,7 @@ const MessageContextMenu: FC<OwnProps> = ({
const handleOpenMessageReactionPicker = useLastCallback((position: IAnchorPosition) => { const handleOpenMessageReactionPicker = useLastCallback((position: IAnchorPosition) => {
onReactionPickerOpen!(position); onReactionPickerOpen!(position);
hideItems(); onClose();
}); });
return ( return (
@ -388,7 +381,6 @@ const MessageContextMenu: FC<OwnProps> = ({
canPlayAnimatedEmojis={canPlayAnimatedEmojis} canPlayAnimatedEmojis={canPlayAnimatedEmojis}
onShowMore={handleOpenMessageReactionPicker} onShowMore={handleOpenMessageReactionPicker}
onClose={onClose} onClose={onClose}
className={buildClassName(areItemsHidden && 'ReactionSelector-hidden')}
/> />
)} )}
@ -396,7 +388,6 @@ const MessageContextMenu: FC<OwnProps> = ({
ref={scrollableRef} ref={scrollableRef}
className={buildClassName( className={buildClassName(
'MessageContextMenu_items scrollable-content custom-scroll', 'MessageContextMenu_items scrollable-content custom-scroll',
areItemsHidden && 'MessageContextMenu_items-hidden',
)} )}
dir={lang.isRtl ? 'rtl' : undefined} dir={lang.isRtl ? 'rtl' : undefined}
> >

3
src/components/middle/message/reactions/ReactionPicker.module.scss
View File

@ -1,6 +1,5 @@
.menu { .menu {
position: absolute; z-index: var(--z-reaction-picker) !important;
z-index: var(--z-reaction-picker);
@media (max-width: 600px) { @media (max-width: 600px) {
right: 0 !important; right: 0 !important;

6
src/styles/_variables.scss
View File

@ -232,15 +232,15 @@ $color-message-story-mention-to: #74bcff;
--scrollbar-width: 0; --scrollbar-width: 0;
--z-overlay-effects: 10001; --z-overlay-effects: 12000;
--z-modal-confirm: 10000; --z-modal-confirm: 10500;
--z-reaction-picker: 10200;
--z-portal-menu: 10000; --z-portal-menu: 10000;
--z-symbol-menu-modal: 5000; --z-symbol-menu-modal: 5000;
--z-lock-screen: 3000; --z-lock-screen: 3000;
--z-ui-loader-mask: 2000; --z-ui-loader-mask: 2000;
--z-notification: 1700; --z-notification: 1700;
--z-confetti: 1600; --z-confetti: 1600;
--z-reaction-picker: 1200;
--z-story-viewer: 1150; --z-story-viewer: 1150;
--z-reaction-interaction-effect: 1100; --z-reaction-interaction-effect: 1100;
--z-right-column: 900; --z-right-column: 900;