mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-10-31 16:13:15 +00:00
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, and
|
|
* so do tablets under the bottom pane, which they draw as the split layout.
|
|
* 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));
|
|
const mountainView = useSettingsStore((state) => state.interfaceLayout === 'mountain-view');
|
|
const listColumns = useSettingsStore((state) => state.listColumns);
|
|
const isMobile = useUIStore((state) => state.isMobile);
|
|
const isTablet = useUIStore((state) => state.isTablet);
|
|
const oneLine = !isMobile && (mailLayout === 'focus' || (mailLayout === 'horizontal' && !isTablet));
|
|
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;
|