From a8edd26ba262a56339653be09a2d01724c3a1b2c Mon Sep 17 00:00:00 2001 From: LittleSheep Date: Sun, 2 Jun 2024 22:45:54 +0800 Subject: [PATCH] :sparkles: Large screen sidebar --- lib/screens/channel/channel_chat.dart | 4 +++- lib/shells/nav_shell.dart | 13 ++++++++++- lib/theme.dart | 8 +++++-- lib/translations.dart | 4 ++++ lib/widgets/sidebar/sidebar_placeholder.dart | 23 ++++++++++++++++++++ 5 files changed, 48 insertions(+), 4 deletions(-) create mode 100644 lib/widgets/sidebar/sidebar_placeholder.dart diff --git a/lib/screens/channel/channel_chat.dart b/lib/screens/channel/channel_chat.dart index 979654e..24256df 100644 --- a/lib/screens/channel/channel_chat.dart +++ b/lib/screens/channel/channel_chat.dart @@ -1,4 +1,5 @@ import 'dart:async'; +import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:get/get.dart'; @@ -210,6 +211,7 @@ class _ChannelChatScreenState extends State { return InkWell( child: Container( child: ChatMessage( + key: Key('m${item.uuid}'), item: item, isMerged: isMerged, ).paddingOnly( @@ -327,7 +329,7 @@ class _ChannelChatScreenState extends State { ], ), Positioned( - bottom: MediaQuery.of(context).padding.bottom, + bottom: math.max(MediaQuery.of(context).padding.bottom, 16), left: 16, right: 16, child: ChatMessageInput( diff --git a/lib/shells/nav_shell.dart b/lib/shells/nav_shell.dart index 8151e3d..985d38a 100644 --- a/lib/shells/nav_shell.dart +++ b/lib/shells/nav_shell.dart @@ -6,6 +6,7 @@ import 'package:solian/theme.dart'; import 'package:solian/widgets/prev_page.dart'; import 'package:solian/widgets/navigation/app_navigation_bottom_bar.dart'; import 'package:solian/widgets/navigation/app_navigation_rail.dart'; +import 'package:solian/widgets/sidebar/sidebar_placeholder.dart'; class NavShell extends StatelessWidget { final bool showAppBar; @@ -42,7 +43,17 @@ class NavShell extends StatelessWidget { children: [ const AppNavigationRail(), const VerticalDivider(thickness: 0.3, width: 1), - Expanded(child: child), + Flexible( + flex: 2, + child: child, + ), + if (SolianTheme.isExtraLargeScreen(context)) + const VerticalDivider(thickness: 0.3, width: 1), + if (SolianTheme.isExtraLargeScreen(context)) + const Flexible( + flex: 1, + child: SidebarPlaceholder(), + ), ], ) : child, diff --git a/lib/theme.dart b/lib/theme.dart index c9b8c06..a4bb55a 100644 --- a/lib/theme.dart +++ b/lib/theme.dart @@ -4,11 +4,15 @@ abstract class SolianTheme { static bool isLargeScreen(BuildContext context) => MediaQuery.of(context).size.width > 640; + static bool isExtraLargeScreen(BuildContext context) => + MediaQuery.of(context).size.width > 720; + static ThemeData build(Brightness brightness) { return ThemeData( brightness: brightness, useMaterial3: true, - colorScheme: ColorScheme.fromSeed(brightness: brightness, seedColor: Colors.indigo), + colorScheme: ColorScheme.fromSeed( + brightness: brightness, seedColor: Colors.indigo), ); } -} \ No newline at end of file +} diff --git a/lib/translations.dart b/lib/translations.dart index 6763ffa..227f9ab 100644 --- a/lib/translations.dart +++ b/lib/translations.dart @@ -182,6 +182,8 @@ class SolianMessages extends Translations { 'callParticipantVideoOff': 'Turn Off Participant Video', 'callParticipantVideoOn': 'Turn On Participant Video', 'callAlreadyOngoing': 'A call is already ongoing', + 'sidebarPlaceholder': + 'Your screen is really too large, so we had to leave some space here to prevent the layout from being too messy. In the future, we will add some small widgets here for wealthy users like you to enjoy, but for now, it will stay this way.' }, 'zh_CN': { 'hide': '隐藏', @@ -351,6 +353,8 @@ class SolianMessages extends Translations { 'callParticipantVideoOff': '静音参与者', 'callParticipantVideoOn': '解除静音参与者', 'callAlreadyOngoing': '当前正在进行一则通话', + 'sidebarPlaceholder': + '你的屏幕真的太大啦,我们只好空出一块地方好让布局不那么混乱,未来我们会在此处加入一下小挂件来供你这样的富人玩乐,但现在就这样吧。' } }; } diff --git a/lib/widgets/sidebar/sidebar_placeholder.dart b/lib/widgets/sidebar/sidebar_placeholder.dart new file mode 100644 index 0000000..e2a7a0d --- /dev/null +++ b/lib/widgets/sidebar/sidebar_placeholder.dart @@ -0,0 +1,23 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +class SidebarPlaceholder extends StatelessWidget { + const SidebarPlaceholder({super.key}); + + @override + Widget build(BuildContext context) { + return Center( + child: Container( + constraints: const BoxConstraints(maxWidth: 280), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Icon(Icons.menu_open, size: 48), + const SizedBox(height: 8), + Text('sidebarPlaceholder'.tr, textAlign: TextAlign.center), + ], + ), + ), + ); + } +}