Menu

A short list of words over the page: a sort order, the actions on a file, a few choices to tick. It opens from a button or a right-click and closes when something is picked.

Use a menu for choices that change what you see, and for a thing's lesser actions when there is no room for a docked panel. Three parts make it:

• MenuButton is words with a chevron that open a menu under it, aligned to its right edge.
• Menu is the popup itself, for a menu you open at a point, such as a right-click.
• MenuSurface is the menu as it looks, drawn in place. Menu shows it in a popup.

Anatomy

1. Group nameIn the meta ink for the overlay, medium weight, 13 pixels. It is not pressable and the keyboard skips it.
2. TickA check in the accent, 16 pixels, on the choice in force.
3. LineWords, 34 high, in the secondary ink. The line under the pointer or the keyboard has a wash of 10 % and its words in the main ink.
4. DetailA word or number at the end of the line, 13 pixels in the meta ink for the overlay: a key, a count.
5. RuleA hairline between groups, 9 high with the line 1 pixel at 10 % of the main ink.
6. RiskThe warning symbol and the risk ink for the overlay. It goes last.

The menu is solid, in the overlay colour, with a faint 1-pixel edge. Text under it never shows through. The overlay's inks (group names, details, the risk line) are solved to an APCA contrast of 75 on a lit line, so they read on every line.

States

A line has two states, and the keyboard adds the ring. The menu itself fades in and grows from 0.96 over 150 ms (fadeFast), and fades out over 100 ms (dismiss).

1. RestNo wash.
2. Under the pointer or the keyboardA wash of 10 %, in and out over 80 ms, and the words in the main ink. The pointer and the keyboard share one line. After a key, that line also has the focus ring, so the keyboard's place does not depend on the wash.
3. Choice in forceA tick before the words. It has no wash of its own.

Sizes

A MenuButton has the search field's padding and shape: 36 high, 12 before the words, 4 between the words and the 18-pixel chevron, 8 after.

Keys and pointer

A line with keepOpen leaves the menu open when it is picked, so several kinds can be ticked in a filter. If the first item is a group name, no line is lit until ↓.

Accessibility

• The menu is a popup menu; each line is a menu item named by its label, with the detail as its description, and says whether it is ticked. A risk line is read as its label and "warning". A rule is a separator and a group name a heading.
• A MenuButton is a menu button named by its words.
• The risk is shown by its symbol, its place and its words, not by colour alone, and the tick is a symbol.
• The focus stays inside the menu while it is open and goes back to its button on Esc.

Writing

Keep a line to a word or two: "Newest first", "Rename", "Move to the trash". Name a group with a noun: "Sort by", "Show". Put a key as the detail, as the system writes it: "F2", "Enter". Do not add "..." to a line unless it opens another step that asks you something.

Do and don't

Code

import Tacit.Kit

MenuButton {
    text: "Newest first"
    items: [
        { heading: true, label: "Sort by" },
        { label: "Newest first", checked: true },
        { label: "Oldest first" },
        { rule: true },
        { heading: true, label: "Show" },
        { label: "Hidden files", keepOpen: true }
    ]
    onPicked: i => files.choose(i)
}

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.