mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-05 16:16:49 +00:00
Linus Rath
044647ff34
A window snapped to half the screen (640-800 px) or a 1366x768 laptop at 150 % (911 px) got the phone and tablet layout: bottom tab bar, folders in a drawer, Settings as a phone list with a Back arrow. The layout switched at the 64rem (1024 px) breakpoint. Now the phone layout starts below 600 px. From 600 to 1024 px the app is a compact desktop: app rail at the side, folder sidebar folded to its icons (the existing collapsed state, opened per session with its toggle), Settings with its two panes and a narrower page list. Below 840 px the split layout opens a message in the list's place, as the focused layout does. This holds in the browser and the desktop app, in the Pro shell (which now runs from 600 px) and under Mountain View. - `hooks/use-media-query.ts`: classifyWidth, PHONE_BELOW 600, FULL_DESKTOP 1024; the tablet class (`isTablet`) is gone, the store has `isCompact` instead. Plugins still see "tablet" for it. - `app/globals.css`: a `desk:` breakpoint at 37.5rem for the layout classes, and a `tap:` variant for 44px rows on phones and touch screens below 1024 px (was every window below 1024 px). - Touch screens below 1024 px keep swiping list rows (was phones only). - The boot skeletons, boot script, mail app, sidebar, reader, admin shell and calendar, contacts and files follow the new widths. Tests changed with the behaviour: the tablet cases in pro-gate, mail-app-mv-composer-move, mail-app-compose-handoff, mail-app-thread-expand-mark-read, mobile-tour-end and thread-list-item-columns now run on a phone or a compact desktop, as those widths no longer exist as a tablet. mail-app-short-window-tab-bar is replaced by mail-app-compact-layout: a phone on its side is a compact desktop with the rail at the side, so the short-window tab bar rule is gone. Class and media-query assertions follow desk:/tap: and 37.5rem; the 32px-text test uses 1100 px, since 1440 px at 32px is now a compact desktop.
74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import { act, fireEvent, render, screen } from '@testing-library/react';
|
|
import { useEffect, useState } from 'react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
|
|
vi.mock('next/navigation', () => ({ usePathname: () => '/admin/settings' }));
|
|
vi.mock('@/components/layout/navigation-rail', () => ({ NavigationRail: () => null }));
|
|
vi.mock('@/components/settings/about-data-settings', () => ({ AboutFooter: () => null }));
|
|
vi.mock('@/lib/browser-navigation', () => ({
|
|
apiFetch: vi.fn(() => Promise.resolve({ ok: false })),
|
|
getPathPrefix: () => '',
|
|
withBasePath: (href: string) => href,
|
|
}));
|
|
|
|
import { AdminShell } from '../admin-shell';
|
|
|
|
// Turning a tablet round crosses the breakpoint between the shell's two
|
|
// layouts. The page used to be remounted there, so what the admin had typed
|
|
// and not yet saved was gone without a word.
|
|
describe('AdminShell across the desktop breakpoint', () => {
|
|
function mockWidth(initial: boolean) {
|
|
let desktop = initial;
|
|
const listeners = new Set<() => void>();
|
|
window.matchMedia = vi.fn((query: string) => ({
|
|
get matches() { return desktop && query === '(width >= 37.5rem)'; },
|
|
media: query,
|
|
addEventListener: (_: string, cb: () => void) => listeners.add(cb),
|
|
removeEventListener: (_: string, cb: () => void) => listeners.delete(cb),
|
|
})) as unknown as typeof window.matchMedia;
|
|
return (next: boolean) => act(() => {
|
|
desktop = next;
|
|
listeners.forEach((cb) => cb());
|
|
});
|
|
}
|
|
|
|
function Page({ onMount }: { onMount: () => void }) {
|
|
const [value, setValue] = useState('saved');
|
|
useEffect(onMount, [onMount]);
|
|
return <input aria-label="field" value={value} onChange={(e) => setValue(e.target.value)} />;
|
|
}
|
|
|
|
it('keeps the page mounted, with its edits, in both directions', () => {
|
|
Element.prototype.scrollTo = () => {};
|
|
const setDesktop = mockWidth(true);
|
|
const onMount = vi.fn();
|
|
render(
|
|
<AdminShell authenticated isStalwartAutoLogin={false} configReadOnly={false} onLogout={() => {}}>
|
|
<Page onMount={onMount} />
|
|
</AdminShell>,
|
|
);
|
|
fireEvent.change(screen.getByRole('textbox', { name: 'field' }), { target: { value: 'edited' } });
|
|
|
|
setDesktop(false);
|
|
expect(screen.getByRole('textbox', { name: 'field' })).toHaveValue('edited');
|
|
setDesktop(true);
|
|
expect(screen.getByRole('textbox', { name: 'field' })).toHaveValue('edited');
|
|
expect(onMount).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
// On a laptop the list runs past its fold: a page opened from a link used
|
|
// to leave its own entry out of sight.
|
|
it('brings the open page into view in the sidebar', () => {
|
|
Element.prototype.scrollTo = () => {};
|
|
const scrollIntoView = vi.fn();
|
|
Element.prototype.scrollIntoView = scrollIntoView;
|
|
mockWidth(true);
|
|
render(
|
|
<AdminShell authenticated isStalwartAutoLogin={false} configReadOnly={false} onLogout={() => {}}>
|
|
<p>page</p>
|
|
</AdminShell>,
|
|
);
|
|
expect(scrollIntoView.mock.contexts.some((el) => (el as Element).getAttribute('aria-current') === 'page')).toBe(true);
|
|
});
|
|
});
|