mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-06 08:15:45 +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.
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { useSettingsStore, effectiveMailLayout } from '@/stores/settings-store';
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
|
|
export interface ListRowShape {
|
|
/** Sender, subject and date on one line instead of stacked. */
|
|
oneLine: boolean;
|
|
/** One-line rows laid out in fixed From / Subject / Date / Size columns. */
|
|
columns: boolean;
|
|
}
|
|
|
|
/**
|
|
* How the message list draws its rows.
|
|
*
|
|
* The focused list and the bottom reading pane both give the list the full
|
|
* width, so their rows run on one line. Phones fall back to stacked rows.
|
|
* A window too narrow for the split layout's two panes keeps its stacked rows
|
|
* (useDrawnMailLayout): the list is as narrow as the window.
|
|
* Columns are a table on top of the one-line rows (#262); Mountain View rows
|
|
* are shaped after Gmail and never take them.
|
|
*/
|
|
export function useListRowShape(): ListRowShape {
|
|
const mailLayout = useSettingsStore((state) => effectiveMailLayout(state.mailLayout, state.interfaceLayout, state.simpleMode));
|
|
const mountainView = useSettingsStore((state) => state.interfaceLayout === 'mountain-view');
|
|
const listColumns = useSettingsStore((state) => state.listColumns);
|
|
const isMobile = useUIStore((state) => state.isMobile);
|
|
const oneLine = !isMobile && (mailLayout === 'focus' || mailLayout === 'horizontal');
|
|
return { oneLine, columns: oneLine && listColumns && !mountainView };
|
|
}
|
|
|
|
/**
|
|
* Column widths, shared by the rows and the header above them so the two
|
|
* line up. The subject column takes whatever is left.
|
|
*/
|
|
export const LIST_COLUMN_CLASS = {
|
|
from: 'w-40 shrink-0 lg:w-56',
|
|
date: 'w-28 shrink-0 text-end',
|
|
size: 'w-16 shrink-0 text-end',
|
|
} as const;
|