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.
52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import { effectiveMailLayout, useSettingsStore, type InterfaceLayout, type MailLayout } from '@/stores/settings-store';
|
|
import { usePolicyStore } from '@/stores/policy-store';
|
|
|
|
const KEY = 'returnToListAfterAction';
|
|
|
|
/**
|
|
* Whether the message list and the reading pane are on screen side by side:
|
|
* the split and horizontal layouts on a desktop. Phones, the focused layout,
|
|
* Simple mode and Mountain View put the message in the list's place, and so
|
|
* does the split layout in a window too narrow for both (pass the layout as
|
|
* drawn, useDrawnMailLayout).
|
|
*/
|
|
export function listBesideReader(opts: {
|
|
mailLayout: MailLayout;
|
|
interfaceLayout: InterfaceLayout;
|
|
simpleMode?: boolean;
|
|
isMobile: boolean;
|
|
}): boolean {
|
|
if (opts.isMobile) return false;
|
|
return effectiveMailLayout(opts.mailLayout, opts.interfaceLayout, opts.simpleMode) !== 'focus';
|
|
}
|
|
|
|
/**
|
|
* "Return to list after delete, archive, move or mark unread", as it applies
|
|
* here. Set by the user (on any device: the choice syncs) or by the admin
|
|
* policy, the setting decides. Left alone, it follows the layout: with the
|
|
* list beside the reading pane the next message opens, as in Outlook, so a
|
|
* folder is worked through with e, e, e; where the message takes the list's
|
|
* place it goes back to the list. Each device judges its own layout.
|
|
*/
|
|
export function effectiveReturnToList(
|
|
settings: { returnToListAfterAction: boolean; explicitSettings: readonly string[] },
|
|
besideReader: boolean,
|
|
policySet: boolean,
|
|
): boolean {
|
|
if (policySet || settings.explicitSettings.includes(KEY)) return settings.returnToListAfterAction;
|
|
return besideReader ? false : settings.returnToListAfterAction;
|
|
}
|
|
|
|
/** Whether the admin policy presets or locks the setting. */
|
|
export function returnToListSetByPolicy(): boolean {
|
|
const policy = usePolicyStore.getState();
|
|
const defaults = policy.policy?.defaults;
|
|
return (!!defaults && Object.prototype.hasOwnProperty.call(defaults, KEY)) || policy.isSettingLocked(KEY);
|
|
}
|
|
|
|
/** The setting as it applies now, read at the moment of the action. */
|
|
export function returnToListAfterAction(besideReader: boolean): boolean {
|
|
return effectiveReturnToList(useSettingsStore.getState(), besideReader, returnToListSetByPolicy());
|
|
}
|
|
|