mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
dbe1c0fa2e
refs. https://github.com/TryGhost/Product/issues/3349 - some of the UI components' scrollbar was visible where it wasn't necessary - metadata preview was shown in view mode too - social accounts value was shown even if it was empty - user detail modal was missing field descriptions - it was not possible to reopen the Zapier modal after closing it the "Close" button - copy had to be updated for analytics export to make it clear what is going to be exported - invite modal had to be closed after successful invitation - toggle component was only active on the text itself, instead of the whole row
83 lines
4.3 KiB
TypeScript
83 lines
4.3 KiB
TypeScript
import ExitSettingsButton from './components/ExitSettingsButton';
|
|
import GlobalDataProvider from './components/providers/GlobalDataProvider';
|
|
import Heading from './admin-x-ds/global/Heading';
|
|
import NiceModal from '@ebay/nice-modal-react';
|
|
import RoutingProvider, {ExternalLink} from './components/providers/RoutingProvider';
|
|
import Settings from './components/Settings';
|
|
import Sidebar from './components/Sidebar';
|
|
import clsx from 'clsx';
|
|
import {GlobalDirtyStateProvider} from './hooks/useGlobalDirtyState';
|
|
import {OfficialTheme, ServicesProvider} from './components/providers/ServiceProvider';
|
|
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
|
|
import {Toaster} from 'react-hot-toast';
|
|
import {ZapierTemplate} from './components/settings/advanced/integrations/ZapierModal';
|
|
|
|
interface AppProps {
|
|
ghostVersion: string;
|
|
officialThemes: OfficialTheme[];
|
|
zapierTemplates: ZapierTemplate[];
|
|
externalNavigate: (link: ExternalLink) => void;
|
|
darkMode?: boolean;
|
|
}
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
refetchOnWindowFocus: false,
|
|
staleTime: 5 * (60 * 1000), // 5 mins
|
|
cacheTime: 10 * (60 * 1000) // 10 mins
|
|
}
|
|
}
|
|
});
|
|
|
|
function App({ghostVersion, officialThemes, zapierTemplates, externalNavigate, darkMode = false}: AppProps) {
|
|
const appClassName = clsx(
|
|
'admin-x-settings h-[100vh] w-full overflow-y-auto',
|
|
darkMode && 'dark'
|
|
);
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ServicesProvider ghostVersion={ghostVersion} officialThemes={officialThemes} zapierTemplates={zapierTemplates}>
|
|
<GlobalDataProvider>
|
|
<RoutingProvider externalNavigate={externalNavigate}>
|
|
<GlobalDirtyStateProvider>
|
|
<div className={appClassName} id="admin-x-root" style={{
|
|
height: '100vh',
|
|
width: '100%'
|
|
}}
|
|
>
|
|
<Toaster />
|
|
<NiceModal.Provider>
|
|
<div className='relative z-20 px-6 py-4 tablet:fixed'>
|
|
<ExitSettingsButton />
|
|
</div>
|
|
|
|
{/* Main container */}
|
|
<div className="mx-auto flex max-w-[1080px] flex-col px-[5vmin] py-[12vmin] tablet:flex-row tablet:items-start tablet:gap-x-10 tablet:py-[8vmin]" id="admin-x-settings-content">
|
|
|
|
{/* Sidebar */}
|
|
<div className="sticky top-[-42px] z-20 min-w-[260px] grow-0 md:top-[-52px] tablet:fixed tablet:top-[8vmin] tablet:basis-[260px]">
|
|
<div className='-mx-6 h-[84px] bg-white px-6 tablet:m-0 tablet:bg-transparent tablet:p-0'>
|
|
<Heading>Settings</Heading>
|
|
</div>
|
|
<div className="relative mt-[-32px] w-full overflow-x-hidden after:absolute after:inset-x-0 after:top-0 after:hidden after:h-[40px] after:bg-gradient-to-b after:from-white after:to-transparent after:content-[''] dark:after:from-black tablet:w-[260px] tablet:after:!visible tablet:after:!block">
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
<div className="relative flex-auto pt-[3vmin] tablet:ml-[300px] tablet:pt-[85px]">
|
|
{/* <div className='pointer-events-none fixed inset-x-0 top-0 z-[5] hidden h-[80px] bg-gradient-to-t from-transparent to-white to-60% dark:to-black tablet:!visible tablet:!block'></div> */}
|
|
<Settings />
|
|
</div>
|
|
</div>
|
|
</NiceModal.Provider>
|
|
</div>
|
|
</GlobalDirtyStateProvider>
|
|
</RoutingProvider>
|
|
</GlobalDataProvider>
|
|
</ServicesProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|