Add a floating bottom bar style, user-configurable in Settings
Settings > Appearance > "Bottom bar" now switches between the original edge-to-edge bar and a floating one - inset 16px from both side edges and clear of the bottom safe area, 28px corners (the same radius the sheet top/drawer edge use), a 1px line border standing in for elevation instead of a shadow (product UI stays flat). Persisted via NooBottomBarStyle, defaulting to the existing attached behavior. On Android, floating's idle tabs drop their reserved label space - with no label to leave room for, the icon centers in the whole button and renders a touch bigger (27 vs 24px) instead of sitting high with a gap held open under it; the active tab's icon/pill/label position is unchanged. iOS's tab content is unchanged either way, only the container. main.dart sets Scaffold.extendBody while floating so the body scrolls behind the bar's transparent margin instead of stopping short of it, matching how the design canvas explored it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -273,6 +273,7 @@ Mobile always has **5 pinned tabs in the bottom bar**. The rest go in the drawer
|
||||
| Status bar | 54px, Dynamic Island | 40px |
|
||||
| Top bar | 44px row: `menu` on the left; `plus` and avatar on the right (all accent-text). Then a 34px large title, then the search field. | 64px: `menu`, 22px title, `search`, avatar |
|
||||
| Bottom bar | Surface fill, 1px top line. Icon 24 above a 10px label. Active: accent-text. Idle: fg-3. 34px home indicator below. | Surface fill, 80px. Icon 24 above a 12px label (label space is always reserved, just invisible when idle, so nothing shifts on selection). The active icon sits inside a 56×32 accent-soft pill that slides between tabs as one shared indicator, rather than popping in/out per tab. 20px gesture bar below. |
|
||||
| Bottom bar - floating (Settings → Appearance → "Bottom bar", both platforms) | Same content, inset 16px from both side edges and clear of the bottom safe area instead of edge to edge, radius 28 (the sheet-top/drawer-edge radius) rather than square corners. No shadow (product UI stays flat - see 1.4); a 1px `line` border stands in for elevation instead. Row height drops slightly (64/72 vs 50/80) to suit. Android's idle tabs drop their reserved label space in this mode - the icon just centers in the button and renders a touch bigger (27 vs 24px) - rather than sitting high with a gap held open under it. `Scaffold.extendBody: true` while floating, so the body scrolls behind the bar's transparent margin instead of stopping short of it. |
|
||||
| Upload | `plus` in the nav bar | Extended FAB |
|
||||
| Overflow icon | `ellipsis` | `ellipsis-vertical` |
|
||||
| Settings | Pushed screen with a "‹ Files" back button and a large title. No bottom bar. | Pushed screen with a back arrow and a title. No bottom bar. |
|
||||
|
||||
@@ -191,7 +191,12 @@ blocks are noted where they matter:
|
||||
opacity/blur knob - flat surfaces per the design system), grid tiles are
|
||||
`NooGridCard`, swipe actions are `NooSwipeAction`, and per-item sync
|
||||
status is `NooFileRow`/`NooFileTableRow`'s built-in `NooStatusIcon` list
|
||||
instead of a corner badge.
|
||||
instead of a corner badge. `NooBottomBar` later gained its own, unrelated
|
||||
`NooBottomBarStyle.floating` (Settings → Appearance → "Bottom bar") -
|
||||
don't confuse the two: this one is still flat/non-blurred, just inset
|
||||
with a `line` border instead of edge to edge (no opacity/blur knob
|
||||
either). The host `Scaffold` needs `extendBody: true` while it's active
|
||||
(`main.dart` already wires this off `SettingsController.bottomBarStyle`).
|
||||
- [`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) —
|
||||
the pull-to-sync `CustomScrollView` header with the persistent sync-status
|
||||
chip and pull-to-refresh gesture/spinner. Every screen (including
|
||||
|
||||
Reference in New Issue
Block a user