bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move GlobalHotkeys back to features/ui for now

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-07-03 13:53:41 +02:00
parent 42e9d31a3e
commit bf6bf879a0
3 changed files with 73 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/soapbox/containers/soapbox.tsx
View file

@ -29,7 +29,6 @@ import {
OnboardingWizard, OnboardingWizard,
WaitlistPage, WaitlistPage,
} from 'soapbox/features/ui/util/async-components'; } from 'soapbox/features/ui/util/async-components';
import GlobalHotkeys from 'soapbox/features/ui/util/global-hotkeys';
import { createGlobals } from 'soapbox/globals'; import { createGlobals } from 'soapbox/globals';
import { import {
useAppSelector, useAppSelector,
@ -176,33 +175,31 @@ const SoapboxMount = () => {
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}> <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<CompatRouter> <CompatRouter>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}> <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
<GlobalHotkeys> <Switch>
<Switch> <Route
<Route path='/embed/:statusId'
path='/embed/:statusId' render={(props) => <EmbeddedStatus params={props.match.params} />}
render={(props) => <EmbeddedStatus params={props.match.params} />} />
/> <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
<Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
<Route> <Route>
{renderBody()} {renderBody()}
<BundleContainer fetchComponent={ModalContainer}> <BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />} {Component => <Component />}
</BundleContainer> </BundleContainer>
<GdprBanner /> <GdprBanner />
<div id='toaster'> <div id='toaster'>
<Toaster <Toaster
position='top-right' position='top-right'
containerClassName='top-10' containerClassName='top-10'
containerStyle={{ top: 75 }} containerStyle={{ top: 75 }}
/> />
</div> </div>
</Route> </Route>
</Switch> </Switch>
</GlobalHotkeys>
</ScrollContext> </ScrollContext>
</CompatRouter> </CompatRouter>
</BrowserRouter> </BrowserRouter>

89
app/soapbox/features/ui/index.tsx
View file

@ -135,6 +135,7 @@ import {
EditGroup, EditGroup,
FollowedTags, FollowedTags,
} from './util/async-components'; } from './util/async-components';
import GlobalHotkeys from './util/global-hotkeys';
import { WrappedRoute } from './util/react-router-helpers'; import { WrappedRoute } from './util/react-router-helpers';
// Dummy import, to make sure that <Status /> ends up in the application bundle. // Dummy import, to make sure that <Status /> ends up in the application bundle.
@ -511,60 +512,62 @@ const UI: React.FC<IUI> = ({ children }) => {
}; };
return ( return (
<div ref={node} style={style}> <GlobalHotkeys node={node}>
<div <div ref={node} style={style}>
className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', { <div
'backdrop-blur': isDragging, className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
})} 'backdrop-blur': isDragging,
/> })}
/>
<BackgroundShapes /> <BackgroundShapes />
<div className='z-10 flex flex-col'> <div className='z-10 flex flex-col'>
<Navbar /> <Navbar />
<Layout> <Layout>
<Layout.Sidebar> <Layout.Sidebar>
{!standalone && <SidebarNavigation />} {!standalone && <SidebarNavigation />}
</Layout.Sidebar> </Layout.Sidebar>
<SwitchingColumnsArea> <SwitchingColumnsArea>
{children} {children}
</SwitchingColumnsArea> </SwitchingColumnsArea>
</Layout> </Layout>
{(me && !shouldHideFAB()) && ( {(me && !shouldHideFAB()) && (
<div className='fixed bottom-24 right-4 z-40 transition-all rtl:left-4 rtl:right-auto lg:hidden'> <div className='fixed bottom-24 right-4 z-40 transition-all rtl:left-4 rtl:right-auto lg:hidden'>
<FloatingActionButton /> <FloatingActionButton />
</div> </div>
)} )}
{me && ( {me && (
<BundleContainer fetchComponent={SidebarMenu}> <BundleContainer fetchComponent={SidebarMenu}>
{Component => <Component />}
</BundleContainer>
)}
{me && features.chats && (
<BundleContainer fetchComponent={ChatWidget}>
{Component => (
<div className='hidden xl:block'>
<Component />
</div>
)}
</BundleContainer>
)}
<ThumbNavigation />
<BundleContainer fetchComponent={ProfileHoverCard}>
{Component => <Component />} {Component => <Component />}
</BundleContainer> </BundleContainer>
)}
{me && features.chats && ( <BundleContainer fetchComponent={StatusHoverCard}>
<BundleContainer fetchComponent={ChatWidget}> {Component => <Component />}
{Component => (
<div className='hidden xl:block'>
<Component />
</div>
)}
</BundleContainer> </BundleContainer>
)} </div>
<ThumbNavigation />
<BundleContainer fetchComponent={ProfileHoverCard}>
{Component => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={StatusHoverCard}>
{Component => <Component />}
</BundleContainer>
</div> </div>
</div> </GlobalHotkeys>
); );
}; };

11
app/soapbox/features/ui/util/global-hotkeys.tsx
View file

@ -36,9 +36,10 @@ const keyMap = {
interface IGlobalHotkeys { interface IGlobalHotkeys {
children: React.ReactNode children: React.ReactNode
node: React.MutableRefObject<HTMLDivElement | null>
} }
const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => { const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
const hotkeys = useRef<HTMLDivElement | null>(null); const hotkeys = useRef<HTMLDivElement | null>(null);
const history = useHistory(); const history = useHistory();
@ -48,9 +49,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
const handleHotkeyNew = (e?: KeyboardEvent) => { const handleHotkeyNew = (e?: KeyboardEvent) => {
e?.preventDefault(); e?.preventDefault();
if (!hotkeys.current) return; if (!node.current) return;
const element = hotkeys.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement; const element = node.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
if (element) { if (element) {
element.focus(); element.focus();
@ -59,9 +60,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
const handleHotkeySearch = (e?: KeyboardEvent) => { const handleHotkeySearch = (e?: KeyboardEvent) => {
e?.preventDefault(); e?.preventDefault();
if (!hotkeys.current) return; if (!node.current) return;
const element = hotkeys.current.querySelector('input#search') as HTMLInputElement; const element = node.current.querySelector('input#search') as HTMLInputElement;
if (element) { if (element) {
element.focus(); element.focus();