ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(navigation): Add configurable tablet drawer behavior

Browse Source
This commit is contained in:
cogwheel0
2025-11-21 11:45:09 +05:30
parent 7dd4c156fd
commit dc1e4ec14d
3 changed files with 96 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/features/chat/views/chat_page.dart
View File

@@ -1331,41 +1331,44 @@ class _ChatPageState extends ConsumerState<ChatPage> {
), ),
onPressed: _clearSelection, onPressed: _clearSelection,
) )
: (isTablet : Builder(
? null // Hide menu button on tablets (drawer is always visible) builder: (ctx) => Padding(
: Builder( padding: const EdgeInsets.only(
builder: (ctx) => Padding( left: Spacing.inputPadding,
padding: const EdgeInsets.only( ),
left: Spacing.inputPadding, child: IconButton(
), onPressed: () {
child: IconButton( final layout = ResponsiveDrawerLayout.of(ctx);
onPressed: () { if (layout == null) return;
// Suppress auto-focus and dismiss keyboard, then open drawer
try { final isDrawerOpen = layout.isOpen;
ref if (!isDrawerOpen) {
.read( try {
composerAutofocusEnabledProvider ref
.notifier, .read(
) composerAutofocusEnabledProvider
.set(false); .notifier,
FocusManager.instance.primaryFocus )
?.unfocus(); .set(false);
SystemChannels.textInput.invokeMethod( FocusManager.instance.primaryFocus
'TextInput.hide', ?.unfocus();
); SystemChannels.textInput.invokeMethod(
} catch (_) {} 'TextInput.hide',
ResponsiveDrawerLayout.of(ctx)?.open(); );
}, } catch (_) {}
icon: Icon( }
Platform.isIOS layout.toggle();
? CupertinoIcons.line_horizontal_3 },
: Icons.menu, icon: Icon(
color: context.conduitTheme.textPrimary, Platform.isIOS
size: IconSize.appBar, ? CupertinoIcons.line_horizontal_3
), : Icons.menu,
), color: context.conduitTheme.textPrimary,
), size: IconSize.appBar,
)), ),
),
),
),
title: _isSelectionMode title: _isSelectionMode
? Text( ? Text(
'${_selectedMessageIds.length} selected', '${_selectedMessageIds.length} selected',

9
lib/features/navigation/widgets/chats_drawer.dart
View File

@@ -1438,9 +1438,14 @@ class _ChatsDrawerState extends ConsumerState<ChatsDrawer> {
container.read(chat.chatMessagesProvider.notifier).clearMessages(); container.read(chat.chatMessagesProvider.notifier).clearMessages();
// Close the slide drawer for faster perceived performance // Close the slide drawer for faster perceived performance
// (only on mobile; on tablet, drawer stays visible) // (only on mobile; keep tablet drawer unless user toggles it)
if (mounted) { if (mounted) {
ResponsiveDrawerLayout.of(context)?.close(); final mediaQuery = MediaQuery.maybeOf(context);
final isTablet =
mediaQuery != null && mediaQuery.size.shortestSide >= 600;
if (!isTablet) {
ResponsiveDrawerLayout.of(context)?.close();
}
} }
// Load the full conversation details in the background // Load the full conversation details in the background

61
lib/shared/widgets/responsive_drawer_layout.dart
View File

@@ -8,6 +8,7 @@ import '../../shared/theme/theme_extensions.dart';
/// ///
/// On tablets (shortestSide >= 600), the drawer is always visible alongside /// On tablets (shortestSide >= 600), the drawer is always visible alongside
/// the content. On mobile, it behaves like a standard slide drawer. /// the content. On mobile, it behaves like a standard slide drawer.
/// Tablets can optionally dismiss the docked drawer to reclaim space.
class ResponsiveDrawerLayout extends StatefulWidget { class ResponsiveDrawerLayout extends StatefulWidget {
final Widget child; final Widget child;
final Widget drawer; final Widget drawer;
@@ -26,6 +27,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
// Tablet-specific configuration // Tablet-specific configuration
final double tabletDrawerWidth; // Fixed width for tablet drawer final double tabletDrawerWidth; // Fixed width for tablet drawer
final bool tabletDismissible;
final bool tabletInitiallyDocked;
const ResponsiveDrawerLayout({ const ResponsiveDrawerLayout({
super.key, super.key,
@@ -42,6 +45,8 @@ class ResponsiveDrawerLayout extends StatefulWidget {
this.contentBlurSigma = 2.0, this.contentBlurSigma = 2.0,
this.onOpenStart, this.onOpenStart,
this.tabletDrawerWidth = 320.0, this.tabletDrawerWidth = 320.0,
this.tabletDismissible = true,
this.tabletInitiallyDocked = true,
}); });
static ResponsiveDrawerLayoutState? of(BuildContext context) => static ResponsiveDrawerLayoutState? of(BuildContext context) =>
@@ -58,6 +63,7 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
duration: widget.duration, duration: widget.duration,
value: 0.0, value: 0.0,
); );
late bool _isTabletDocked = widget.tabletInitiallyDocked;
bool _isTablet(BuildContext context) { bool _isTablet(BuildContext context) {
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
@@ -73,7 +79,20 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
double get _edgeWidth => double get _edgeWidth =>
MediaQuery.of(context).size.width * widget.edgeFraction; MediaQuery.of(context).size.width * widget.edgeFraction;
bool get isOpen => _controller.value == 1.0; bool get isOpen =>
_isTablet(context) ? _isTabletDocked : _controller.value == 1.0;
@override
void didUpdateWidget(covariant ResponsiveDrawerLayout oldWidget) {
super.didUpdateWidget(oldWidget);
if (!widget.tabletDismissible && !_isTabletDocked) {
setState(() => _isTabletDocked = true);
} else if (widget.tabletInitiallyDocked !=
oldWidget.tabletInitiallyDocked &&
_isTablet(context)) {
setState(() => _isTabletDocked = widget.tabletInitiallyDocked);
}
}
Future<void> _animateTo( Future<void> _animateTo(
double target, { double target, {
@@ -99,8 +118,12 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
void open({double velocity = 0.0}) { void open({double velocity = 0.0}) {
// Only animate on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!_isTabletDocked) {
setState(() => _isTabletDocked = true);
}
return;
}
try { try {
widget.onOpenStart?.call(); widget.onOpenStart?.call();
@@ -110,15 +133,23 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
void close({double velocity = 0.0}) { void close({double velocity = 0.0}) {
// Only animate on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!widget.tabletDismissible) return;
if (_isTabletDocked) {
setState(() => _isTabletDocked = false);
}
return;
}
_animateTo(0.0, velocity: velocity, easeOut: true); _animateTo(0.0, velocity: velocity, easeOut: true);
} }
void toggle() { void toggle() {
// Only toggle on mobile; on tablet, drawer is always visible if (_isTablet(context)) {
if (_isTablet(context)) return; if (!widget.tabletDismissible) return;
setState(() => _isTabletDocked = !_isTabletDocked);
return;
}
isOpen ? close() : open(); isOpen ? close() : open();
} }
@@ -189,18 +220,28 @@ class ResponsiveDrawerLayoutState extends State<ResponsiveDrawerLayout>
} }
Widget _buildTabletLayout(ConduitThemeExtension theme) { Widget _buildTabletLayout(ConduitThemeExtension theme) {
final targetWidth = widget.tabletDismissible && !_isTabletDocked
? 0.0
: widget.tabletDrawerWidth;
return Row( return Row(
children: [ children: [
// Persistent drawer // Persistent drawer
Container( AnimatedContainer(
width: widget.tabletDrawerWidth, duration: widget.duration,
curve: widget.curve,
width: targetWidth,
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.surfaceBackground, color: theme.surfaceBackground,
border: Border( border: Border(
right: BorderSide(color: theme.dividerColor, width: 1), right: BorderSide(color: theme.dividerColor, width: 1),
), ),
), ),
child: widget.drawer, child: ClipRect(
child: IgnorePointer(
ignoring: widget.tabletDismissible && !_isTabletDocked,
child: widget.drawer,
),
),
), ),
// Content // Content
Expanded(child: widget.child), Expanded(child: widget.child),