From 5c14ed4e83f71f6edbfc63f459e14deede39d9e0 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Wed, 16 Aug 2023 15:27:46 +0200 Subject: [PATCH] Story Ribbon: Fix animation on iOS, refactoring --- src/components/left/ArchivedChats.scss | 17 +++----------- src/components/left/ArchivedChats.tsx | 11 ++++++--- src/components/left/main/ChatFolders.tsx | 30 +++++------------------- src/components/left/main/ChatList.tsx | 1 - src/components/left/main/LeftMain.scss | 17 -------------- src/components/story/StoryToggler.tsx | 3 ++- src/styles/_common.scss | 15 ++++++++++++ 7 files changed, 34 insertions(+), 60 deletions(-) diff --git a/src/components/left/ArchivedChats.scss b/src/components/left/ArchivedChats.scss index a58b81436..28f2e826a 100644 --- a/src/components/left/ArchivedChats.scss +++ b/src/components/left/ArchivedChats.scss @@ -44,22 +44,11 @@ } .chat-list-wrapper { - --story-ribbon-height: 5.5rem; - height: calc(100% - var(--header-height)); position: relative; + height: calc(100% - var(--header-height)); - &.shown { - transform: translateY(calc(var(--story-ribbon-height) * -1)); - height: calc(100% - var(--header-height) + var(--story-ribbon-height)); - transition: none; - } - - &.open, &.closing { - transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - } - - &.open { - transform: translateY(0); + &.with-story-ribbon { + --extra-height: var(--header-height); } } } diff --git a/src/components/left/ArchivedChats.tsx b/src/components/left/ArchivedChats.tsx index d8235a712..2536a1c53 100644 --- a/src/components/left/ArchivedChats.tsx +++ b/src/components/left/ArchivedChats.tsx @@ -1,7 +1,6 @@ +import type { FC } from '../../lib/teact/teact'; import React, { memo } from '../../lib/teact/teact'; import { getActions } from '../../global'; - -import type { FC } from '../../lib/teact/teact'; import type { LeftColumnContent, SettingsScreens } from '../../types'; import type { FolderEditDispatch } from '../../hooks/reducers/useFoldersReducer'; import type { GlobalState } from '../../global/types'; @@ -117,7 +116,13 @@ const ArchivedChats: FC = ({ )} -
+
{shouldRenderStoryRibbon && ( )} diff --git a/src/components/left/main/ChatFolders.tsx b/src/components/left/main/ChatFolders.tsx index bd237bdca..84b7d7e00 100644 --- a/src/components/left/main/ChatFolders.tsx +++ b/src/components/left/main/ChatFolders.tsx @@ -1,16 +1,17 @@ import type { FC } from '../../../lib/teact/teact'; import React, { - memo, useEffect, useLayoutEffect, useMemo, useRef, useState, + memo, useEffect, useMemo, useRef, } from '../../../lib/teact/teact'; import { getActions, getGlobal, withGlobal } from '../../../global'; import type { ApiChatFolder, ApiChatlistExportedInvite } from '../../../api/types'; -import type { SettingsScreens, LeftColumnContent } from '../../../types'; +import type { LeftColumnContent, SettingsScreens } from '../../../types'; import type { FolderEditDispatch } from '../../../hooks/reducers/useFoldersReducer'; import type { GlobalState } from '../../../global/types'; import type { TabWithProperties } from '../../ui/TabList'; +import TabList from '../../ui/TabList'; -import { ALL_FOLDER_ID, ANIMATION_END_DELAY } from '../../../config'; +import { ALL_FOLDER_ID } from '../../../config'; import { IS_TOUCH_ENV } from '../../../util/windowEnvironment'; import { MEMO_EMPTY_ARRAY } from '../../../util/memo'; import { captureEvents, SwipeDirection } from '../../../util/captureEvents'; @@ -26,9 +27,8 @@ import useHistoryBack from '../../../hooks/useHistoryBack'; import { useFolderManagerForUnreadCounters } from '../../../hooks/useFolderManager'; import Transition from '../../ui/Transition'; -import TabList from '../../ui/TabList'; -import ChatList from './ChatList'; import StoryRibbon from '../../story/StoryRibbon'; +import ChatList from './ChatList'; type OwnProps = { onSettingsScreenSelect: (screen: SettingsScreens) => void; @@ -56,7 +56,6 @@ type StateProps = { const SAVED_MESSAGES_HOTKEY = '0'; const FIRST_FOLDER_INDEX = 0; -const STORY_RIBBON_APPEARANCE_DURATION_MS = 200 + ANIMATION_END_DELAY; const ChatFolders: FC = ({ foldersDispatch, @@ -92,28 +91,11 @@ const ChatFolders: FC = ({ const transitionRef = useRef(null); const lang = useLang(); - const [isStoryRibbonAnimated, setIsStoryRibbonAnimated] = useState(false); useEffect(() => { loadChatFolders(); }, []); - useLayoutEffect(() => { - let timeoutId: number; - - if (isStoryRibbonShown) { - timeoutId = window.setTimeout(() => { - setIsStoryRibbonAnimated(true); - }, STORY_RIBBON_APPEARANCE_DURATION_MS); - } else { - setIsStoryRibbonAnimated(false); - } - - return () => { - window.clearTimeout(timeoutId); - }; - }, [isStoryRibbonShown]); - const { shouldRender: shouldRenderStoryRibbon, transitionClassNames: storyRibbonClassNames, @@ -327,7 +309,7 @@ const ChatFolders: FC = ({ className={buildClassName( 'ChatFolders', shouldRenderFolders && shouldHideFolderTabs && 'ChatFolders--tabs-hidden', - shouldRenderStoryRibbon && !isStoryRibbonAnimated && 'withStoryRibbon', + shouldRenderStoryRibbon && 'with-story-ribbon', storyRibbonClassNames, )} > diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx index f49a8ac6c..e68a29176 100644 --- a/src/components/left/main/ChatList.tsx +++ b/src/components/left/main/ChatList.tsx @@ -43,7 +43,6 @@ type OwnProps = { canDisplayArchive?: boolean; archiveSettings: GlobalState['archiveSettings']; isForumPanelOpen?: boolean; - isStoryRibbonShown?: boolean; className?: string; foldersDispatch: FolderEditDispatch; onSettingsScreenSelect: (screen: SettingsScreens) => void; diff --git a/src/components/left/main/LeftMain.scss b/src/components/left/main/LeftMain.scss index 0fbd15f07..bd38722d3 100644 --- a/src/components/left/main/LeftMain.scss +++ b/src/components/left/main/LeftMain.scss @@ -16,23 +16,6 @@ flex-direction: column; overflow: hidden; - &.withStoryRibbon { - --story-ribbon-height: 5.5rem; - &.shown { - transform: translateY(calc(var(--story-ribbon-height) * -1)); - height: calc(100% + var(--story-ribbon-height)); - transition: none; - } - - &.open, &.closing { - transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - } - - &.open { - transform: translateY(0); - } - } - .tabs-placeholder { height: 2.625rem; /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */ diff --git a/src/components/story/StoryToggler.tsx b/src/components/story/StoryToggler.tsx index 9cd0d2f71..3aeffdc8e 100644 --- a/src/components/story/StoryToggler.tsx +++ b/src/components/story/StoryToggler.tsx @@ -54,7 +54,8 @@ function StoryToggler({ }, [orderedUserIds]); useStoryPreloader(preloadUserIds); - const { shouldRender, transitionClassNames } = useShowTransition(canShow && isShown); + // For some reason, setting 'slow' here also fixes scroll freezes on iOS when collapsing Story Ribbon + const { shouldRender, transitionClassNames } = useShowTransition(canShow && isShown, undefined, undefined, 'slow'); if (!shouldRender) { return undefined; diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 85120cb8a..ab37a1ce3 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -216,3 +216,18 @@ .fab-padding-bottom { padding-bottom: 5rem !important; } + +.with-story-ribbon { + --story-ribbon-height: 5.5rem; + + height: calc(100% - var(--extra-height, 0px) + var(--story-ribbon-height)) !important; + transform: translateY(calc(var(--story-ribbon-height) * -1)); + + &.open, &.closing { + transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + &.open { + transform: translateY(0); + } +}