timescale.info#426 · Phone toolbars: one row each, with File and Tools menus
- timeline-app
- pull request
On phones (≤ 650px, the editor's existing breakpoint), the owner reported that the header actions and the timeline's controls were cramped and hard to read: the timeline's toolbar wrapped onto four rows, even in full screen. This PR gives each toolbar one row and puts everything else in a menu. Desktop and tablet layouts are unchanged. ## Phone layout **Document toolbar (above the title):** one row: `[View mode] … [File ▾] [Save to server]`. The main action is whichever one is shown (Save to server, Submit pull request, Update pull request, or the desktop's Save). **File** holds Import, Export, Import .och, Export .och ↗, and the desktop's Open and Save As…. A button hidden today stays hidden, so it stays out of the menu. File itself hides when it would be empty. The offline file shows `[New] … [File ▾]`. **Timeline toolbar:** one row: `[−] [＋] [Fit all] [⛶] … [⋯ Tools] [＋ Event]`. - Full screen is shown as a corners icon, with a pressed, tinted "exit" icon while full screen is on. The text "Full screen" / "Exit full screen" stays in the button, visually hidden, so its accessible name is unchanged. - **Tools** opens a panel under the row with: - a two-column grid: Search, Separate by tags, Time display, Plugins, Compare, Center axis and Help, with Clear selection first whenever a time is selected; - a "Text size" row: A− and A＋; - Follow latest moments, when it is shown, and Group within. - The "Timeline" heading and the footer (Help and Group within, now in Tools) are hidden on phones. The visible-range bar is one line, 11px, ending in an ellipsis; its `title` still holds the full text. - The row stays on one line down to 360px wide and wraps only on narrower screens. **Full screen:** the same single row, then the range line, then the stage. The stage takes about 90% of the screen (838 of 915px at 412×915). The card's padding uses `env(safe-area-inset-*)`. The Tools panel stays on screen and scrolls if it has to. **Platform actions row** (Star, Pull requests, Share…, injected into `#platform-timeline-actions`): unchanged apart from a 6px gap and 40px-tall targets. **Follow latest moments:** its checkbox, label and "?" are now on one line at every width. The bug (a `label`'s `flex-direction: column` was inherited) was on desktop too, so desktop changes here. ## How the menus work (`src/toolbar-menus.ts`) - Below 650px, the existing elements move into the menu, keeping their ids, handlers, `hidden` and disabled states and inline help tips. Above 650px they go back to exactly where they were, marked by comment placeholders. Nothing is duplicated. - The menu button has `aria-expanded` and `aria-controls`, and the panel is a labelled `group`. Menu items stay buttons, so tests and assistive technology still find them by role and name. - Keyboard: Enter or Space opens the menu with focus on its first control. Arrow keys, Home and End move between controls; a slider keeps its own arrow keys. Escape closes the menu and returns focus to the button, and does not also leave full screen. - Closing: - The menu closes on any `pointerdown` outside it, in the capture phase, so it is gone before a stage gesture starts. - It also closes when focus leaves it and after an action runs. - The text size buttons, the checkbox, the slider and the "?" tips leave it open. - Before an action runs, the menu button takes focus, so a dialog that the action opens returns focus to Tools when it closes. - The tour shows a "Tools" step on phones, in place of the steps for controls hidden in the menu. The "Keep your work" step falls back to File. - Colors use the theme tokens (`--raised`, `--paper`, `--line`, `--tint-strong`), checked in light and dark. Targets are at least 40px in the rows and 44px in the menus. ## Tests - New `test/mobile-toolbar-browser.mjs`, wired into `test/browser.mjs` and `test/offline-browser.mjs`. At 412, 390 and 360px, in light and dark, it checks that: - each toolbar is one row of targets at least 40px tall, with nothing overflowing…
Sources
Open #426 · Phone toolbars: one row each, with File and Tools menus in the timeline