diff --git a/assets/locales/en_us.json b/assets/locales/en_us.json index 64e85ae..cf79ec3 100644 --- a/assets/locales/en_us.json +++ b/assets/locales/en_us.json @@ -466,5 +466,7 @@ "learnMoreAboutPerson": "Learn more about that person", "global": "Global", "all": "All", - "unablePreview": "Unable to preview" + "unablePreview": "Unable to preview", + "dashboardNav": "Dash", + "accountNav": "You" } diff --git a/assets/locales/zh_cn.json b/assets/locales/zh_cn.json index aed4a84..d04f578 100644 --- a/assets/locales/zh_cn.json +++ b/assets/locales/zh_cn.json @@ -462,5 +462,7 @@ "learnMoreAboutPerson": "了解关于 TA 的更多", "global": "全局", "all": "全部", - "unablePreview": "无法预览" + "unablePreview": "无法预览", + "dashboardNav": "仪表盘", + "accountNav": "您" } diff --git a/lib/bootstrapper.dart b/lib/bootstrapper.dart index 661d7b9..ab4a5c7 100644 --- a/lib/bootstrapper.dart +++ b/lib/bootstrapper.dart @@ -12,7 +12,6 @@ import 'package:solian/exceptions/request.dart'; import 'package:solian/exts.dart'; import 'package:solian/platform.dart'; import 'package:solian/providers/auth.dart'; -import 'package:solian/providers/content/channel.dart'; import 'package:solian/providers/content/realm.dart'; import 'package:solian/providers/relation.dart'; import 'package:solian/providers/theme_switcher.dart'; @@ -198,8 +197,6 @@ class _BootstrapperShellState extends State { final AuthProvider auth = Get.find(); try { await Future.wait([ - if (auth.isAuthorized.isTrue) - Get.find().refreshAvailableChannel(), if (auth.isAuthorized.isTrue) Get.find().refreshRelativeList(), if (auth.isAuthorized.isTrue) diff --git a/lib/providers/content/channel.dart b/lib/providers/content/channel.dart index 1bd88df..65737a1 100644 --- a/lib/providers/content/channel.dart +++ b/lib/providers/content/channel.dart @@ -9,24 +9,6 @@ import 'package:uuid/uuid.dart'; class ChannelProvider extends GetxController { RxBool isLoading = false.obs; - RxList availableChannels = RxList.empty(growable: true); - - List get groupChannels => - availableChannels.where((x) => x.type == 0).toList(); - List get directChannels => - availableChannels.where((x) => x.type == 1).toList(); - - Future refreshAvailableChannel() async { - final AuthProvider auth = Get.find(); - if (auth.isAuthorized.isFalse) throw const UnauthorizedException(); - - isLoading.value = true; - final resp = await listAvailableChannel(); - isLoading.value = false; - - availableChannels.value = await listAvailableChannel(); - availableChannels.refresh(); - } Future getChannel(String alias, {String realm = 'global'}) async { final AuthProvider auth = Get.find(); diff --git a/lib/router.dart b/lib/router.dart index a84b0df..d7eab59 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -28,6 +28,8 @@ import 'package:solian/screens/posts/post_editor.dart'; import 'package:solian/screens/settings.dart'; import 'package:solian/shells/root_shell.dart'; import 'package:solian/shells/title_shell.dart'; +import 'package:solian/theme.dart'; +import 'package:solian/widgets/sidebar/empty_placeholder.dart'; abstract class AppRouter { static GoRouter instance = GoRouter( @@ -137,12 +139,14 @@ abstract class AppRouter { ); static final ShellRoute _chatRoute = ShellRoute( - builder: (context, state, child) => child, + builder: (context, state, child) => ChatListShell(child: child), routes: [ GoRoute( path: '/chat', name: 'chat', - builder: (context, state) => const ChatScreen(), + builder: (context, state) => AppTheme.isLargeScreen(context) + ? const EmptyPagePlaceholder() + : const ChatScreen(), ), GoRoute( path: '/chat/organize', diff --git a/lib/screens/auth/signin.dart b/lib/screens/auth/signin.dart index 6eec356..6f5ca82 100644 --- a/lib/screens/auth/signin.dart +++ b/lib/screens/auth/signin.dart @@ -7,7 +7,6 @@ import 'package:solian/exceptions/request.dart'; import 'package:solian/exts.dart'; import 'package:solian/models/auth.dart'; import 'package:solian/providers/auth.dart'; -import 'package:solian/providers/content/channel.dart'; import 'package:solian/providers/content/realm.dart'; import 'package:solian/providers/relation.dart'; import 'package:solian/providers/websocket.dart'; @@ -177,7 +176,6 @@ class _SignInScreenState extends State { await auth.refreshAuthorizeStatus(); await auth.refreshUserProfile(); - Get.find().refreshAvailableChannel(); Get.find().refreshAvailableRealms(); Get.find().refreshRelativeList(); Get.find().registerPushNotifications(); diff --git a/lib/screens/chat.dart b/lib/screens/chat.dart index e051dc9..5afce72 100644 --- a/lib/screens/chat.dart +++ b/lib/screens/chat.dart @@ -19,15 +19,51 @@ import 'package:solian/widgets/app_bar_title.dart'; import 'package:solian/widgets/channel/channel_list.dart'; import 'package:solian/widgets/chat/call/chat_call_indicator.dart'; import 'package:solian/widgets/current_state_action.dart'; +import 'package:solian/widgets/sidebar/empty_placeholder.dart'; -class ChatScreen extends StatefulWidget { +class ChatScreen extends StatelessWidget { const ChatScreen({super.key}); @override - State createState() => _ChatScreenState(); + Widget build(BuildContext context) { + return Material( + color: Theme.of(context).colorScheme.surface, + child: const ChatList(), + ); + } } -class _ChatScreenState extends State { +class ChatListShell extends StatelessWidget { + final Widget? child; + + const ChatListShell({super.key, required this.child}); + + @override + Widget build(BuildContext context) { + return Material( + color: Theme.of(context).colorScheme.surface, + child: Row( + children: [ + const SizedBox( + width: 360, + child: ChatList(), + ), + const VerticalDivider(thickness: 0.3, width: 0.3), + Expanded(child: child ?? const EmptyPagePlaceholder()), + ], + ), + ); + } +} + +class ChatList extends StatefulWidget { + const ChatList({super.key}); + + @override + State createState() => _ChatListState(); +} + +class _ChatListState extends State { List _normalChannels = List.empty(); List _directChannels = List.empty(); final Map> _realmChannels = {}; @@ -105,187 +141,181 @@ class _ChatScreenState extends State { return Obx( () => DefaultTabController( length: 2 + realms.availableRealms.length, - child: Material( - color: Theme.of(context).colorScheme.surface, - child: Scaffold( - appBar: AppBar( - leading: Obx(() { - final adaptive = AppBarLeadingButton.adaptive(context); - if (adaptive != null) return adaptive; - if (_channels.isLoading.value) { - return const CircularProgressIndicator( - strokeWidth: 3, - ).paddingAll(18); - } - return const SizedBox.shrink(); - }), - title: AppBarTitle('chat'.tr), - centerTitle: true, - toolbarHeight: AppTheme.toolbarHeight(context), - actions: [ - const BackgroundStateWidget(), - const NotificationButton(), - PopupMenuButton( - icon: const Icon(Icons.add_circle), - itemBuilder: (BuildContext context) => [ - PopupMenuItem( - child: ListTile( - title: Text('channelOrganizeCommon'.tr), - leading: const Icon(Icons.tag), - contentPadding: - const EdgeInsets.symmetric(horizontal: 8), - ), - onTap: () { - AppRouter.instance.pushNamed('channelOrganizing').then( - (value) { - if (value != null) { - _channels.refreshAvailableChannel(); - } - }, - ); - }, + child: Scaffold( + appBar: AppBar( + leading: Obx(() { + final adaptive = AppBarLeadingButton.adaptive(context); + if (adaptive != null) return adaptive; + if (_channels.isLoading.value) { + return const CircularProgressIndicator( + strokeWidth: 3, + ).paddingAll(18); + } + return const SizedBox.shrink(); + }), + title: AppBarTitle('chat'.tr), + centerTitle: true, + toolbarHeight: AppTheme.toolbarHeight(context), + actions: [ + const BackgroundStateWidget(), + const NotificationButton(), + PopupMenuButton( + icon: const Icon(Icons.add_circle), + itemBuilder: (BuildContext context) => [ + PopupMenuItem( + child: ListTile( + title: Text('channelOrganizeCommon'.tr), + leading: const Icon(Icons.tag), + contentPadding: const EdgeInsets.symmetric(horizontal: 8), ), - PopupMenuItem( - child: ListTile( - title: Text('channelOrganizeDirect'.tr), - leading: const FaIcon( - FontAwesomeIcons.userGroup, - size: 16, - ), - contentPadding: - const EdgeInsets.symmetric(horizontal: 8), - ), - onTap: () { - final ChannelProvider channels = Get.find(); - channels - .createDirectChannel(context, 'global') - .then((resp) { - if (resp != null) { - _channels.refreshAvailableChannel(); + onTap: () { + AppRouter.instance.pushNamed('channelOrganizing').then( + (value) { + if (value != null) { + _loadAllChannels(); } - }).catchError((e) { - context.showErrorDialog(e); - }); - }, - ), - ], - ), - SizedBox( - width: AppTheme.isLargeScreen(context) ? 8 : 16, - ), - ], - bottom: TabBar( - isScrollable: true, - dividerColor: Theme.of(context).dividerColor.withOpacity(0.1), - tabAlignment: TabAlignment.startOffset, - tabs: [ - Tab( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - CircleAvatar( - radius: 14, - backgroundColor: - Theme.of(context).colorScheme.primary, - child: const Icon( - Icons.forum, - size: 16, - color: Colors.white, - ), - ), - const Gap(8), - Text('all'.tr), - ], - ), + }, + ); + }, ), - Tab( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - const CircleAvatar( - radius: 14, - child: Icon( - Icons.chat_bubble, - size: 16, - ), - ), - const Gap(8), - Text('channelTypeDirect'.tr), - ], + PopupMenuItem( + child: ListTile( + title: Text('channelOrganizeDirect'.tr), + leading: const FaIcon( + FontAwesomeIcons.userGroup, + size: 16, + ), + contentPadding: const EdgeInsets.symmetric(horizontal: 8), ), + onTap: () { + final ChannelProvider channels = Get.find(); + channels + .createDirectChannel(context, 'global') + .then((resp) { + if (resp != null) { + _loadAllChannels(); + } + }).catchError((e) { + context.showErrorDialog(e); + }); + }, ), - ...realms.availableRealms.map((x) => Tab( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - AccountAvatar( - content: x.avatar, - radius: 14, - fallbackWidget: const Icon( - Icons.workspaces, - size: 16, - ), - ), - const Gap(8), - Text(x.name), - ], - ), - )), ], ), - ), - body: Obx(() { - if (auth.isAuthorized.isFalse) { - return SigninRequiredOverlay( - onDone: () => _loadAllChannels(), - ); - } - - final selfId = auth.userProfile.value!['id']; - - return Column( - children: [ - const ChatCallCurrentIndicator(), - Expanded( - child: TabBarView( - children: [ - RefreshIndicator( - onRefresh: _loadNormalChannels, - child: ChannelListWidget( - channels: _sortChannels([ - ..._normalChannels, - ..._directChannels, - ..._realmChannels.values.expand((x) => x), - ]), - selfId: selfId, - useReplace: false, - ), + SizedBox( + width: AppTheme.isLargeScreen(context) ? 8 : 16, + ), + ], + bottom: TabBar( + isScrollable: true, + dividerHeight: 0.3, + tabAlignment: TabAlignment.startOffset, + tabs: [ + Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + CircleAvatar( + radius: 14, + backgroundColor: Theme.of(context).colorScheme.primary, + child: const Icon( + Icons.forum, + size: 16, + color: Colors.white, ), - RefreshIndicator( - onRefresh: _loadDirectChannels, - child: ChannelListWidget( - channels: _directChannels, - selfId: selfId, - useReplace: false, - ), + ), + const Gap(8), + Text('all'.tr), + ], + ), + ), + Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const CircleAvatar( + radius: 14, + child: Icon( + Icons.chat_bubble, + size: 16, ), - ...realms.availableRealms.map( - (x) => RefreshIndicator( - onRefresh: () => _loadRealmChannels(x.alias), - child: ChannelListWidget( - channels: _realmChannels[x.alias] ?? [], - selfId: selfId, - useReplace: false, + ), + const Gap(8), + Text('channelTypeDirect'.tr), + ], + ), + ), + ...realms.availableRealms.map((x) => Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + AccountAvatar( + content: x.avatar, + radius: 14, + fallbackWidget: const Icon( + Icons.workspaces, + size: 16, ), ), - ), - ], - ), - ), - ], - ); - }), + const Gap(8), + Text(x.name), + ], + ), + )), + ], + ), ), + body: Obx(() { + if (auth.isAuthorized.isFalse) { + return SigninRequiredOverlay( + onDone: () => _loadAllChannels(), + ); + } + + final selfId = auth.userProfile.value!['id']; + + return Column( + children: [ + const ChatCallCurrentIndicator(), + Expanded( + child: TabBarView( + children: [ + RefreshIndicator( + onRefresh: _loadNormalChannels, + child: ChannelListWidget( + channels: _sortChannels([ + ..._normalChannels, + ..._directChannels, + ..._realmChannels.values.expand((x) => x), + ]), + selfId: selfId, + useReplace: false, + ), + ), + RefreshIndicator( + onRefresh: _loadDirectChannels, + child: ChannelListWidget( + channels: _directChannels, + selfId: selfId, + useReplace: false, + ), + ), + ...realms.availableRealms.map( + (x) => RefreshIndicator( + onRefresh: () => _loadRealmChannels(x.alias), + child: ChannelListWidget( + channels: _realmChannels[x.alias] ?? [], + selfId: selfId, + useReplace: false, + ), + ), + ), + ], + ), + ), + ], + ); + }), ), ), ); diff --git a/lib/screens/explore.dart b/lib/screens/explore.dart index b79a9a6..535e8fd 100644 --- a/lib/screens/explore.dart +++ b/lib/screens/explore.dart @@ -101,11 +101,39 @@ class _ExploreScreenState extends State ], bottom: TabBar( controller: _tabController, - dividerColor: Theme.of(context).dividerColor.withOpacity(0.1), + dividerHeight: 0.3, + tabAlignment: TabAlignment.fill, tabs: [ - Tab(text: 'postListNews'.tr), - Tab(text: 'postListFriends'.tr), - Tab(text: 'postListShuffle'.tr), + Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Icon(Icons.feed, size: 20), + const Gap(8), + Text('postListNews'.tr), + ], + ), + ), + Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Icon(Icons.people, size: 20), + const Gap(8), + Text('postListFriends'.tr), + ], + ), + ), + Tab( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Icon(Icons.shuffle_on_outlined, size: 20), + const Gap(8), + Text('postListShuffle'.tr), + ], + ), + ), ], ), ) diff --git a/lib/shells/root_shell.dart b/lib/shells/root_shell.dart index f70fef5..e5e956d 100644 --- a/lib/shells/root_shell.dart +++ b/lib/shells/root_shell.dart @@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart'; import 'package:solian/theme.dart'; import 'package:solian/widgets/navigation/app_navigation.dart'; import 'package:solian/widgets/navigation/app_navigation_bottom.dart'; +import 'package:solian/widgets/navigation/app_navigation_rail.dart'; final GlobalKey rootScaffoldKey = GlobalKey(); @@ -40,8 +41,11 @@ class RootShell extends StatelessWidget { ); } + final showRailNavigation = AppTheme.isLargeScreen(context); + final destNames = AppNavigation.destinations.map((x) => x.page).toList(); - final showBottomNavigation = destNames.contains(routeName); + final showBottomNavigation = + destNames.contains(routeName) && !showRailNavigation; return Scaffold( key: rootScaffoldKey, @@ -53,6 +57,12 @@ class RootShell extends StatelessWidget { body: AppTheme.isLargeScreen(context) ? Row( children: [ + if (showRailNavigation) const AppNavigationRail(), + if (showRailNavigation) + const VerticalDivider( + width: 0.3, + thickness: 0.3, + ), Expanded(child: child), ], ) diff --git a/lib/widgets/navigation/app_navigation.dart b/lib/widgets/navigation/app_navigation.dart index fcb1563..67c9468 100644 --- a/lib/widgets/navigation/app_navigation.dart +++ b/lib/widgets/navigation/app_navigation.dart @@ -6,7 +6,7 @@ abstract class AppNavigation { static List destinations = [ AppNavigationDestination( icon: const Icon(Icons.dashboard), - label: 'dashboard'.tr, + label: 'dashboardNav'.tr, page: 'dashboard', ), AppNavigationDestination( @@ -26,7 +26,7 @@ abstract class AppNavigation { ), AppNavigationDestination( icon: const AppAccountWidget(), - label: 'account'.tr, + label: 'accountNav'.tr, page: 'account', ), ]; diff --git a/lib/widgets/navigation/app_navigation_bottom.dart b/lib/widgets/navigation/app_navigation_bottom.dart index 8b70922..80e08e3 100644 --- a/lib/widgets/navigation/app_navigation_bottom.dart +++ b/lib/widgets/navigation/app_navigation_bottom.dart @@ -28,7 +28,7 @@ class _AppNavigationBottomState extends State { currentIndex: _currentIndex, type: BottomNavigationBarType.fixed, showUnselectedLabels: false, - showSelectedLabels: false, + showSelectedLabels: true, landscapeLayout: BottomNavigationBarLandscapeLayout.centered, items: AppNavigation.destinations .map( diff --git a/lib/widgets/navigation/app_navigation_rail.dart b/lib/widgets/navigation/app_navigation_rail.dart new file mode 100644 index 0000000..8f46936 --- /dev/null +++ b/lib/widgets/navigation/app_navigation_rail.dart @@ -0,0 +1,59 @@ +import 'package:flutter/material.dart'; +import 'package:solian/router.dart'; +import 'package:solian/widgets/navigation/app_navigation.dart'; + +class AppNavigationRail extends StatefulWidget { + final int initialIndex; + + const AppNavigationRail({super.key, this.initialIndex = 0}); + + @override + State createState() => _AppNavigationRailState(); +} + +class _AppNavigationRailState extends State { + int? _currentIndex = 0; + + @override + void initState() { + super.initState(); + if (widget.initialIndex >= 0) { + _currentIndex = widget.initialIndex; + } + } + + @override + Widget build(BuildContext context) { + return NavigationRail( + selectedIndex: _currentIndex, + labelType: NavigationRailLabelType.selected, + groupAlignment: -1, + destinations: AppNavigation.destinations + .sublist(0, AppNavigation.destinations.length - 1) + .map( + (x) => NavigationRailDestination( + icon: x.icon, + label: Text(x.label), + ), + ) + .toList(), + trailing: Expanded( + child: Align( + alignment: Alignment.bottomCenter, + child: IconButton( + icon: AppNavigation.destinations.last.icon, + tooltip: AppNavigation.destinations.last.label, + onPressed: () { + setState(() => _currentIndex = null); + AppRouter.instance.goNamed(AppNavigation.destinations.last.page); + }, + ), + ), + ), + onDestinationSelected: (idx) { + setState(() => _currentIndex = idx); + AppRouter.instance.goNamed(AppNavigation.destinations[idx].page); + }, + ); + } +} diff --git a/lib/widgets/navigation/realm_switcher.dart b/lib/widgets/navigation/realm_switcher.dart index d929d52..8a9787a 100644 --- a/lib/widgets/navigation/realm_switcher.dart +++ b/lib/widgets/navigation/realm_switcher.dart @@ -1,3 +1,5 @@ +import 'dart:math'; + import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.dart'; import 'package:gap/gap.dart'; @@ -18,9 +20,10 @@ class RealmSwitcher extends StatelessWidget { return Obx(() { return DropdownButtonHideUnderline( child: DropdownButton2( + iconStyleData: const IconStyleData(iconSize: 0), isExpanded: true, hint: Text( - 'Select Item', + 'Realm Region', style: TextStyle( fontSize: 14, color: Theme.of(context).hintColor, @@ -71,11 +74,11 @@ class RealmSwitcher extends StatelessWidget { onChanged: (Realm? value) { navState.focusedRealm.value = value; }, - buttonStyleData: const ButtonStyleData( - padding: EdgeInsets.symmetric(horizontal: 16), + buttonStyleData: ButtonStyleData( height: 48, - width: 200, - decoration: BoxDecoration( + width: max(200, MediaQuery.of(context).size.width * 0.4), + padding: const EdgeInsets.symmetric(horizontal: 16), + decoration: const BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(16)), ), ), diff --git a/lib/widgets/sidebar/sidebar_placeholder.dart b/lib/widgets/sidebar/sidebar_placeholder.dart deleted file mode 100644 index 17003ee..0000000 --- a/lib/widgets/sidebar/sidebar_placeholder.dart +++ /dev/null @@ -1,15 +0,0 @@ -import 'package:flutter/material.dart'; - -class SidebarPlaceholder extends StatelessWidget { - const SidebarPlaceholder({super.key}); - - @override - Widget build(BuildContext context) { - return Material( - color: Theme.of(context).colorScheme.surface, - child: const Center( - child: Icon(Icons.menu_open, size: 50), - ), - ); - } -}