dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Auto-enable fullscreen in standalone mode, hide toggle button

Browse Source
This commit is contained in:
dwindown
2025-11-04 23:32:40 +07:00
parent 8a0f2e581e
commit f2bd460e72
1 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
admin-spa/src/App.tsx
View File

@@ -257,21 +257,23 @@ function AddonRoute({ config }: { config: any }) {
return <Component {...(config.props || {})} />; return <Component {...(config.props || {})} />;
} }
function Header({ onFullscreen, fullscreen }: { onFullscreen: () => void; fullscreen: boolean }) { function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) {
const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW'; const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW';
return ( return (
<header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}> <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
<div className="font-semibold">{siteTitle}</div> <div className="font-semibold">{siteTitle}</div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div> <div className="text-sm opacity-70 hidden sm:block">{window.WNW_API?.isDev ? 'Dev Server' : 'Production'}</div>
<button {showToggle && (
onClick={onFullscreen} <button
className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground" onClick={onFullscreen}
title={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'} className="inline-flex items-center gap-2 border rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
> title={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
{fullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />} >
<span className="hidden sm:inline">{fullscreen ? 'Exit' : 'Fullscreen'}</span> {fullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
</button> <span className="hidden sm:inline">{fullscreen ? 'Exit' : 'Fullscreen'}</span>
</button>
)}
</div> </div>
</header> </header>
); );
@@ -341,17 +343,21 @@ function Shell() {
const isDesktop = useIsDesktop(); const isDesktop = useIsDesktop();
const location = useLocation(); const location = useLocation();
// Check if standalone mode - force fullscreen and hide toggle
const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
const fullscreen = isStandalone ? true : on;
// Check if current route is dashboard // Check if current route is dashboard
const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard'); const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
const SubmenuComponent = isDashboardRoute ? DashboardSubmenuBar : SubmenuBar; const SubmenuComponent = isDashboardRoute ? DashboardSubmenuBar : SubmenuBar;
return ( return (
<> <>
<ShortcutsBinder onToggle={toggle} /> {!isStandalone && <ShortcutsBinder onToggle={toggle} />}
<CommandPalette toggleFullscreen={toggle} /> {!isStandalone && <CommandPalette toggleFullscreen={toggle} />}
<div className={`flex flex-col min-h-screen ${on ? 'woonoow-fullscreen-root' : ''}`}> <div className={`flex flex-col min-h-screen ${fullscreen ? 'woonoow-fullscreen-root' : ''}`}>
<Header onFullscreen={toggle} fullscreen={on} /> <Header onFullscreen={toggle} fullscreen={fullscreen} showToggle={!isStandalone} />
{on ? ( {fullscreen ? (
isDesktop ? ( isDesktop ? (
<div className="flex flex-1 min-h-0"> <div className="flex flex-1 min-h-0">
<Sidebar /> <Sidebar />