shadowdaoandClaude Opus 4.8
2a8a26687b
- Force font-size:16px !important on Styles-sheet/topbar/Sitesmith inputs inside the mobile media query so inline 12px/14px styles stop triggering iOS zoom-on-focus. - Lift sheet-open + Templates/Head Code modal-open state out of private useState into a shared MobileChromeContext (EditorShell), so Phase B can open/close sheets from outside MobilePanelBar. - Add an explicit z-index layer scale, portal TemplateModal to document.body (was trapped under the tab bar inside .topbar's stacking context), align Sitesmith to the same --z-modal layer, and make opening a sheet close any open modal. Also fix modal backdrops swallowing tab bar taps (mirrors the sheet backdrop's existing tab-bar cutout). - Drop BottomSheet's incorrect aria-modal; mobile-aware AssetsPanel empty state copy. - Tests: useIsMobile (matchMedia mock incl. legacy fallback + cleanup), MobileChromeContext invariants (one sheet open, sheet closes modals), MobilePanelBar wiring. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { BottomSheet } from './BottomSheet';
|
|
import { BlocksPanel } from '../left/BlocksPanel';
|
|
import { PagesPanel } from '../left/PagesPanel';
|
|
import { LayersPanel } from '../left/LayersPanel';
|
|
import { AssetsPanel } from '../left/AssetsPanel';
|
|
import { GuidedStyles } from '../right/GuidedStyles';
|
|
import { useMobileChrome, MobileSheetTab } from '../../state/MobileChromeContext';
|
|
|
|
const TABS: { id: MobileSheetTab; label: string; icon: string }[] = [
|
|
{ id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
|
|
{ id: 'pages', label: 'Pages', icon: 'fa-file-o' },
|
|
{ id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
|
|
{ id: 'assets', label: 'Assets', icon: 'fa-image' },
|
|
{ id: 'styles', label: 'Styles', icon: 'fa-paint-brush' },
|
|
];
|
|
|
|
/**
|
|
* Mobile replacement for the desktop LeftPanel/RightPanel column layout
|
|
* (Phase A). A fixed bottom tab bar (Blocks/Pages/Layers/Assets/Styles)
|
|
* toggles a single `BottomSheet` at a time, hosting the SAME panel
|
|
* component the desktop side panels use -- unchanged, so behavior/state
|
|
* stays identical, only the chrome around it differs. Tapping the active
|
|
* tab again, tapping the backdrop, the sheet's close button, or Escape all
|
|
* close the open sheet.
|
|
*
|
|
* "Styles" hosts `GuidedStyles`, which already falls back to the
|
|
* site-design panel when nothing is selected and switches to the
|
|
* per-type style panel once something is -- this is the natural place to
|
|
* edit a tapped element's styling (Phase B deepens the tap-to-select flow;
|
|
* this component only wires up the sheet, per the Phase A brief).
|
|
*
|
|
* Sheet-open state itself lives in `MobileChromeContext` (Mobile-A2), not
|
|
* a private `useState`, so Phase B can open/close a sheet from elsewhere
|
|
* (e.g. a canvas selection toolbar). The toggle-to-close-on-repeat-tap
|
|
* behavior is local to this click handler -- `openSheet` always opens.
|
|
*/
|
|
export const MobilePanelBar: React.FC = () => {
|
|
const { activeSheet, openSheet, closeSheet } = useMobileChrome();
|
|
|
|
const handleTabClick = (tab: MobileSheetTab) => {
|
|
if (activeSheet === tab) closeSheet();
|
|
else openSheet(tab);
|
|
};
|
|
|
|
const activeLabel = TABS.find((t) => t.id === activeSheet)?.label ?? '';
|
|
|
|
return (
|
|
<>
|
|
<BottomSheet open={activeSheet !== null} onClose={closeSheet} title={activeLabel}>
|
|
{activeSheet === 'blocks' && <BlocksPanel />}
|
|
{activeSheet === 'pages' && <PagesPanel />}
|
|
{activeSheet === 'layers' && <LayersPanel />}
|
|
{activeSheet === 'assets' && <AssetsPanel />}
|
|
{activeSheet === 'styles' && <GuidedStyles />}
|
|
</BottomSheet>
|
|
|
|
<nav className="mobile-tab-bar" aria-label="Editor panels">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
className={`mobile-tab-btn${activeSheet === tab.id ? ' active' : ''}`}
|
|
onClick={() => handleTabClick(tab.id)}
|
|
aria-pressed={activeSheet === tab.id}
|
|
>
|
|
<i className={`fa ${tab.icon}`} aria-hidden="true" />
|
|
<span>{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</>
|
|
);
|
|
};
|