ayushya/noo
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 14 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,
),
),
),
],
),
),
),
);
lib/widgets/settings/settings_tabs.dart
+43 -18
View File
@@ -15,8 +15,13 @@ import 'settings_section.dart';
class SettingsTabsSection extends StatelessWidget {
const SettingsTabsSection({super.key});
void _openDefaultTabPicker(BuildContext context, SettingsController settings) {
final visible = settings.tabOrder.where((t) => !settings.hiddenTabs.contains(t)).toList();
void _openDefaultTabPicker(
BuildContext context,
SettingsController settings,
) {
final visible = settings.tabOrder
.where((t) => !settings.hiddenTabs.contains(t))
.toList();
showSettingsPicker(
context,
title: 'Default tab',
@@ -26,7 +31,11 @@ class SettingsTabsSection extends StatelessWidget {
icon: tab.icon,
label: Text(tab.label),
trailing: tab == settings.defaultTab
? Icon(LucideIcons.check, size: 18, color: context.nooColors.accentText)
? Icon(
LucideIcons.check,
size: 18,
color: context.nooColors.accentText,
)
: null,
onTap: () {
settings.setDefaultTab(tab);
@@ -37,7 +46,12 @@ class SettingsTabsSection extends StatelessWidget {
);
}
void _handleTogglePin(BuildContext context, SettingsController settings, AppTab tab, bool pinned) {
void _handleTogglePin(
BuildContext context,
SettingsController settings,
AppTab tab,
bool pinned,
) {
// setTabHidden's `hidden` argument is the *new* hidden state, which is
// just the tab's current pinned (= visible) state flipped.
final error = settings.setTabHidden(tab, pinned);
@@ -66,7 +80,9 @@ class SettingsTabsSection extends StatelessWidget {
NooSettingsRow(
icon: LucideIcons.arrowUpDown,
label: const Text('Tap tab to scroll to top'),
subtitle: const Text('Tapping the current bottom bar tab scrolls its list back to the top'),
subtitle: const Text(
'Tapping the current bottom bar tab scrolls its list back to the top',
),
trailing: NooToggle(
checked: settings.tapTabToScrollTop,
onChanged: settings.setTapTabToScrollTop,
@@ -83,15 +99,21 @@ class SettingsTabsSection extends StatelessWidget {
tabs: settings.tabOrder,
hiddenTabs: settings.hiddenTabs,
flat: desktop,
onReorder: (oldIndex, newIndex) => _handleReorder(settings, oldIndex, newIndex),
onTogglePin: (tab, pinned) => _handleTogglePin(context, settings, tab, pinned),
onReorder: (oldIndex, newIndex) =>
_handleReorder(settings, oldIndex, newIndex),
onTogglePin: (tab, pinned) =>
_handleTogglePin(context, settings, tab, pinned),
);
if (!desktop) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SettingsSection(title: 'Tabs', subtitle: _subtitle, children: optionRows),
SettingsSection(
title: 'Tabs',
subtitle: _subtitle,
children: optionRows,
),
const SizedBox(height: NooSpace.md),
orderList,
],
@@ -164,21 +186,24 @@ class _TabOrderList extends StatelessWidget {
return Padding(
key: ValueKey(tab),
padding: EdgeInsets.only(top: index > 0 ? 1 : 0),
child: ReorderableDragStartListener(
index: index,
child: NooTabOrderRow(
icon: tab.icon,
label: tab.label,
pinned: pinned,
onTogglePin: () => onTogglePin(tab, pinned),
),
child: NooTabOrderRow(
icon: tab.icon,
label: tab.label,
pinned: pinned,
onTogglePin: () => onTogglePin(tab, pinned),
dragIndex: index,
),
);
},
);
return ClipRRect(
borderRadius: BorderRadius.circular(flat ? NooRadii.input : NooRadii.card),
child: DecoratedBox(decoration: BoxDecoration(color: colors.line), child: list),
borderRadius: BorderRadius.circular(
flat ? NooRadii.input : NooRadii.card,
),
child: DecoratedBox(
decoration: BoxDecoration(color: colors.line),
child: list,
),
);
}
}
lib/widgets/shell/shell_common.dart
+7 -7
View File
@@ -211,10 +211,10 @@ class _AccountSwitchRow extends StatelessWidget {
}
}
/// The current user's avatar in the mobile top bar. Tap opens Settings;
/// swiping up/down on it cycles to the next/previous saved account
/// immediately, with no confirmation - a shortcut alongside the full
/// switcher (drawer chevron, Settings' account list).
/// The current user's avatar in the mobile top bar. Tap opens the accounts
/// sheet ([showAccountSwitcher]); swiping up/down on it cycles to the
/// next/previous saved account immediately, with no confirmation - a
/// shortcut alongside the full switcher.
class ShellAvatarButton extends StatelessWidget {
final double hitBox;
@@ -246,17 +246,17 @@ class ShellAvatarButton extends StatelessWidget {
Widget build(BuildContext context) {
final session = context.watch<SessionController>();
return Tooltip(
message: 'Settings',
message: 'Accounts',
child: Semantics(
button: true,
label: 'Settings',
label: 'Accounts',
child: GestureDetector(
onVerticalDragEnd: (details) =>
_handleVerticalSwipe(context, details),
child: SizedBox.square(
dimension: hitBox,
child: InkResponse(
onTap: () => openSettings(context),
onTap: () => showAccountSwitcher(context),
radius: hitBox / 2,
child: Center(
child: NooAvatar(