feat: add font size controls to mobile terminal header and fix auto-hide space reclamation
- TerminalComponent: expose changeFontSize via onTerminalReady callback - MobileTerminalWrapper: pass changeFontSize to header - MobileTerminalHeader: add A- and A+ font size buttons - CSS: collapse header height/padding/margin/border when hidden to reclaim space
This commit is contained in:
@@ -6,6 +6,7 @@ interface MobileTerminalHeaderProps {
|
||||
onBack?: () => void;
|
||||
onMenuToggle?: () => void;
|
||||
onClose?: () => void;
|
||||
onFontSizeChange?: (delta: number) => void;
|
||||
isVisible: boolean;
|
||||
connectionStatus?: "connecting" | "connected" | "disconnected" | "error";
|
||||
}
|
||||
@@ -15,6 +16,7 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
|
||||
onBack,
|
||||
onMenuToggle,
|
||||
onClose,
|
||||
onFontSizeChange,
|
||||
isVisible,
|
||||
connectionStatus = "connecting",
|
||||
}) => {
|
||||
@@ -56,6 +58,26 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="mobile-terminal-header-right">
|
||||
{onFontSizeChange && (
|
||||
<>
|
||||
<button
|
||||
className="mobile-terminal-header-button"
|
||||
onClick={() => onFontSizeChange(-1)}
|
||||
type="button"
|
||||
aria-label="Decrease font size"
|
||||
>
|
||||
<span style={{ fontSize: "0.75rem" }}>A-</span>
|
||||
</button>
|
||||
<button
|
||||
className="mobile-terminal-header-button"
|
||||
onClick={() => onFontSizeChange(1)}
|
||||
type="button"
|
||||
aria-label="Increase font size"
|
||||
>
|
||||
<span style={{ fontSize: "1rem" }}>A+</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{onClose && (
|
||||
<button
|
||||
className="mobile-terminal-header-button"
|
||||
|
||||
@@ -32,6 +32,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
|
||||
sendData: (data: string) => void;
|
||||
connectionStatus: "connecting" | "connected" | "disconnected" | "error";
|
||||
focusInput: () => void;
|
||||
changeFontSize: (delta: number) => void;
|
||||
} | null>(null);
|
||||
|
||||
const headerAutoHide = useAutoHide({ timeout: 3000, enabled: isMobile });
|
||||
@@ -41,8 +42,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
|
||||
}, [headerAutoHide]);
|
||||
|
||||
const handleTerminalReady = useCallback(
|
||||
(sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void) => {
|
||||
setTerminalRef({ sendData, connectionStatus, focusInput });
|
||||
(sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void, changeFontSize: (delta: number) => void) => {
|
||||
setTerminalRef({ sendData, connectionStatus, focusInput, changeFontSize });
|
||||
},
|
||||
[]
|
||||
);
|
||||
@@ -71,6 +72,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
|
||||
onBack={onBack}
|
||||
onMenuToggle={onMenuToggle}
|
||||
onClose={onClose}
|
||||
onFontSizeChange={(delta) => terminalRef?.changeFontSize(delta)}
|
||||
isVisible={headerAutoHide.isVisible}
|
||||
connectionStatus={terminalRef?.connectionStatus}
|
||||
/>
|
||||
|
||||
@@ -15,7 +15,8 @@ interface TerminalProps {
|
||||
onTerminalReady?: (
|
||||
sendData: (data: string) => void,
|
||||
connectionStatus: "connecting" | "connected" | "disconnected" | "error",
|
||||
focusInput: () => void
|
||||
focusInput: () => void,
|
||||
changeFontSize: (delta: number) => void
|
||||
) => void;
|
||||
}
|
||||
|
||||
@@ -219,7 +220,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
const focusInput = () => {
|
||||
termRef.current?.focus();
|
||||
};
|
||||
onTerminalReadyRef.current(sendData, status, focusInput);
|
||||
const changeFontSize = (delta: number) => {
|
||||
handleFontSizeChange(delta);
|
||||
};
|
||||
onTerminalReadyRef.current(sendData, status, focusInput, changeFontSize);
|
||||
}
|
||||
|
||||
// Visibility API for reconnection
|
||||
@@ -251,7 +255,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
|
||||
const focusInput = () => {
|
||||
termRef.current?.focus();
|
||||
};
|
||||
onTerminalReady(sendData, status, focusInput);
|
||||
const changeFontSize = (delta: number) => {
|
||||
handleFontSizeChange(delta);
|
||||
};
|
||||
onTerminalReady(sendData, status, focusInput, changeFontSize);
|
||||
}
|
||||
}, [status, onTerminalReady]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user