officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keep a maximized panel legible and amber its button

Browse Source
This commit is contained in:
pastilhas
2026-08-07 03:31:28 +00:00
parent 91898733a4
commit 0af4b6f4d1
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+11 -3
View File
@@ -196,6 +196,9 @@ const TrafficLights = ({
); );
}; };
// Locked screens get maximize only — no close, no clear. Green means "there is room to grow", amber
// means "this one is already filling the screen", the same way the two colours read on a mac window;
// `TrafficLights` below switches on the same pair.
const MaximizeButton = ({ panelId }: { panelId: string }) => { const MaximizeButton = ({ panelId }: { panelId: string }) => {
const { maximizedPanelId, setMaximizedPanelId } = useWorkspace(); const { maximizedPanelId, setMaximizedPanelId } = useWorkspace();
const isMaximized = maximizedPanelId === panelId; const isMaximized = maximizedPanelId === panelId;
@@ -205,12 +208,12 @@ const MaximizeButton = ({ panelId }: { panelId: string }) => {
<button <button
type="button" type="button"
onClick={() => setMaximizedPanelId(isMaximized ? null : panelId)} onClick={() => setMaximizedPanelId(isMaximized ? null : panelId)}
className="group/btn h-3 w-3 rounded-full bg-[#28c840] hover:brightness-90 transition-all cursor-pointer flex items-center justify-center" className={`group/btn h-3 w-3 rounded-full hover:brightness-90 transition-all cursor-pointer flex items-center justify-center ${isMaximized ? 'bg-[#febc2e]' : 'bg-[#28c840]'}`}
title={isMaximized ? 'Restore' : 'Maximize'} title={isMaximized ? 'Restore' : 'Maximize'}
> >
{isMaximized ? ( {isMaximized ? (
<Minus <Minus
className="h-2 w-2 text-[#006500] opacity-0 group-hover/btn:opacity-100 transition-opacity" className="h-2 w-2 text-[#5f4a00] opacity-0 group-hover/btn:opacity-100 transition-opacity"
strokeWidth={3} strokeWidth={3}
/> />
) : ( ) : (
@@ -540,7 +543,12 @@ export const PanelSlot = ({
// Header (z-10) — so a full-viewport overlay would hide the panel's own header/Restore behind the nav. // Header (z-10) — so a full-viewport overlay would hide the panel's own header/Restore behind the nav.
// Clearing the header keeps it visible + the nav accessible. (Maximize only happens in the dashboard // Clearing the header keeps it visible + the nav accessible. (Maximize only happens in the dashboard
// shell; previews/mobile no-op it, so the header offset is always the right reference.) // shell; previews/mobile no-op it, so the header offset is always the right reference.)
const maximizedStyle = { backgroundColor: 'rgba(30, 30, 30, 0.95)', borderColor: 'rgba(255, 255, 255, 0.2)' }; // Denser glass than a tiled panel, not a darker one. Panel chrome — header text, icons, the zoom
// control — is black throughout, so the old near-opaque dark fill left every one of them unreadable
// the moment you maximised. This is the nav Header's exact recipe (`rgba(255,255,255,0.25)` over a
// 0.35 border), which is the app's established "raised above the rest" surface and is already proven
// to carry black text.
const maximizedStyle = { backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' };
const normalStyle = noHeader const normalStyle = noHeader
? { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(0, 0, 0, 0.25)' } ? { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(0, 0, 0, 0.25)' }
: { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' }; : { backgroundColor: 'rgba(255, 255, 255, 0.12)', borderColor: 'rgba(255, 255, 255, 0.2)' };