moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Notifications: render ScrollTopButton in a Portal

This commit is contained in:
Alex Gleason 2023-10-02 11:14:36 -05:00
parent ff55272d59
commit 9cb677363d
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/notifications/index.tsx
View File

@ -14,7 +14,7 @@ import { getSettings } from 'soapbox/actions/settings';
import PullToRefresh from 'soapbox/components/pull-to-refresh'; import PullToRefresh from 'soapbox/components/pull-to-refresh';
import ScrollTopButton from 'soapbox/components/scroll-top-button'; import ScrollTopButton from 'soapbox/components/scroll-top-button';
import ScrollableList from 'soapbox/components/scrollable-list'; import ScrollableList from 'soapbox/components/scrollable-list';
import { Column } from 'soapbox/components/ui'; import { Column, Portal } from 'soapbox/components/ui';
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification'; import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification';
import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks'; import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
@ -176,11 +176,15 @@ const Notifications = () => {
return ( return (
<Column ref={column} label={intl.formatMessage(messages.title)} withHeader={false}> <Column ref={column} label={intl.formatMessage(messages.title)} withHeader={false}>
{filterBarContainer} {filterBarContainer}
<Portal>
<ScrollTopButton <ScrollTopButton
onClick={handleDequeueNotifications} onClick={handleDequeueNotifications}
count={totalQueuedNotificationsCount} count={totalQueuedNotificationsCount}
message={messages.queue} message={messages.queue}
/> />
</Portal>
<PullToRefresh onRefresh={handleRefresh}> <PullToRefresh onRefresh={handleRefresh}>
{scrollContainer} {scrollContainer}
</PullToRefresh> </PullToRefresh>