Skip to content

feat(navigation): label the tab bar - #1629

Merged
bmc08gt merged 1 commit into
code/cashfrom
feat/tab-bar-labels
Sep 30, 2026
Merged

bmc08gt merged 1 commit into
code/cashfrom
feat/tab-bar-labels

Conversation

@bmc08gt

@bmc08gt bmc08gt commented Sep 30, 2026 •

Copy link
Copy Markdown
Collaborator

Adds a name under each tab glyph, in tab order Scan, Chat, Wallet, You, per node 10642:1325, and titles the Chat screen "Chat" from the same string. The labels always show; the iOS bar's fold-on-scroll is left for a later change.

What changes

  • Labels. String resources in :apps:flipcash:core, set in white and dimmed with the rest of the item when unselected. The design sets them in Demi 10 on a 12pt line (node 10599:65384). The theme has no 10sp token, so the name uses caption with its 18sp line height dropped, which keeps the text box tight under the glyph instead of adding a one-off style.
  • Item and pill. The design's item is 86.5×50pt with 5pt above the glyph and below the name. Glyph and name share a column padded by staticGrid.x1 (5dp), and the selected pill takes the row's height, so it frames both.
  • Bar inset. The design insets the bar 24pt from each screen edge. It was grid.x8, which is 40dp at the normal width class and left each item nearly square, so the pill read as a circle. It is now staticGrid.x5 (25dp).
  • Selected pill. As on the iOS bar, the pill reaches past its item, 10dp (staticGrid.x2) on each side, into matching side padding in the bar. The extra width keeps a "99+" badge inside the pill's round ends.
  • Glyphs and badge. Glyphs are 28dp to match the design, off the 5dp grid. The Chat tab's unread badge follows node 10599:65444: 17.5dp tall, starting 16dp into the glyph and rising 3.25dp above it, so the pill shows above the badge. Longer counts grow right from that start. The glyph's box is fixed to its size so "99+" can't pull the glyph off centre.
  • Size on device. On a Seeker each item measures 85×54dp. The extra 4dp of height is caption's 12sp text box against the design's 12pt line.

Why no scroll fold

An earlier revision folded the labels away while a tab scrolled down. It resized the bar and its haze blur on every animation frame, and a scroll that kept folding and unfolding ran at a 19ms median frame against 14ms on code/cash on the same Seeker. It was dropped rather than tuned.

@bmc08gt bmc08gt self-assigned this Sep 30, 2026
@github-actions github-actions Bot added the type: feature New functionality label Sep 30, 2026
@bmc08gt bmc08gt changed the title feat(navigation): label the tab bar and fold the labels away on scroll feat(navigation): label the tab bar Sep 30, 2026
@bmc08gt
bmc08gt force-pushed the feat/tab-bar-labels branch 2 times, most recently from 3d8f200 to a82c7d5 Compare September 30, 2026 16:36
Adds a name under each tab glyph (Scan, Chat, Wallet, You) per node
10642:1325, and titles the Chat screen "Chat" from the same string.

- The name uses caption with its 18sp line height dropped. The theme has
  no 10sp token for the design's Demi 10 on a 12pt line.
- Glyph and name share a column padded 5dp top and bottom, and the
  selected pill takes the row's height. Glyphs are 28dp to match the
  design.
- The bar is inset 25dp from each screen edge (the design's 24pt). The
  old 40dp inset left each item nearly square, so the pill read as a
  circle.
- As on the iOS bar, the selected pill reaches past its item, 10dp on
  each side, into matching side padding in the bar. The extra width
  keeps a "99+" badge inside the pill's round ends.
- The unread badge follows node 10599:65444: 17.5dp tall, starting 16dp
  into the glyph and rising 3.25dp above it. Longer counts grow right
  from that start. The glyph's box is fixed to its size so a wide badge
  can't pull the glyph off centre.
@bmc08gt
bmc08gt force-pushed the feat/tab-bar-labels branch from a82c7d5 to b5b7804 Compare September 30, 2026 16:40
@bmc08gt
bmc08gt merged commit 304e342 into code/cash Sep 30, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: feature New functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant