ayushya/noo
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 16 Activity

Fix five Android nav/shell UX issues

Browse Source 
- Bottom bar: labels now sit below each icon instead of beside it, and
  the active-tab pill is one shared indicator that slides between tabs
  instead of popping in/out per item.
- Upload FAB stays mounted across every tab and collapses to an
  icon-only circle off Files/Photos, instead of the Scaffold popping it
  fully in/out on every tab switch.
- Tapping the top-bar avatar now opens the accounts sheet instead of
  jumping straight to Settings.
- Settings tab reordering only starts a drag from the grip icon now -
  previously the whole row claimed vertical drags, so scrolling the
  section could trigger an accidental reorder.
This commit is contained in:
ayushya
2026-09-28 12:08:23 -04:00
parent d2c34b000f
commit 800e8ebf44
9 changed files with 488 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/noo/core/noo_fab.dart
+43 -5
View File
@@ -5,12 +5,24 @@ import '../../../theme/design_tokens.dart';
/// Android-only extended Upload pill, bottom-right of Files and Photos (Noo
/// Design System project, `components/core/FAB.jsx`). 56px tall, accent
/// fill - iOS uses a `plus` in the nav bar instead (not yet built).
///
/// [collapsed] shrinks it to an icon-only circle (no label) on tabs that
/// don't support upload, so the button stays in place and resizes as the
/// user switches tabs instead of the Scaffold popping it fully in/out -
/// the label's width animates away rather than the FAB disappearing.
class NooFab extends StatelessWidget {
final String label;
final IconData icon;
final VoidCallback? onTap;
final bool collapsed;
const NooFab({super.key, this.label = 'Upload', this.icon = LucideIcons.plus, this.onTap});
const NooFab({
super.key,
this.label = 'Upload',
this.icon = LucideIcons.plus,
this.onTap,
this.collapsed = false,
});
@override
Widget build(BuildContext context) {
@@ -21,9 +33,16 @@ class NooFab extends StatelessWidget {
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(NooRadii.pill),
child: Container(
child: AnimatedContainer(
duration: NooMotion.base,
curve: NooMotion.ease,
height: 56,
padding: const EdgeInsets.fromLTRB(16, 0, 20, 0),
padding: EdgeInsetsDirectional.fromSTEB(
16,
0,
collapsed ? 16 : 20,
0,
),
// No `alignment:` here - Container without an explicit width
// wraps its child in an Align when alignment is set, and Align
// EXPANDS to fill all available bounded space (not just the
@@ -36,8 +55,27 @@ class NooFab extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 24, color: Colors.white),
const SizedBox(width: 10),
Text(label, style: NooText.button.copyWith(color: Colors.white)),
ClipRect(
child: AnimatedSize(
duration: NooMotion.base,
curve: NooMotion.ease,
alignment: AlignmentDirectional.centerStart,
child: collapsed
? const SizedBox(height: 24)
: Row(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(width: 10),
Text(
label,
style: NooText.button.copyWith(
color: Colors.white,
),
),
],
),
),
),
],
),
),
lib/widgets/noo/lists/noo_tab_order_row.dart
+13 -1
View File
@@ -11,24 +11,36 @@ class NooTabOrderRow extends StatelessWidget {
final bool pinned;
final VoidCallback? onTogglePin;
/// This row's index inside its `ReorderableListView` - when set, only the
/// grip icon starts a drag (`ReorderableDragStartListener` wraps just the
/// icon, not the whole row), so a vertical drag/scroll starting anywhere
/// else on the row reaches the surrounding settings page's own scroll
/// view instead of being grabbed as a reorder. Null renders a plain,
/// non-interactive grip icon (e.g. a standalone preview/test).
final int? dragIndex;
const NooTabOrderRow({
super.key,
required this.icon,
required this.label,
this.pinned = false,
this.onTogglePin,
this.dragIndex,
});
@override
Widget build(BuildContext context) {
final colors = context.nooColors;
final grip = Icon(LucideIcons.gripVertical, size: 18, color: colors.fg3);
return Container(
height: 52,
padding: const EdgeInsets.symmetric(horizontal: 10),
color: colors.surface,
child: Row(
children: [
Icon(LucideIcons.gripVertical, size: 18, color: colors.fg3),
dragIndex == null
? grip
: ReorderableDragStartListener(index: dragIndex!, child: grip),
const SizedBox(width: 12),
Icon(icon, size: 20, color: colors.fg2),
const SizedBox(width: 12),
lib/widgets/noo/nav/noo_bottom_bar.dart
+106 -55
View File
@@ -4,6 +4,12 @@ import 'noo_nav_style.dart';
export 'noo_nav_style.dart';
/// Android indicator geometry, shared between the sliding pill and each
/// item's own icon box so they line up exactly.
const double _kAndroidPillTop = 14;
const double _kAndroidPillWidth = 56;
const double _kAndroidPillHeight = 32;
/// The mobile bottom bar (DESIGN_SYSTEM.md 3, "Mobile"; `iNav`/`aNav` in
/// `Mobile Screen.dc.html`). Shows the 5 pinned tabs - which ones, and in
/// what order, is the caller's business; this only draws [destinations].
@@ -11,9 +17,11 @@ export 'noo_nav_style.dart';
/// - [NooNavStyle.ios]: surface fill, 1px top `line`, a 50px row (8px top
/// padding) of icon 24 over a 10px label. Active: accent-text, 600.
/// Idle: fg-3, 500. No ripple.
/// - [NooNavStyle.android]: surface fill, 80px. The active icon sits in a
/// 56x32 accent-soft pill (accent-text icon); label is 12px, fg-1/600
/// active and fg-2/500 idle (idle icon fg-2).
/// - [NooNavStyle.android]: surface fill, 80px. Every tab shows its 24px
/// icon over a 12px label (label only visible - not removed from layout,
/// so the row never resizes - once selected). The active icon sits in a
/// 56x32 accent-soft pill that slides between tabs as selection moves,
/// rather than popping in/out on the destination item itself.
///
/// The home indicator / gesture bar area below the row comes from the
/// bottom safe-area inset rather than a fixed 34/20px spacer, so it's
@@ -37,25 +45,7 @@ class NooBottomBar extends StatelessWidget {
final colors = context.nooColors;
final ios = style == NooNavStyle.ios;
final row = Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (var i = 0; i < destinations.length; i++)
Expanded(
child: ios
? _IosItem(
destination: destinations[i],
selected: i == selectedIndex,
onTap: () => onSelected(i),
)
: _AndroidItem(
destination: destinations[i],
selected: i == selectedIndex,
onTap: () => onSelected(i),
),
),
],
);
final row = ios ? _buildIosRow() : _buildAndroidRow(colors);
return Container(
decoration: BoxDecoration(
@@ -68,6 +58,63 @@ class NooBottomBar extends StatelessWidget {
),
);
}
Widget _buildIosRow() {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (var i = 0; i < destinations.length; i++)
Expanded(
child: _IosItem(
destination: destinations[i],
selected: i == selectedIndex,
onTap: () => onSelected(i),
),
),
],
);
}
Widget _buildAndroidRow(NooColors colors) {
return LayoutBuilder(
builder: (context, constraints) {
final itemWidth = constraints.maxWidth / destinations.length;
return Stack(
children: [
AnimatedPositioned(
duration: NooMotion.base,
curve: NooMotion.ease,
top: _kAndroidPillTop,
left:
itemWidth * selectedIndex +
(itemWidth - _kAndroidPillWidth) / 2,
width: _kAndroidPillWidth,
height: _kAndroidPillHeight,
child: DecoratedBox(
decoration: BoxDecoration(
color: colors.accentSoft,
borderRadius: BorderRadius.circular(NooRadii.pill),
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (var i = 0; i < destinations.length; i++)
Expanded(
child: _AndroidItem(
destination: destinations[i],
selected: i == selectedIndex,
onTap: () => onSelected(i),
),
),
],
),
],
);
},
);
}
}
class _IosItem extends StatelessWidget {
@@ -117,6 +164,11 @@ class _IosItem extends StatelessWidget {
}
}
/// Icon (over the shared sliding pill, drawn separately by [NooBottomBar])
/// with its label always below it - the label's space is reserved
/// whether or not it's showing (only its opacity changes), so the icon
/// never shifts vertically as selection changes, and stays aligned with
/// the pill's fixed [_kAndroidPillTop]/[_kAndroidPillHeight].
class _AndroidItem extends StatelessWidget {
final NooNavDestination destination;
final bool selected;
@@ -134,43 +186,42 @@ class _AndroidItem extends StatelessWidget {
return Semantics(
button: true,
selected: selected,
// No ripple: the animated pill is the press/selection feedback.
label: destination.label,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedContainer(
duration: NooMotion.fast,
curve: NooMotion.ease,
width: 56,
height: 32,
alignment: Alignment.center,
decoration: BoxDecoration(
color: selected
? colors.accentSoft
: colors.accentSoft.withValues(alpha: 0),
borderRadius: BorderRadius.circular(NooRadii.pill),
),
child: Icon(
destination.icon,
size: 24,
color: selected ? colors.accentText : colors.fg2,
),
),
const SizedBox(height: 4),
Text(
destination.label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: (selected ? NooText.navLabelActive : NooText.navLabel)
.copyWith(
height: 1,
color: selected ? colors.fg1 : colors.fg2,
child: Padding(
padding: const EdgeInsets.only(top: _kAndroidPillTop),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: _kAndroidPillHeight,
child: Center(
child: Icon(
destination.icon,
size: 24,
color: selected ? colors.accentText : colors.fg2,
),
),
],
),
),
const SizedBox(height: 4),
AnimatedOpacity(
duration: NooMotion.base,
curve: NooMotion.ease,
opacity: selected ? 1 : 0,
child: Text(
destination.label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: NooText.navLabelActive.copyWith(
height: 1,
color: colors.fg1,
),
),
),
],
),
),
),
);