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

Message List: Improve scroll notch

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-31 17:22:59 +03:00
parent bf4ff6355a
commit 81f12ddb2f
3 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/middle/MessageScroll.tsx
View File

@ -49,7 +49,7 @@ const MessageScroll: FC<OwnProps> = ({
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const fabTriggerRef = useRef<HTMLDivElement>(null); const fabTriggerRef = useRef<HTMLDivElement>(null);
const updateFabVisibility = useCallback(() => { const toggleScrollTools = useCallback(() => {
if (isFabFrozen) { if (isFabFrozen) {
return; return;
} }
@ -69,7 +69,7 @@ const MessageScroll: FC<OwnProps> = ({
const { offsetHeight, scrollHeight, scrollTop } = containerRef.current!; const { offsetHeight, scrollHeight, scrollTop } = containerRef.current!;
const scrollBottom = scrollHeight - scrollTop - offsetHeight; const scrollBottom = scrollHeight - scrollTop - offsetHeight;
const isNearBottom = scrollBottom <= FAB_THRESHOLD; const isNearBottom = scrollBottom <= FAB_THRESHOLD;
const isAtBottom = scrollBottom === 0 || (IS_SAFARI && scrollBottom === 1); const isAtBottom = scrollBottom <= 0 || (IS_SAFARI && scrollBottom <= 1);
onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom); onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom);
onNotchToggle(!isAtBottom); onNotchToggle(!isAtBottom);
@ -113,9 +113,7 @@ const MessageScroll: FC<OwnProps> = ({
} = useIntersectionObserver({ } = useIntersectionObserver({
rootRef: containerRef, rootRef: containerRef,
margin: FAB_THRESHOLD, margin: FAB_THRESHOLD,
}, () => { }, toggleScrollTools);
updateFabVisibility();
});
useOnIntersect(fabTriggerRef, observeIntersectionForFab); useOnIntersect(fabTriggerRef, observeIntersectionForFab);
@ -123,9 +121,7 @@ const MessageScroll: FC<OwnProps> = ({
observe: observeIntersectionForNotch, observe: observeIntersectionForNotch,
} = useIntersectionObserver({ } = useIntersectionObserver({
rootRef: containerRef, rootRef: containerRef,
}, () => { }, toggleScrollTools);
updateFabVisibility();
});
useOnIntersect(fabTriggerRef, observeIntersectionForNotch); useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
@ -150,7 +146,7 @@ const MessageScroll: FC<OwnProps> = ({
}, [messageIds]); }, [messageIds]);
// Workaround for stuck FAB when many unread messages // Workaround for stuck FAB when many unread messages
useEffect(updateFabVisibility, [firstUnreadId]); useEffect(toggleScrollTools, [firstUnreadId]);
return ( return (
<div className={className} teactFastList> <div className={className} teactFastList>

2
src/components/middle/MiddleColumn.scss
View File

@ -265,7 +265,7 @@
height: 1px; height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
opacity: 0; opacity: 0;
transition: opacity 200ms ease; transition: opacity 150ms ease;
@media (max-width: 600px) { @media (max-width: 600px) {
left: -2%; left: -2%;

2
src/util/fastSmoothScroll.ts
View File

@ -44,7 +44,6 @@ export default function fastSmoothScroll(
isAnimating = true; isAnimating = true;
fastRaf(() => { fastRaf(() => {
dispatchHeavyAnimationEvent(MAX_JS_DURATION);
scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight); scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight);
}); });
} }
@ -99,6 +98,7 @@ function scrollWithJs(
); );
const startAt = Date.now(); const startAt = Date.now();
dispatchHeavyAnimationEvent(duration);
animateSingle(() => { animateSingle(() => {
const t = Math.min((Date.now() - startAt) / duration, 1); const t = Math.min((Date.now() - startAt) / duration, 1);