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

Merge branch 'hotkeys-statuses' into 'develop'

Browse source 
Move GlobalHotkeys back to features/ui for now

See merge request soapbox-pub/soapbox!2593
This commit is contained in:
marcin mikołajczak 2023-07-03 12:32:07 +00:00
commit 72de8fb90f
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,
WaitlistPage,
} from 'soapbox/features/ui/util/async-components';
import GlobalHotkeys from 'soapbox/features/ui/util/global-hotkeys';
import { createGlobals } from 'soapbox/globals';
import {
useAppSelector,
@ -176,33 +175,31 @@ const SoapboxMount = () => {
<BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
<CompatRouter>
<ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
<GlobalHotkeys>
<Switch>
<Route
path='/embed/:statusId'
render={(props) => <EmbeddedStatus params={props.match.params} />}
/>
<Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
<Switch>
<Route
path='/embed/:statusId'
render={(props) => <EmbeddedStatus params={props.match.params} />}
/>
<Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
<Route>
{renderBody()}
<Route>
{renderBody()}
<BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={ModalContainer}>
{Component => <Component />}
</BundleContainer>
<GdprBanner />
<GdprBanner />
<div id='toaster'>
<Toaster
position='top-right'
containerClassName='top-10'
containerStyle={{ top: 75 }}
/>
</div>
</Route>
</Switch>
</GlobalHotkeys>
<div id='toaster'>
<Toaster
position='top-right'
containerClassName='top-10'
containerStyle={{ top: 75 }}
/>
</div>
</Route>
</Switch>
</ScrollContext>
</CompatRouter>
</BrowserRouter>

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

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