diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx index fdcf0c07c..fc006960b 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx @@ -8,6 +8,7 @@ import { useDisclosure, useFullscreen } from '@mantine/hooks'; import { isLocalhost, supportsFullscreen } from '../../../externals'; import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake'; import { navigatorConstants } from '../../../viewerConfig'; +import { useIsSmallScreen } from '../../hooks/useIsSmallScreen'; import { useClientStore } from '../../stores/clientStore'; import { useViewOptionsStore } from '../../stores/viewOptions'; import IconButton from '../buttons/IconButton'; @@ -29,6 +30,7 @@ export default memo(NavigationMenu); function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) { const id = useClientStore((store) => store.id); const name = useClientStore((store) => store.name); + const isSmallScreen = useIsSmallScreen(); const [isRenameOpen, handlers] = useDisclosure(false); const { fullscreen, toggle } = useFullscreen(); @@ -79,11 +81,15 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
- + Cuesheet - + Operator @@ -91,7 +97,12 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
{navigatorConstants.map((route) => ( - + {route.label} ))} diff --git a/apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx b/apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx index e1fe59fa4..dec495067 100644 --- a/apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx +++ b/apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx @@ -11,15 +11,22 @@ import style from './ClientLink.module.scss'; interface ClientLinkProps { current: boolean; to: string; + postAction?: () => void; } -export default function ClientLink({ current, to, children }: PropsWithChildren) { +export default function ClientLink({ current, to, postAction, children }: PropsWithChildren) { const { isElectron } = useElectronEvent(); const navigate = useNavigate(); if (isElectron) { return ( - handleLinks(to)}> + { + handleLinks(to); + postAction?.(); + }} + > {children} @@ -27,7 +34,13 @@ export default function ClientLink({ current, to, children }: PropsWithChildren< } return ( - navigate(`/${to}`)}> + { + navigate(`/${to}`); + postAction?.(); + }} + > {children} ); diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx index 83c5193c9..aef0de6f4 100644 --- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx +++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx @@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router'; import { Dialog } from '@base-ui-components/react/dialog'; import { OntimeView } from 'ontime-types'; +import { useIsSmallScreen } from '../../hooks/useIsSmallScreen'; import useViewSettings from '../../hooks-query/useViewSettings'; import Button from '../buttons/Button'; import IconButton from '../buttons/IconButton'; @@ -27,6 +28,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) { const [_, setSearchParams] = useSearchParams(); const { data: viewSettings } = useViewSettings(); const { isOpen, close } = useViewParamsEditorStore(); + const isSmallScreen = useIsSmallScreen(); const handleClose = () => { close(); @@ -42,6 +44,10 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) { const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget)); const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions); setSearchParams(newSearchParams); + + if (isSmallScreen) { + close(); + } }; return ( diff --git a/e2e/tests/features/207-view-params.spec.ts b/e2e/tests/features/207-view-params.spec.ts index f738e90a5..1f26b4241 100644 --- a/e2e/tests/features/207-view-params.spec.ts +++ b/e2e/tests/features/207-view-params.spec.ts @@ -9,7 +9,6 @@ test('View params configures timer view', async ({ page }) => { await page.getByTestId('navigation__toggle-settings').click(); await page.locator('label').filter({ hasText: 'Hide Time NowHides the Time' }).locator('span').nth(2).click(); await page.getByTestId('apply-view-params').click(); - await page.getByTestId('close-view-params').click(); await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport(); await expect(page).toHaveURL(/.*hideClock=true/);