mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-04-24 17:58:27 +02:00
Hide window controls in macOS fullscreen mode (#134)
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user