diff --git a/src/components/left/main/Badge.tsx b/src/components/left/main/Badge.tsx index 2aff39634..e56781c01 100644 --- a/src/components/left/main/Badge.tsx +++ b/src/components/left/main/Badge.tsx @@ -18,10 +18,11 @@ type OwnProps = { isPinned?: boolean; isMuted?: boolean; shouldShowOnlyMostImportant?: boolean; + forceHidden?: boolean; }; const Badge: FC = ({ - topic, chat, isPinned, isMuted, shouldShowOnlyMostImportant, wasTopicOpened, + topic, chat, isPinned, isMuted, shouldShowOnlyMostImportant, wasTopicOpened, forceHidden, }) => { const { unreadMentionsCount = 0, unreadReactionsCount = 0, @@ -50,7 +51,7 @@ const Badge: FC = ({ const hasUnreadMark = topic ? false : chat.hasUnreadMark; - const isShown = Boolean( + const isShown = !forceHidden && Boolean( unreadCount || unreadMentionsCount || hasUnreadMark || isPinned || unreadReactionsCount || isTopicUnopened, ); diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 55856364f..1a4d55dce 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -15,12 +15,12 @@ &.animate-opacity { will-change: opacity; - transition: opacity 0.2s ease-out; + transition: opacity 250ms ease; } &.animate-transform { will-change: transform; - transition: transform 0.2s ease-out; + transition: transform 250ms ease; } &:hover, @@ -175,28 +175,19 @@ right: 0.5rem; z-index: 2; - transition-duration: 0.25s; - transition-timing-function: cubic-bezier(0.16,1.25,0.64,1); - transition-property: opacity, transform; - opacity: 0; - transform: scale(0); - --outline-color: var(--color-background); .Badge { box-shadow: 0 0 0 2px var(--outline-color); } - } - .status-badge-wrapper-visible { - opacity: 1; - transform: scale(1); + .Badge-transition { + transition: opacity 250ms ease, transform 250ms ease; // Same as Forum Panel + } } .info { - transition-duration: 0.25s; - transition-property: ease-in-out; - transition-property: opacity, transform; + transition: opacity 250ms ease, transform 250ms ease; // Same as Forum Panel .subtitle { margin-top: -0.125rem; diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index 014eeef5a..f4c354fe3 100644 --- a/src/components/left/main/Chat.tsx +++ b/src/components/left/main/Chat.tsx @@ -1,6 +1,6 @@ import type { FC } from '../../../lib/teact/teact'; import React, { - memo, useCallback, useEffect, useRef, + memo, useCallback, useEffect, useLayoutEffect, useRef, } from '../../../lib/teact/teact'; import { getActions, withGlobal } from '../../../global'; @@ -234,7 +234,7 @@ const Chat: FC = ({ } // Animate changing to smaller chat size when navigating to/from forum topic list - useEffect(() => { + useLayoutEffect(() => { const current = ref.current; if (current && isAnimatingRef.current && isForumPanelActive !== prevIsForumPanelActive) { @@ -288,12 +288,8 @@ const Chat: FC = ({ withVideo observeIntersection={observeIntersection} /> -
- +
+
{chat.isCallActive && chat.isCallNotEmpty && ( diff --git a/src/components/left/main/ForumPanel.module.scss b/src/components/left/main/ForumPanel.module.scss index 173bc81dc..5ebf02b07 100644 --- a/src/components/left/main/ForumPanel.module.scss +++ b/src/components/left/main/ForumPanel.module.scss @@ -18,7 +18,7 @@ border-right: 1px solid var(--color-borders); } - transition: transform var(--slide-transition); + transition: transform 250ms ease; // Same as `.Chat > .info` transform: translate3d(100%, 0, 0); :global(.chat-list) { @@ -39,15 +39,17 @@ position: static !important; } -.border-bottom { +.notch { width: 100%; height: 0; - transition: 0.1s ease-out border-color; - border-bottom: 0.0625rem solid transparent; + border-bottom: 0.0625rem solid var(--color-borders); + + transition: 0.1s ease opacity; + opacity: 0; } -.scrolled .border-bottom { - border-color: var(--color-borders); +.scrolled .notch { + opacity: 1; } .scroll-top-handler { diff --git a/src/components/left/main/ForumPanel.tsx b/src/components/left/main/ForumPanel.tsx index 84b68bee1..77b2b0b54 100644 --- a/src/components/left/main/ForumPanel.tsx +++ b/src/components/left/main/ForumPanel.tsx @@ -13,7 +13,6 @@ import { } from '../../../config'; import { selectChat, selectCurrentMessageList } from '../../../global/selectors'; import buildClassName from '../../../util/buildClassName'; -import { fastRaf } from '../../../util/schedulers'; import { getOrderedTopics } from '../../../global/helpers'; import captureEscKeyListener from '../../../util/captureEscKeyListener'; import { waitForTransitionEnd } from '../../../util/cssAnimationEndListeners'; @@ -135,16 +134,13 @@ const ForumPanel: FC = ({ dispatchHeavyAnimationStop(); }); - // For performance reasons, we delay animation of the topic list panel to the next animation frame - fastRaf(() => { - if (isVisible) { - shouldRenderRef.current = true; - ref.current!.style.transform = 'none'; - } else { - shouldRenderRef.current = false; - ref.current!.style.transform = ''; - } - }); + if (isVisible) { + shouldRenderRef.current = true; + ref.current!.style.transform = 'none'; + } else { + shouldRenderRef.current = false; + ref.current!.style.transform = ''; + } } }, [isVisible, prevIsVisible]); @@ -212,7 +208,7 @@ const ForumPanel: FC = ({ {chat && } -
+
= ({ children, noCloseTransition, }) => { + const prevIsOpen = usePrevious(isOpen); + const prevChildren = usePrevious(children); + const fromChildrenRef = useRef(); + const isFirstRender = prevIsOpen === undefined; const { shouldRender, transitionClassNames, } = useShowTransition( - isOpen && !isHidden, undefined, undefined, isCustom ? false : undefined, noCloseTransition, + isOpen && !isHidden, undefined, isFirstRender, isCustom ? false : undefined, noCloseTransition, ); - const prevIsOpen = usePrevious(isOpen); - const prevChildren = usePrevious(children); - const fromChildrenRef = useRef(); if (prevIsOpen && !isOpen) { fromChildrenRef.current = prevChildren;