From 455ffcac19cd95c057c52dae2c857cd618aa4de0 Mon Sep 17 00:00:00 2001 From: LittleSheep Date: Thu, 14 Nov 2024 00:20:59 +0800 Subject: [PATCH] :sparkles: Expanded drawer nav --- assets/translations/en-US.json | 6 +++--- lib/widgets/attachment/attachment_list.dart | 14 +++++++------ .../navigation/app_drawer_navigation.dart | 11 +++++++++- lib/widgets/navigation/app_scaffold.dart | 20 ++++++++++++++++--- lib/widgets/post/post_item.dart | 11 +++++++--- 5 files changed, 46 insertions(+), 16 deletions(-) diff --git a/assets/translations/en-US.json b/assets/translations/en-US.json index d8dd878..0e1710d 100644 --- a/assets/translations/en-US.json +++ b/assets/translations/en-US.json @@ -97,9 +97,9 @@ "postReact": "React", "postReactions": "Reactions of Post", "postReactionPoints": { - "zero": "{}pt", - "one": "{}pt", - "other": "{}pts" + "zero": "{} pt", + "one": "{} pt", + "other": "{} pts" }, "postReactCompleted": "Reaction has been added.", "postReactUncompleted": "Reaction has been removed.", diff --git a/lib/widgets/attachment/attachment_list.dart b/lib/widgets/attachment/attachment_list.dart index c974094..1bb95dd 100644 --- a/lib/widgets/attachment/attachment_list.dart +++ b/lib/widgets/attachment/attachment_list.dart @@ -10,15 +10,15 @@ import 'package:surface/widgets/attachment/attachment_item.dart'; class AttachmentList extends StatelessWidget { final List data; final bool? bordered; - final double? maxListHeight; + final double? maxHeight; const AttachmentList({ super.key, required this.data, this.bordered, - this.maxListHeight, + this.maxHeight, }); - static const double kMaxListItemWidth = 520; + static const double kMaxItemWidth = 520; static const BorderRadius kDefaultRadius = BorderRadius.all(Radius.circular(8)); @@ -33,9 +33,10 @@ class AttachmentList extends StatelessWidget { if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) { return Container( constraints: BoxConstraints( + maxHeight: maxHeight ?? double.infinity, maxWidth: math.min( MediaQuery.of(context).size.width - 20, - kMaxListItemWidth, + kMaxItemWidth, ), ), decoration: BoxDecoration( @@ -64,7 +65,7 @@ class AttachmentList extends StatelessWidget { } return Container( - constraints: BoxConstraints(maxHeight: maxListHeight ?? 320), + constraints: BoxConstraints(maxHeight: maxHeight ?? 320), child: ScrollConfiguration( behavior: _AttachmentListScrollBehavior(), child: ListView.separated( @@ -73,9 +74,10 @@ class AttachmentList extends StatelessWidget { itemBuilder: (context, idx) { return Container( constraints: BoxConstraints( + maxHeight: maxHeight ?? double.infinity, maxWidth: math.min( MediaQuery.of(context).size.width - 20, - kMaxListItemWidth, + kMaxItemWidth, ), ), decoration: BoxDecoration( diff --git a/lib/widgets/navigation/app_drawer_navigation.dart b/lib/widgets/navigation/app_drawer_navigation.dart index 41e94c8..4d3edb4 100644 --- a/lib/widgets/navigation/app_drawer_navigation.dart +++ b/lib/widgets/navigation/app_drawer_navigation.dart @@ -1,7 +1,10 @@ +import 'dart:math' as math; + import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; +import 'package:responsive_framework/responsive_framework.dart'; import 'package:styled_widget/styled_widget.dart'; import 'package:surface/providers/navigation.dart'; @@ -27,6 +30,10 @@ class _AppNavigationDrawerState extends State { Widget build(BuildContext context) { final nav = context.watch(); + final backgroundColor = ResponsiveBreakpoints.of(context).largerThan(MOBILE) + ? Theme.of(context).colorScheme.surface + : null; + return ListenableBuilder( listenable: nav, builder: (context, _) { @@ -36,6 +43,7 @@ class _AppNavigationDrawerState extends State { ]; return NavigationDrawer( + backgroundColor: backgroundColor, selectedIndex: nav.currentIndex, children: [ Column( @@ -48,7 +56,8 @@ class _AppNavigationDrawerState extends State { ], ).padding( horizontal: 32, - vertical: 8, + top: math.max(MediaQuery.of(context).padding.top, 16), + bottom: 16, ), ...destinations.where((ele) => ele.isPinned).map((ele) { return NavigationDrawerDestination( diff --git a/lib/widgets/navigation/app_scaffold.dart b/lib/widgets/navigation/app_scaffold.dart index acf932e..b32e44f 100644 --- a/lib/widgets/navigation/app_scaffold.dart +++ b/lib/widgets/navigation/app_scaffold.dart @@ -30,14 +30,16 @@ class AppScaffold extends StatelessWidget { @override Widget build(BuildContext context) { - final isShowDrawer = showDrawer; + final isShowDrawer = showDrawer + ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE) + : false; final isShowBottomNavigation = (showBottomNavigation) - ? (ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)) + ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE) : false; final state = GoRouter.maybeOf(context); - return AppBackground( + final innerWidget = AppBackground( child: Scaffold( appBar: appBar ?? (autoImplyAppBar @@ -59,5 +61,17 @@ class AppScaffold extends StatelessWidget { isShowBottomNavigation ? AppBottomNavigationBar() : null, ), ); + + if (showDrawer) { + return Row( + children: [ + AppNavigationDrawer(), + VerticalDivider(width: 1, color: Theme.of(context).dividerColor), + Expanded(child: innerWidget), + ], + ); + } + + return innerWidget; } } diff --git a/lib/widgets/post/post_item.dart b/lib/widgets/post/post_item.dart index 3455dfe..8271807 100644 --- a/lib/widgets/post/post_item.dart +++ b/lib/widgets/post/post_item.dart @@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart'; import 'package:material_symbols_icons/symbols.dart'; import 'package:provider/provider.dart'; import 'package:relative_time/relative_time.dart'; +import 'package:responsive_framework/responsive_framework.dart'; import 'package:styled_widget/styled_widget.dart'; import 'package:surface/providers/userinfo.dart'; import 'package:surface/types/post.dart'; @@ -33,6 +34,10 @@ class PostItem extends StatelessWidget { @override Widget build(BuildContext context) { + final isListAttachments = + ResponsiveBreakpoints.of(context).largerThan(MOBILE) || + (data.preload?.attachments?.length ?? 0) > 1; + return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -40,14 +45,14 @@ class PostItem extends StatelessWidget { _PostContentBody(data: data.body).padding(horizontal: 16, bottom: 6), if (data.repostTo != null) _PostQuoteContent(child: data.repostTo!).padding( - horizontal: 8, - bottom: 4, + horizontal: 12, ), if (data.preload?.attachments?.isNotEmpty ?? true) AttachmentList( data: data.preload!.attachments!, bordered: true, - ), + maxHeight: 520, + ).padding(horizontal: isListAttachments ? 12 : 0), _PostBottomAction( data: data, showComments: showComments,