mirror of
https://github.com/openswarm-ai/openswarm.git
synced 2026-09-12 12:47:42 +02:00
[eric] desktop: fullscreen card collapses its traffic lights to one exit control (native lights own that corner)
This commit is contained in:
@@ -1071,7 +1071,7 @@ const AgentCard: React.FC<Props> = ({
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
sx={{ display: 'flex', alignItems: 'center', mr: 0.75, flexShrink: 0 }}
|
||||
>
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={isFullscreen} />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
@@ -1000,6 +1000,7 @@ const BrowserCard: React.FC<Props> = ({
|
||||
onMinimize={handleMinimize}
|
||||
onTile={onTile}
|
||||
tiled={!!tileZone}
|
||||
fullscreen={tileZone === 'fullscreen'}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
|
||||
@@ -557,7 +557,7 @@ const DashboardViewCard: React.FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, mr: 0.25 }}>
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
|
||||
</Box>
|
||||
{!isMinimized && <GridViewRoundedIcon sx={{ fontSize: 16, color: c.accent.primary, flexShrink: 0 }} />}
|
||||
<Typography
|
||||
|
||||
@@ -342,7 +342,7 @@ const NoteCard: React.FC<Props> = ({
|
||||
}}
|
||||
>
|
||||
<Box onPointerDown={(e) => e.stopPropagation()} sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} />
|
||||
<WindowControls onClose={() => handleRemove()} onMinimize={onMinimize} onTile={onTile} tiled={!!tileZone} fullscreen={tileZone === 'fullscreen'} />
|
||||
</Box>
|
||||
{isMinimized && (
|
||||
<Box sx={{ flex: 1, minWidth: 0, fontSize: '0.8rem', color: palette.text, opacity: 0.75, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useRef, useState } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import FullscreenExitRoundedIcon from '@mui/icons-material/FullscreenExitRounded';
|
||||
import { TILE_ZONES } from './tileZones';
|
||||
|
||||
interface WindowControlsProps {
|
||||
@@ -7,6 +8,9 @@ interface WindowControlsProps {
|
||||
onMinimize: () => void;
|
||||
onTile: (zone: string) => void; // a TILE_ZONES key, or 'restore'
|
||||
tiled?: boolean;
|
||||
// Full size view: the native macOS lights sit right above this corner, so a second dot cluster
|
||||
// reads as double chrome; collapse to ONE exit control and let the natives own window ops.
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
|
||||
// macOS-style traffic lights on every card = the "AI OS" window feel. Grey at rest so a canvas
|
||||
@@ -50,13 +54,37 @@ export const ARC_CHIP_SX: Record<string, unknown> = {
|
||||
'.osw-pill-host:hover & .osw-window-lights > :nth-of-type(3)': { transform: 'translate(calc(-50% + 11px), calc(-50% + 5px)) scale(1)', opacity: 1, transitionDelay: '80ms' },
|
||||
};
|
||||
|
||||
function WindowControls({ onClose, onMinimize, onTile, tiled }: WindowControlsProps): React.ReactElement {
|
||||
function WindowControls({ onClose, onMinimize, onTile, tiled, fullscreen }: WindowControlsProps): React.ReactElement {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const closeTimer = useRef<number | null>(null);
|
||||
const openMenu = (): void => { if (closeTimer.current) window.clearTimeout(closeTimer.current); setMenuOpen(true); };
|
||||
const scheduleClose = (): void => { closeTimer.current = window.setTimeout(() => setMenuOpen(false), 180); };
|
||||
const stop = (e: React.PointerEvent | React.MouseEvent): void => { e.stopPropagation(); };
|
||||
|
||||
if (fullscreen) {
|
||||
return (
|
||||
<Box className="osw-window-lights" onPointerDown={stop} sx={{ display: 'flex', alignItems: 'center', flex: 'none' }}>
|
||||
<Box
|
||||
component="button"
|
||||
type="button"
|
||||
aria-label="Exit full screen"
|
||||
title="Exit full screen (Esc)"
|
||||
onClick={(e: React.MouseEvent) => { e.stopPropagation(); onTile('restore'); }}
|
||||
onPointerDown={stop}
|
||||
sx={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: 22, height: 22, p: 0, border: 'none', borderRadius: '6px',
|
||||
background: 'transparent', color: 'inherit', opacity: 0.65, cursor: 'pointer',
|
||||
transition: 'opacity 120ms, background 120ms',
|
||||
'&:hover': { opacity: 1, background: 'rgba(136,136,136,0.18)' },
|
||||
}}
|
||||
>
|
||||
<FullscreenExitRoundedIcon sx={{ fontSize: 16 }} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const btn = (color: string, symbol: string, onClick: () => void, label: string): React.ReactElement => (
|
||||
<Box component="button" type="button" aria-label={label}
|
||||
onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClick(); }} onPointerDown={stop} sx={dotSx(color)}>
|
||||
|
||||
Reference in New Issue
Block a user