📱 New layout for the landscape device

This commit is contained in:
LittleSheep 2024-10-06 01:17:49 +08:00
parent f50461a7f7
commit 9e6829bd5a
14 changed files with 327 additions and 227 deletions

View File

@ -466,5 +466,7 @@
"learnMoreAboutPerson": "Learn more about that person", "learnMoreAboutPerson": "Learn more about that person",
"global": "Global", "global": "Global",
"all": "All", "all": "All",
"unablePreview": "Unable to preview" "unablePreview": "Unable to preview",
"dashboardNav": "Dash",
"accountNav": "You"
} }

View File

@ -462,5 +462,7 @@
"learnMoreAboutPerson": "了解关于 TA 的更多", "learnMoreAboutPerson": "了解关于 TA 的更多",
"global": "全局", "global": "全局",
"all": "全部", "all": "全部",
"unablePreview": "无法预览" "unablePreview": "无法预览",
"dashboardNav": "仪表盘",
"accountNav": "您"
} }

View File

@ -12,7 +12,6 @@ import 'package:solian/exceptions/request.dart';
import 'package:solian/exts.dart'; import 'package:solian/exts.dart';
import 'package:solian/platform.dart'; import 'package:solian/platform.dart';
import 'package:solian/providers/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/content/realm.dart';
import 'package:solian/providers/relation.dart'; import 'package:solian/providers/relation.dart';
import 'package:solian/providers/theme_switcher.dart'; import 'package:solian/providers/theme_switcher.dart';
@ -198,8 +197,6 @@ class _BootstrapperShellState extends State<BootstrapperShell> {
final AuthProvider auth = Get.find(); final AuthProvider auth = Get.find();
try { try {
await Future.wait([ await Future.wait([
if (auth.isAuthorized.isTrue)
Get.find<ChannelProvider>().refreshAvailableChannel(),
if (auth.isAuthorized.isTrue) if (auth.isAuthorized.isTrue)
Get.find<RelationshipProvider>().refreshRelativeList(), Get.find<RelationshipProvider>().refreshRelativeList(),
if (auth.isAuthorized.isTrue) if (auth.isAuthorized.isTrue)

View File

@ -9,24 +9,6 @@ import 'package:uuid/uuid.dart';
class ChannelProvider extends GetxController { class ChannelProvider extends GetxController {
RxBool isLoading = false.obs; RxBool isLoading = false.obs;
RxList<Channel> availableChannels = RxList.empty(growable: true);
List<Channel> get groupChannels =>
availableChannels.where((x) => x.type == 0).toList();
List<Channel> get directChannels =>
availableChannels.where((x) => x.type == 1).toList();
Future<void> 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<Response> getChannel(String alias, {String realm = 'global'}) async { Future<Response> getChannel(String alias, {String realm = 'global'}) async {
final AuthProvider auth = Get.find(); final AuthProvider auth = Get.find();

View File

@ -28,6 +28,8 @@ import 'package:solian/screens/posts/post_editor.dart';
import 'package:solian/screens/settings.dart'; import 'package:solian/screens/settings.dart';
import 'package:solian/shells/root_shell.dart'; import 'package:solian/shells/root_shell.dart';
import 'package:solian/shells/title_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 { abstract class AppRouter {
static GoRouter instance = GoRouter( static GoRouter instance = GoRouter(
@ -137,12 +139,14 @@ abstract class AppRouter {
); );
static final ShellRoute _chatRoute = ShellRoute( static final ShellRoute _chatRoute = ShellRoute(
builder: (context, state, child) => child, builder: (context, state, child) => ChatListShell(child: child),
routes: [ routes: [
GoRoute( GoRoute(
path: '/chat', path: '/chat',
name: 'chat', name: 'chat',
builder: (context, state) => const ChatScreen(), builder: (context, state) => AppTheme.isLargeScreen(context)
? const EmptyPagePlaceholder()
: const ChatScreen(),
), ),
GoRoute( GoRoute(
path: '/chat/organize', path: '/chat/organize',

View File

@ -7,7 +7,6 @@ import 'package:solian/exceptions/request.dart';
import 'package:solian/exts.dart'; import 'package:solian/exts.dart';
import 'package:solian/models/auth.dart'; import 'package:solian/models/auth.dart';
import 'package:solian/providers/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/content/realm.dart';
import 'package:solian/providers/relation.dart'; import 'package:solian/providers/relation.dart';
import 'package:solian/providers/websocket.dart'; import 'package:solian/providers/websocket.dart';
@ -177,7 +176,6 @@ class _SignInScreenState extends State<SignInScreen> {
await auth.refreshAuthorizeStatus(); await auth.refreshAuthorizeStatus();
await auth.refreshUserProfile(); await auth.refreshUserProfile();
Get.find<ChannelProvider>().refreshAvailableChannel();
Get.find<RealmProvider>().refreshAvailableRealms(); Get.find<RealmProvider>().refreshAvailableRealms();
Get.find<RelationshipProvider>().refreshRelativeList(); Get.find<RelationshipProvider>().refreshRelativeList();
Get.find<WebSocketProvider>().registerPushNotifications(); Get.find<WebSocketProvider>().registerPushNotifications();

View File

@ -19,15 +19,51 @@ import 'package:solian/widgets/app_bar_title.dart';
import 'package:solian/widgets/channel/channel_list.dart'; import 'package:solian/widgets/channel/channel_list.dart';
import 'package:solian/widgets/chat/call/chat_call_indicator.dart'; import 'package:solian/widgets/chat/call/chat_call_indicator.dart';
import 'package:solian/widgets/current_state_action.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}); const ChatScreen({super.key});
@override @override
State<ChatScreen> createState() => _ChatScreenState(); Widget build(BuildContext context) {
return Material(
color: Theme.of(context).colorScheme.surface,
child: const ChatList(),
);
}
} }
class _ChatScreenState extends State<ChatScreen> { 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<ChatList> createState() => _ChatListState();
}
class _ChatListState extends State<ChatList> {
List<Channel> _normalChannels = List.empty(); List<Channel> _normalChannels = List.empty();
List<Channel> _directChannels = List.empty(); List<Channel> _directChannels = List.empty();
final Map<String, List<Channel>> _realmChannels = {}; final Map<String, List<Channel>> _realmChannels = {};
@ -105,187 +141,181 @@ class _ChatScreenState extends State<ChatScreen> {
return Obx( return Obx(
() => DefaultTabController( () => DefaultTabController(
length: 2 + realms.availableRealms.length, length: 2 + realms.availableRealms.length,
child: Material( child: Scaffold(
color: Theme.of(context).colorScheme.surface, appBar: AppBar(
child: Scaffold( leading: Obx(() {
appBar: AppBar( final adaptive = AppBarLeadingButton.adaptive(context);
leading: Obx(() { if (adaptive != null) return adaptive;
final adaptive = AppBarLeadingButton.adaptive(context); if (_channels.isLoading.value) {
if (adaptive != null) return adaptive; return const CircularProgressIndicator(
if (_channels.isLoading.value) { strokeWidth: 3,
return const CircularProgressIndicator( ).paddingAll(18);
strokeWidth: 3, }
).paddingAll(18); return const SizedBox.shrink();
} }),
return const SizedBox.shrink(); title: AppBarTitle('chat'.tr),
}), centerTitle: true,
title: AppBarTitle('chat'.tr), toolbarHeight: AppTheme.toolbarHeight(context),
centerTitle: true, actions: [
toolbarHeight: AppTheme.toolbarHeight(context), const BackgroundStateWidget(),
actions: [ const NotificationButton(),
const BackgroundStateWidget(), PopupMenuButton(
const NotificationButton(), icon: const Icon(Icons.add_circle),
PopupMenuButton( itemBuilder: (BuildContext context) => [
icon: const Icon(Icons.add_circle), PopupMenuItem(
itemBuilder: (BuildContext context) => [ child: ListTile(
PopupMenuItem( title: Text('channelOrganizeCommon'.tr),
child: ListTile( leading: const Icon(Icons.tag),
title: Text('channelOrganizeCommon'.tr), contentPadding: const EdgeInsets.symmetric(horizontal: 8),
leading: const Icon(Icons.tag),
contentPadding:
const EdgeInsets.symmetric(horizontal: 8),
),
onTap: () {
AppRouter.instance.pushNamed('channelOrganizing').then(
(value) {
if (value != null) {
_channels.refreshAvailableChannel();
}
},
);
},
), ),
PopupMenuItem( onTap: () {
child: ListTile( AppRouter.instance.pushNamed('channelOrganizing').then(
title: Text('channelOrganizeDirect'.tr), (value) {
leading: const FaIcon( if (value != null) {
FontAwesomeIcons.userGroup, _loadAllChannels();
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();
} }
}).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( PopupMenuItem(
child: Row( child: ListTile(
mainAxisSize: MainAxisSize.min, title: Text('channelOrganizeDirect'.tr),
children: [ leading: const FaIcon(
const CircleAvatar( FontAwesomeIcons.userGroup,
radius: 14, size: 16,
child: Icon( ),
Icons.chat_bubble, contentPadding: const EdgeInsets.symmetric(horizontal: 8),
size: 16,
),
),
const Gap(8),
Text('channelTypeDirect'.tr),
],
), ),
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),
],
),
)),
], ],
), ),
), SizedBox(
body: Obx(() { width: AppTheme.isLargeScreen(context) ? 8 : 16,
if (auth.isAuthorized.isFalse) { ),
return SigninRequiredOverlay( ],
onDone: () => _loadAllChannels(), bottom: TabBar(
); isScrollable: true,
} dividerHeight: 0.3,
tabAlignment: TabAlignment.startOffset,
final selfId = auth.userProfile.value!['id']; tabs: [
Tab(
return Column( child: Row(
children: [ mainAxisSize: MainAxisSize.min,
const ChatCallCurrentIndicator(), children: [
Expanded( CircleAvatar(
child: TabBarView( radius: 14,
children: [ backgroundColor: Theme.of(context).colorScheme.primary,
RefreshIndicator( child: const Icon(
onRefresh: _loadNormalChannels, Icons.forum,
child: ChannelListWidget( size: 16,
channels: _sortChannels([ color: Colors.white,
..._normalChannels,
..._directChannels,
..._realmChannels.values.expand((x) => x),
]),
selfId: selfId,
useReplace: false,
),
), ),
RefreshIndicator( ),
onRefresh: _loadDirectChannels, const Gap(8),
child: ChannelListWidget( Text('all'.tr),
channels: _directChannels, ],
selfId: selfId, ),
useReplace: false, ),
), Tab(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const CircleAvatar(
radius: 14,
child: Icon(
Icons.chat_bubble,
size: 16,
), ),
...realms.availableRealms.map( ),
(x) => RefreshIndicator( const Gap(8),
onRefresh: () => _loadRealmChannels(x.alias), Text('channelTypeDirect'.tr),
child: ChannelListWidget( ],
channels: _realmChannels[x.alias] ?? [], ),
selfId: selfId, ),
useReplace: false, ...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,
),
),
),
],
),
),
],
);
}),
), ),
), ),
); );

View File

@ -101,11 +101,39 @@ class _ExploreScreenState extends State<ExploreScreen>
], ],
bottom: TabBar( bottom: TabBar(
controller: _tabController, controller: _tabController,
dividerColor: Theme.of(context).dividerColor.withOpacity(0.1), dividerHeight: 0.3,
tabAlignment: TabAlignment.fill,
tabs: [ tabs: [
Tab(text: 'postListNews'.tr), Tab(
Tab(text: 'postListFriends'.tr), child: Row(
Tab(text: 'postListShuffle'.tr), 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),
],
),
),
], ],
), ),
) )

View File

@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import 'package:solian/theme.dart'; import 'package:solian/theme.dart';
import 'package:solian/widgets/navigation/app_navigation.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_bottom.dart';
import 'package:solian/widgets/navigation/app_navigation_rail.dart';
final GlobalKey<ScaffoldState> rootScaffoldKey = GlobalKey<ScaffoldState>(); final GlobalKey<ScaffoldState> rootScaffoldKey = GlobalKey<ScaffoldState>();
@ -40,8 +41,11 @@ class RootShell extends StatelessWidget {
); );
} }
final showRailNavigation = AppTheme.isLargeScreen(context);
final destNames = AppNavigation.destinations.map((x) => x.page).toList(); final destNames = AppNavigation.destinations.map((x) => x.page).toList();
final showBottomNavigation = destNames.contains(routeName); final showBottomNavigation =
destNames.contains(routeName) && !showRailNavigation;
return Scaffold( return Scaffold(
key: rootScaffoldKey, key: rootScaffoldKey,
@ -53,6 +57,12 @@ class RootShell extends StatelessWidget {
body: AppTheme.isLargeScreen(context) body: AppTheme.isLargeScreen(context)
? Row( ? Row(
children: [ children: [
if (showRailNavigation) const AppNavigationRail(),
if (showRailNavigation)
const VerticalDivider(
width: 0.3,
thickness: 0.3,
),
Expanded(child: child), Expanded(child: child),
], ],
) )

View File

@ -6,7 +6,7 @@ abstract class AppNavigation {
static List<AppNavigationDestination> destinations = [ static List<AppNavigationDestination> destinations = [
AppNavigationDestination( AppNavigationDestination(
icon: const Icon(Icons.dashboard), icon: const Icon(Icons.dashboard),
label: 'dashboard'.tr, label: 'dashboardNav'.tr,
page: 'dashboard', page: 'dashboard',
), ),
AppNavigationDestination( AppNavigationDestination(
@ -26,7 +26,7 @@ abstract class AppNavigation {
), ),
AppNavigationDestination( AppNavigationDestination(
icon: const AppAccountWidget(), icon: const AppAccountWidget(),
label: 'account'.tr, label: 'accountNav'.tr,
page: 'account', page: 'account',
), ),
]; ];

View File

@ -28,7 +28,7 @@ class _AppNavigationBottomState extends State<AppNavigationBottom> {
currentIndex: _currentIndex, currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed, type: BottomNavigationBarType.fixed,
showUnselectedLabels: false, showUnselectedLabels: false,
showSelectedLabels: false, showSelectedLabels: true,
landscapeLayout: BottomNavigationBarLandscapeLayout.centered, landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
items: AppNavigation.destinations items: AppNavigation.destinations
.map( .map(

View File

@ -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<AppNavigationRail> createState() => _AppNavigationRailState();
}
class _AppNavigationRailState extends State<AppNavigationRail> {
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);
},
);
}
}

View File

@ -1,3 +1,5 @@
import 'dart:math';
import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gap/gap.dart'; import 'package:gap/gap.dart';
@ -18,9 +20,10 @@ class RealmSwitcher extends StatelessWidget {
return Obx(() { return Obx(() {
return DropdownButtonHideUnderline( return DropdownButtonHideUnderline(
child: DropdownButton2<Realm?>( child: DropdownButton2<Realm?>(
iconStyleData: const IconStyleData(iconSize: 0),
isExpanded: true, isExpanded: true,
hint: Text( hint: Text(
'Select Item', 'Realm Region',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
color: Theme.of(context).hintColor, color: Theme.of(context).hintColor,
@ -71,11 +74,11 @@ class RealmSwitcher extends StatelessWidget {
onChanged: (Realm? value) { onChanged: (Realm? value) {
navState.focusedRealm.value = value; navState.focusedRealm.value = value;
}, },
buttonStyleData: const ButtonStyleData( buttonStyleData: ButtonStyleData(
padding: EdgeInsets.symmetric(horizontal: 16),
height: 48, height: 48,
width: 200, width: max(200, MediaQuery.of(context).size.width * 0.4),
decoration: BoxDecoration( padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(16)), borderRadius: BorderRadius.all(Radius.circular(16)),
), ),
), ),

View File

@ -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),
),
);
}
}