Layout and styles

You say what is on a page; the system decides how it looks. Everything is in points on a 360 point wide phone, and the same code draws in either style.

How a page is laid out

• A page is a column. Things appear in the order you add them.
• section and card group things. Prefer these to manual spacing.
• row sets things side by side. set_flex shares spare width by proportion.
• Pages scroll by themselves when they outgrow the screen. A hidden node takes no room.
• A list goes last in its page or tab. A footer stays at the bottom over the list.
• Scale: ZUI_SCALE, else the shell's ZTMETRO_SCALE (4 on the S9, so 1440x2960 pixels is 360x740 points), else the compositor's.

ztCoolStyle and who picks the style

ztCoolStyle is the name of this UI system. Its only styles are Metro and DotMatrix. An app cannot pick one, so it never differs from what is around it, and the two never mix. In order (pick_style in core.c):

1. ZUI_STYLE in the environment, for renders and tests only. This is what --style sets.
2. The session's ZTRF_SHELL_STYLE.
3. style = in ~/.config/ztmetro/config.
4. Metro.

zui_app_set_style and zui_app_set_theme are kept for the ABI and change nothing for a user: both styles are black, and there is no light theme.

Metro

The same widgets as ZrnMetroCore draws them: black, white Segoe UI, the app's name in capitals over a 48 pt lowercase title fixed at the top, pivots whose next titles run grey off the edge, rectangular toggles, outlined buttons that fill when pressed, round buttons with a word under them, Messaging's thread rows and bubbles, the tilt on press and the turnstile between pages.

DotMatrix

The same widgets in the same places. Everything filled is drawn by one fragment shader as dots 2.3 pt apart on one lattice, lit where the shape covers the cell's centre. Text is a 3x5 dot type drawn for this library, in upper case with no shaping, so scripts other than Latin come out as ?, as in ztMETRO. Pictures are dots of the palette's main colour at their brightness. Compared with the shell's own DotMatrix it lacks the ghost field and the glow.

dotmatrix_palette = in the same config file picks one of six palettes, by number or by name: Mono, Amber, Green, Ice, White, Red. The accent is the palette's, so set_accent is ignored.

The numbers

From .m in style-metro.c, in points, the same for both styles.

Fonts and colour

• Text: Segoe UI from the system. Selawik, its open metric twin, is bundled and used only where Segoe is absent.
• Icons: Segoe MDL2 Assets from the system. Strokes under DotMatrix or without the font.
• Metro colours: black #000000, white text, grey #999999 second lines, red #E51400 for danger, the accent for what is on.
• Accent: ZUI_ACCENT, else accent = in the config (a ztmetro colour name or #rrggbb), else cobalt #0050EF. Leave it to the system.

zui_app_set_accent(app, 0x0050ef);   /* DotMatrix ignores this; the style rules say leave it */

app.set_accent(0x0050ef);

app.set_accent(0x0050ef);

app = zrnui.App("io.github.you.notes", "Notes", accent=0x0050ef)

Style rules

• One primary button a page at most. Others tonal or plain, and danger for what destroys.
• Short noun titles. Metro shows them in lower case.
• Leave the accent to the system.
• Check both styles before you publish: zrn render --style dotmatrix.
• Do not imitate system UI. Moderators reject it.

Other scripts

In Metro, HarfBuzz shapes Sinhala, Tamil, Greek and Cyrillic, and CJK comes from fontconfig fallback. Bidirectional text is not reordered, so Arabic and Hebrew will not read correctly yet. DotMatrix shows Latin only.

Checked against zrn-sdk commit ea16771. Pictures are real renders of code that compiled. Source and proof.