Hide window controls in macOS fullscreen mode (#134)

This commit is contained in:
Peiman Nourani
2024-12-03 18:38:01 +03:30
committed by GitHub
parent 00178ad197
commit d4dfc1c820
2 changed files with 7 additions and 4 deletions

View File

@@ -2,6 +2,7 @@ import classNames from 'classnames';
import type { HTMLAttributes, ReactNode } from 'react'; import type { HTMLAttributes, ReactNode } from 'react';
import React from 'react'; import React from 'react';
import { useSettings } from '../hooks/useSettings'; import { useSettings } from '../hooks/useSettings';
import { useOsInfo } from '../hooks/useOsInfo';
import { useStoplightsVisible } from '../hooks/useStoplightsVisible'; import { useStoplightsVisible } from '../hooks/useStoplightsVisible';
import { WINDOW_CONTROLS_WIDTH, WindowControls } from './WindowControls'; import { WINDOW_CONTROLS_WIDTH, WindowControls } from './WindowControls';
@@ -23,6 +24,7 @@ export function HeaderSize({
onlyXWindowControl, onlyXWindowControl,
children, children,
}: HeaderSizeProps) { }: HeaderSizeProps) {
const osInfo = useOsInfo();
const settings = useSettings(); const settings = useSettings();
const stoplightsVisible = useStoplightsVisible(); const stoplightsVisible = useStoplightsVisible();
return ( return (
@@ -36,7 +38,7 @@ export function HeaderSize({
...(size === 'lg' ? { height: HEADER_SIZE_LG } : {}), ...(size === 'lg' ? { height: HEADER_SIZE_LG } : {}),
...(stoplightsVisible || ignoreControlsSpacing ...(stoplightsVisible || ignoreControlsSpacing
? { paddingRight: '2px' } ? { paddingRight: '2px' }
: { paddingLeft: '2px', paddingRight: WINDOW_CONTROLS_WIDTH }), : { paddingLeft: '2px', paddingRight: osInfo.osType !== 'macos' ? WINDOW_CONTROLS_WIDTH : '2px' }),
}} }}
className={classNames( className={classNames(
className, className,
@@ -48,7 +50,7 @@ export function HeaderSize({
<div className="pointer-events-none h-full w-full overflow-x-auto hide-scrollbars grid"> <div className="pointer-events-none h-full w-full overflow-x-auto hide-scrollbars grid">
{children} {children}
</div> </div>
<WindowControls onlyX={onlyXWindowControl} /> <WindowControls onlyX={onlyXWindowControl} macos={osInfo.osType === 'macos'} />
</div> </div>
); );
} }

View File

@@ -8,18 +8,19 @@ import { HStack } from './core/Stacks';
interface Props { interface Props {
className?: string; className?: string;
onlyX?: boolean; onlyX?: boolean;
macos?: boolean;
} }
export const WINDOW_CONTROLS_WIDTH = '10.5rem'; export const WINDOW_CONTROLS_WIDTH = '10.5rem';
export function WindowControls({ className, onlyX }: Props) { export function WindowControls({ className, onlyX, macos }: Props) {
const [maximized, setMaximized] = useState<boolean>(false); const [maximized, setMaximized] = useState<boolean>(false);
const stoplightsVisible = useStoplightsVisible(); const stoplightsVisible = useStoplightsVisible();
if (stoplightsVisible) { if (stoplightsVisible) {
return null; return null;
} }
return ( return !macos && (
<HStack <HStack
className={classNames(className, 'ml-4 absolute right-0 top-0 bottom-0')} className={classNames(className, 'ml-4 absolute right-0 top-0 bottom-0')}
justifyContent="end" justifyContent="end"