Polish floating bottom bar: elevation, height, overlap, and FAB shape
- Give the floating bar and search satellite the app's one shadow (nooDialogShadow) plus a smaller, tighter height on both platforms. - Let every tab's scrollable list compute its own bottom clearance (bottomBarClearance) instead of a flat 100px, so the floating bar no longer overlaps the last row/card. - Square the Android upload FAB off to a rounded-square radius when the bottom bar is attached, keeping it fully round only when floating. - Let a swipe on a file row trigger its action directly once dragged past 1.8x the reveal width, instead of requiring a second tap. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../nav/noo_nav_style.dart';
|
||||
|
||||
/// Android-only extended Upload pill, bottom-right of Files and Photos (Noo
|
||||
/// Design System project, `components/core/FAB.jsx`). 56px tall, accent
|
||||
@@ -10,11 +11,21 @@ import '../../../theme/design_tokens.dart';
|
||||
/// 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.
|
||||
///
|
||||
/// [barStyle] shapes the corners to match the bottom bar it sits above
|
||||
/// (Settings > Appearance). With [NooBottomBarStyle.floating] the FAB stays
|
||||
/// fully round (`NooRadii.pill`) - consistent with that mode's other
|
||||
/// elements, which are already rounder (the bar itself at 28px, its search
|
||||
/// satellite a full circle). With [NooBottomBarStyle.attached] the FAB
|
||||
/// squares off to `NooRadii.card`, a rounded square that fits attached's
|
||||
/// flatter, edge-to-edge aesthetic; this applies whether [collapsed] or not,
|
||||
/// so the FAB keeps one consistent identity per bar style.
|
||||
class NooFab extends StatelessWidget {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final VoidCallback? onTap;
|
||||
final bool collapsed;
|
||||
final NooBottomBarStyle barStyle;
|
||||
|
||||
const NooFab({
|
||||
super.key,
|
||||
@@ -22,17 +33,21 @@ class NooFab extends StatelessWidget {
|
||||
this.icon = LucideIcons.plus,
|
||||
this.onTap,
|
||||
this.collapsed = false,
|
||||
required this.barStyle,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final radius = BorderRadius.circular(
|
||||
barStyle == NooBottomBarStyle.attached ? NooRadii.card : NooRadii.pill,
|
||||
);
|
||||
return Material(
|
||||
color: colors.accent,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
borderRadius: radius,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
borderRadius: radius,
|
||||
child: AnimatedContainer(
|
||||
duration: NooMotion.base,
|
||||
curve: NooMotion.ease,
|
||||
|
||||
Reference in New Issue
Block a user