Skip to content

Commit 2de488f

Browse files
colin969colin969
committed
refactor: Show titlebar above splash screen
1 parent 91f317f commit 2de488f

File tree

3 files changed

+110
-111
lines changed

3 files changed

+110
-111
lines changed

‎src/renderer/components/SplashScreen.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { useAppSelector } from '@renderer/hooks/useAppSelector';
22
import { BackInit } from '@shared/back/types';
3-
import { useEffect, useState } from 'react';
3+
import { PropsWithChildren, useEffect, useState } from 'react';
44

5-
export function SplashScreen() {
5+
type SplashScreenProps = PropsWithChildren;
6+
7+
export function SplashScreen(props: SplashScreenProps) {
68
const quitting = useAppSelector(state => state.main.quitting);
79
const loadedAll = useAppSelector(state => state.main.loadedAll);
810
const loaded = useAppSelector(state => state.main.loaded);
@@ -21,11 +23,7 @@ export function SplashScreen() {
2123
? ' splash-screen--fade-out'
2224
: '';
2325

24-
if (finished && loadedAll && !quitting) {
25-
return (<></>);
26-
}
27-
28-
return (
26+
const splashScreen = !finished ? (
2927
<div className={'splash-screen' + extraClass}>
3028
<div className='splash-screen__logo fp-logo-box'>
3129
<div className='fp-logo' />
@@ -61,5 +59,12 @@ export function SplashScreen() {
6159
) : undefined }
6260
</div>
6361
</div>
62+
) : undefined;
63+
64+
return (
65+
<div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
66+
{splashScreen}
67+
{loadedAll ? props.children : undefined}
68+
</div>
6469
);
6570
}

‎src/renderer/components/app.tsx‎

Lines changed: 94 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,6 @@ export function App() {
134134
const stopRender = useAppSelector(state => state.main.stopRender);
135135
const socketOpen = useAppSelector(state => state.main.socketOpen);
136136
const openDialogs = useAppSelector(state => state.main.openDialogs);
137-
const loadedAll = useAppSelector(state => state.main.loadedAll);
138137
const downloadOpen = useAppSelector(state => state.main.downloadOpen);
139138
const downloadVerifying = useAppSelector(state => state.main.downloadVerifying);
140139
const downloadSize = useAppSelector(state => state.main.downloadSize);
@@ -279,113 +278,108 @@ export function App() {
279278
{/* First Open Dialog */}
280279
{openDialogs.length > 0 && socketOpen && (
281280
<Dialog dialog={openDialogs[0]} />
282-
)}
283-
{/* Splash screen */}
284-
<SplashScreen />
285-
{/* Title-bar (if enabled) */}
281+
)} {/* Title-bar (if enabled) */}
286282
{useCustomTitleBar ?
287283
customVersion ? (
288284
<TitleBar title={customVersion} />
289285
) : (
290286
<TitleBar title={`${APP_TITLE} ${window.Shared.isDev ? '(Dev Mode)' : ''}`} />
291287
) : undefined}
292288
{/* "Content" */}
293-
{loadedAll ? (
294-
<>
295-
{/* Header */}
296-
<Header />
297-
{/* Main */}
298-
<div className='main' ref={contentRef} >
299-
{ currentView !== undefined ? (
300-
<>
301-
{ useActivityRoutes && (
302-
<ActivityRoutes
303-
manualUrl={manualUrl}
304-
customRoutes={customRoutes} />
305-
)}
306-
<Routes>
307-
<Route
308-
path={Paths.LOADING}
309-
element={<LoadingPage/>}/>
310-
<Route
311-
path={Paths.HOME}
312-
element={useActivityRoutes ? <></> : <HomePage/>}/>
313-
<Route
314-
path={Paths.BROWSE}
315-
element={<></>}/>
316-
<Route
317-
path={Paths.TAGS}
318-
element={useActivityRoutes ? <></> : <TagsPage/>}/>
319-
<Route
320-
path={Paths.CATEGORIES}
321-
element={<TagCategoriesPage/>}/>
322-
{/* <Route
323-
path={Paths.DOWNLOADS}
324-
element={<DownloadsPage/>}/> */}
325-
<Route
326-
path={Paths.LOGS}
327-
element={useActivityRoutes ? <></> : <LogsPage/>}/>
328-
<Route
329-
path={Paths.CONFIG}
330-
element={<ConfigPage/>}/>
289+
<SplashScreen>
290+
{/* Header */}
291+
<Header />
292+
{/* Main */}
293+
<div className='main' ref={contentRef} >
294+
{ currentView !== undefined ? (
295+
<>
296+
{ useActivityRoutes && (
297+
<ActivityRoutes
298+
manualUrl={manualUrl}
299+
customRoutes={customRoutes} />
300+
)}
301+
<Routes>
302+
<Route
303+
path={Paths.LOADING}
304+
element={<LoadingPage/>}/>
305+
<Route
306+
path={Paths.HOME}
307+
element={useActivityRoutes ? <></> : <HomePage/>}/>
308+
<Route
309+
path={Paths.BROWSE}
310+
element={<></>}/>
311+
<Route
312+
path={Paths.TAGS}
313+
element={useActivityRoutes ? <></> : <TagsPage/>}/>
314+
<Route
315+
path={Paths.CATEGORIES}
316+
element={<TagCategoriesPage/>}/>
317+
{/* <Route
318+
path={Paths.DOWNLOADS}
319+
element={<DownloadsPage/>}/> */}
320+
<Route
321+
path={Paths.LOGS}
322+
element={useActivityRoutes ? <></> : <LogsPage/>}/>
323+
<Route
324+
path={Paths.CONFIG}
325+
element={<ConfigPage/>}/>
326+
<Route
327+
path={Paths.MANUAL}
328+
element={useActivityRoutes ? <></> : <IFramePage url={manualUrl} />}/>
329+
<Route
330+
path={Paths.ABOUT}
331+
element={<AboutPage/>}/>
332+
<Route
333+
path={Paths.CURATE}
334+
element={useActivityRoutes ? <></> : <CuratePage/>}/>
335+
<Route
336+
path={Paths.FPFSS}
337+
element={useActivityRoutes ? <></> : <FpfssPage/>}/>
338+
<Route
339+
path={Paths.DYNAMIC}
340+
element={<DynamicPage name={dynamicPage?.name || ''} props={dynamicPage?.props}/>}/>
341+
{ customRoutes.map(route =>
331342
<Route
332-
path={Paths.MANUAL}
333-
element={useActivityRoutes ? <></> : <IFramePage url={manualUrl} />}/>
334-
<Route
335-
path={Paths.ABOUT}
336-
element={<AboutPage/>}/>
337-
<Route
338-
path={Paths.CURATE}
339-
element={useActivityRoutes ? <></> : <CuratePage/>}/>
340-
<Route
341-
path={Paths.FPFSS}
342-
element={useActivityRoutes ? <></> : <FpfssPage/>}/>
343-
<Route
344-
path={Paths.DYNAMIC}
345-
element={<DynamicPage name={dynamicPage?.name || ''} props={dynamicPage?.props}/>}/>
346-
{ customRoutes.map(route =>
347-
<Route
348-
key={route.path}
349-
path={route.path}
350-
element={useActivityRoutes ? <></> : <DynamicComponent name={route.component} props={{}}/>}/>
351-
)}
352-
<Route element={<NotFoundPage/>}/>
353-
</Routes>
354-
<Activity mode={isBrowsePage ? 'visible' : 'hidden'}>
355-
{browsePageViewExists && browsePageViewName !== undefined && (
356-
<BrowsePage
357-
viewName={browsePageViewName}
358-
sourceTable='browse-page'/>
359-
)}
360-
</Activity>
361-
<Activity mode={showRightSidebar ? 'visible' : 'hidden'}>
362-
<ResizableSidebar
363-
show={browsePageShowRightSidebar}
364-
divider='before'
365-
width={browsePageRightSidebarWidth}
366-
onResize={onRightSidebarResize}>
367-
<RightBrowseSidebarView view={currentView}/>
368-
</ResizableSidebar>
369-
</Activity>
370-
</>
371-
) : <NotFoundPage/> }
372-
<noscript className='nojs'>
373-
<div style={{ textAlign: 'center' }}>
374-
This website requires JavaScript to be enabled.
375-
</div>
376-
</noscript>
377-
</div>
378-
{/* Tasks - @TODO Find a better way to hide it than behind enableEditing */}
379-
{enableEditing && tasks.length > 0 && (
380-
<TaskBar
381-
open={taskBarOpen}
382-
onToggleOpen={onToggleTaskBarOpen} />
383-
)}
384-
{/* Footer */}
385-
<Footer />
386-
{/* Meta Edit Popup */}
387-
</>
388-
) : undefined}
343+
key={route.path}
344+
path={route.path}
345+
element={useActivityRoutes ? <></> : <DynamicComponent name={route.component} props={{}}/>}/>
346+
)}
347+
<Route element={<NotFoundPage/>}/>
348+
</Routes>
349+
<Activity mode={isBrowsePage ? 'visible' : 'hidden'}>
350+
{browsePageViewExists && browsePageViewName !== undefined && (
351+
<BrowsePage
352+
viewName={browsePageViewName}
353+
sourceTable='browse-page'/>
354+
)}
355+
</Activity>
356+
<Activity mode={showRightSidebar ? 'visible' : 'hidden'}>
357+
<ResizableSidebar
358+
show={browsePageShowRightSidebar}
359+
divider='before'
360+
width={browsePageRightSidebarWidth}
361+
onResize={onRightSidebarResize}>
362+
<RightBrowseSidebarView view={currentView}/>
363+
</ResizableSidebar>
364+
</Activity>
365+
</>
366+
) : <NotFoundPage/> }
367+
<noscript className='nojs'>
368+
<div style={{ textAlign: 'center' }}>
369+
This website requires JavaScript to be enabled.
370+
</div>
371+
</noscript>
372+
</div>
373+
{/* Tasks - @TODO Find a better way to hide it than behind enableEditing */}
374+
{enableEditing && tasks.length > 0 && (
375+
<TaskBar
376+
open={taskBarOpen}
377+
onToggleOpen={onToggleTaskBarOpen} />
378+
)}
379+
{/* Footer */}
380+
<Footer />
381+
{/* Meta Edit Popup */}
382+
</SplashScreen>
389383
</>
390384
) : undefined}
391385
{downloadOpen && (

‎static/window/styles/core.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2804,16 +2804,16 @@ body {
28042804

28052805
/* ------ Splash Screen ------ */
28062806
.splash-screen {
2807-
width: 100%;
2808-
height: 100%;
28092807
display: flex;
28102808
flex-direction: column;
28112809
align-items: center;
28122810
justify-content: center;
28132811
user-select: none;
2814-
/* Position relative to the window - not the parent */
2815-
position: fixed;
2812+
position: absolute;
28162813
top: 0;
2814+
left: 0;
2815+
width: 100%;
2816+
height: 100%;
28172817
z-index: 9999999999;
28182818
}
28192819
.splash-screen--fade-out {

0 commit comments

Comments
 (0)