Repository navigation
UI and UX: themes held to contrast, a footer for every mode, mouse, NO_COLOR - #97
Closed
nicholasjpaterno wants to merge 13 commits into
Closed
nicholasjpaterno wants to merge 13 commits into
nicholasjpaterno wants to merge 13 commits into
Conversation
TREEMD_SCREENSHOTS=dir cargo test screenshots -- --ignored draws seven screens (normal, help, themes, palette, search, interactive, links) in every theme through TestBackend and writes each as an SVG with its colors. rsvg-convert turns them into PNGs. Ignored by default, since it checks nothing.
… margin A column was sized at 70% of its average cell and 30% of its widest, so in a column of Next and Previous, Previous wrapped with the pane half empty. Columns are their widest cell now, measured without inline code's backticks; a table too wide for the pane is still fitted by trimming its widest columns first. A cell holding inline code also lost the one-space margin every other cell has, and sat against the border.
Each theme was 37 colors set by hand, twice, once more for 256 colors, and popup hints came out at 1.4:1 in Nord and footer hints under 3:1 in four themes. A theme is now a palette of a dozen colors by role, and one function derives every field from it. Text is held to WCAG contrast against what it is drawn on, after rounding to the terminal's colors, moving only the colors that fall short; a test checks every theme in 24-bit and 256 colors. New: One Dark, Rose Pine, Kanagawa, Everforest, GitHub Dark, and three light themes, Catppuccin Latte, Solarized Light and GitHub Light. The Terminal theme uses the terminal's own background and 16 colors. The theme picker lists them all with a swatch of each, from the theme list rather than a table of indexes. The 256-color rounding uses the xterm cube's real levels. The code theme defaults to auto, following the UI theme, so a light theme gets light code blocks. The frame is painted with the theme's background first, so a light theme no longer has a dark title bar, and popups set their text color, which left help text light gray on light themes. An unknown --theme is an error listing the themes, not a silent fallback.
…you are The footer only knew five modes and showed the main view's keys over help, the theme and file pickers, link search and the outline filter, where those keys type text or drive the popup. It now reads the hints for the mode the keys are read in, typing hints included, and on a narrow terminal drops hints from the end but always keeps the one for help, which at 60 columns used to be cut off. The status bar has a mode chip in every mode, a breadcrumb of the selected heading, and its position pinned to the right edge. Unsaved edits, the todo filter, a bookmark and file history stay marked there, where unsaved edits and the todo filter were only a passing message. Theme and outline width, which the screen already shows, are gone from it. Chip text picks whichever color reads on the chip.
The title bar is one row, the document on the left and its heading count on the right, without the rule under it. Panes are rounded, and the focused pane's title is drawn as a chip, so which pane has the keys shows in its shape as well as its color. Scrollbars are a thumb on the border and are not drawn when everything fits. The content pane has a column of space each side, and images and diagrams are placed in it. The search bar is one row instead of a three-row box, with the query in full-strength text and the match count on the right. Every popup is drawn by one frame: rounded, its title in bold, in its own colors. The link, file and command pickers are lists that keep the selection in view, like the theme picker, instead of paragraphs scrolled by hand with a drawn cursor; the link and file pickers are sized to what they hold. The four confirmation dialogs are one. Popups no longer repeat key hints, which the footer now shows for the popup that is open, and the interactive and table modes no longer put their keys in a status message on every move.
…hen they do nothing q closes help, the theme picker and the file picker, as it closes a pager, instead of quitting the app; Ctrl+c does what q does. Ctrl+d, Ctrl+u, Ctrl+f and Ctrl+b page, in the main view and in help, search and interactive mode. Keys that did nothing now say why: f with no links in the section, which opened an empty list; ' with no bookmark; b and F with no history; n and N with no search or no matches; Enter on a palette that matches nothing, which closed it. The todo filter says when nothing has an open todo instead of leaving an empty outline, and Esc clears it. The file picker opens in the open file's folder, not the working directory. Help lists every key the main view binds, a test holds it to that, and shows up to two keys per action; it left out the todo filter, line scrolling and Shift+Tab. The palette lists reading commands before editing ones. The placeholder for a directory says o opens a file, and the Terminal.app notice says Enter continues and no longer calls every macOS before 26 Sequoia.
The wheel went to the focused pane wherever the pointer was, so with the outline focused, wheeling over the text stepped from heading to heading, and clicks did nothing. The frame now records where it drew each pane: the wheel scrolls the text three lines a notch or moves through the outline, whichever is under the pointer, a click on a heading selects it and a second click folds or unfolds it, and a click on the text focuses it. With help, a picker or the palette in front, the wheel is still that popup's arrow keys.
With NO_COLOR set (no-color.org), or --color-mode none or color_mode = "none", treemd draws in the terminal's own colors and marks what color marked with text style: the selection, chips, the status bar and the current match in reverse video, other matches underlined. Code is not highlighted and custom colors do not apply. An explicit color mode still wins over NO_COLOR. The selected-element marker, a selected link or cell, and chips were each built from their colors in many places, eighteen for the marker alone; they go through one style each now, which is where monochrome swaps color for reverse video.
With the outline hidden, by w or for want of width, the keys act on the content, but the focus could still be the outline, so neither pane showed the focus chip. The content pane takes it whenever the outline is not drawn. The changelog has the UI work under Unreleased.
…iases Help descriptions wrapped under the key column at 60 columns; they are short enough to stay on their row now. The palette listed every alias, which ran Collapse level off the edge; it shows the first three.
clap joined the example lines and value lists into one run-on line. --color-mode lists none, --query-output names json-pretty, and -o describes its values once, on the enum.
-o beside -q or -s is a usage error, not ignored; -e is the way to detect an empty result; // binds tighter than a comparison here; and the skill lists all seventeen themes.
A screenshot and a theme gallery rendered by the screenshot test replace a 4.3 MB recording of the old UI; just readme-images remakes them. The README lists every key and every setting with its default, and drops the stale roadmap and comparison table. The changelog loses its last em-dashes.
Merged
Contributor
Author
|
Closing in favor of #96, which carries these same commits so they ship in 0.10.0. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A pass over the TUI's look and feel, from a hands-on review in a pty at three terminal sizes and a survey of what ratatui 0.30 offers. Each commit is one area;
CHANGELOG.mdunder Unreleased has the details.Themes are now a palette of a dozen colors by role, and one function derives every field from it. Text is held to WCAG contrast against what it is drawn on, after rounding to the terminal's colors, and a test checks all of them in 24-bit and 256 colors; the review had found popup hints at 1.4:1 in Nord. Nine new themes, three of them light, plus Terminal, which uses the terminal's own colors. The code theme defaults to
autoand follows the UI theme.The footer shows the keys of whatever has the keyboard, in every mode, and keeps
? helpat any width. The status bar has a mode chip, a breadcrumb, unsaved edits and the todo filter. Panes are rounded with the focused one's title as a chip, popups share one frame, and the pickers are lists that keep the selection in view.NO_COLORgives a monochrome mode that marks with reverse video and underline. The wheel scrolls the pane under the pointer, and clicks select a heading or focus a pane.qcloses help and the pickers,Ctrl+d/u/f/bpage, and keys that do nothing say why.Fixes along the way: tables wrapped columns that had room, a light theme's title bar and popup text were drawn in the terminal's dark default, and the 256-color fallback rounded to the wrong cube levels.
TREEMD_SCREENSHOTS=dir cargo test screenshots -- --ignoredwrites SVGs of eight screens in every theme, monochrome and a 60-column terminal, for reviewing changes like these.The README is rewritten around the new UI. A screenshot and a theme gallery made from that test replace the 4.3 MB recording of the old one, and
just readme-imagesremakes them. It now lists every key and every setting with its default.--helpkeeps its example lists instead of joining them into one line, and the query guide and agent skill were checked against the binary, about 250 commands, and corrected where they'd drifted.#96, the 0.10.0 release, is stacked on this branch, so merge this one first.