📱 New layout for the landscape device
This commit is contained in:
parent
f50461a7f7
commit
9e6829bd5a
@ -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"
|
||||
}
|
||||
|
@ -462,5 +462,7 @@
|
||||
"learnMoreAboutPerson": "了解关于 TA 的更多",
|
||||
"global": "全局",
|
||||
"all": "全部",
|
||||
"unablePreview": "无法预览"
|
||||
"unablePreview": "无法预览",
|
||||
"dashboardNav": "仪表盘",
|
||||
"accountNav": "您"
|
||||
}
|
||||
|
@ -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<BootstrapperShell> {
|
||||
final AuthProvider auth = Get.find();
|
||||
try {
|
||||
await Future.wait([
|
||||
if (auth.isAuthorized.isTrue)
|
||||
Get.find<ChannelProvider>().refreshAvailableChannel(),
|
||||
if (auth.isAuthorized.isTrue)
|
||||
Get.find<RelationshipProvider>().refreshRelativeList(),
|
||||
if (auth.isAuthorized.isTrue)
|
||||
|
@ -9,24 +9,6 @@ import 'package:uuid/uuid.dart';
|
||||
|
||||
class ChannelProvider extends GetxController {
|
||||
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 {
|
||||
final AuthProvider auth = Get.find();
|
||||
|
@ -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',
|
||||
|
@ -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<SignInScreen> {
|
||||
await auth.refreshAuthorizeStatus();
|
||||
await auth.refreshUserProfile();
|
||||
|
||||
Get.find<ChannelProvider>().refreshAvailableChannel();
|
||||
Get.find<RealmProvider>().refreshAvailableRealms();
|
||||
Get.find<RelationshipProvider>().refreshRelativeList();
|
||||
Get.find<WebSocketProvider>().registerPushNotifications();
|
||||
|
@ -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<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> _directChannels = List.empty();
|
||||
final Map<String, List<Channel>> _realmChannels = {};
|
||||
@ -105,8 +141,6 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
return Obx(
|
||||
() => DefaultTabController(
|
||||
length: 2 + realms.availableRealms.length,
|
||||
child: Material(
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: Obx(() {
|
||||
@ -132,14 +166,13 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
child: ListTile(
|
||||
title: Text('channelOrganizeCommon'.tr),
|
||||
leading: const Icon(Icons.tag),
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 8),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
),
|
||||
onTap: () {
|
||||
AppRouter.instance.pushNamed('channelOrganizing').then(
|
||||
(value) {
|
||||
if (value != null) {
|
||||
_channels.refreshAvailableChannel();
|
||||
_loadAllChannels();
|
||||
}
|
||||
},
|
||||
);
|
||||
@ -152,8 +185,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
FontAwesomeIcons.userGroup,
|
||||
size: 16,
|
||||
),
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 8),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
),
|
||||
onTap: () {
|
||||
final ChannelProvider channels = Get.find();
|
||||
@ -161,7 +193,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
.createDirectChannel(context, 'global')
|
||||
.then((resp) {
|
||||
if (resp != null) {
|
||||
_channels.refreshAvailableChannel();
|
||||
_loadAllChannels();
|
||||
}
|
||||
}).catchError((e) {
|
||||
context.showErrorDialog(e);
|
||||
@ -176,7 +208,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
],
|
||||
bottom: TabBar(
|
||||
isScrollable: true,
|
||||
dividerColor: Theme.of(context).dividerColor.withOpacity(0.1),
|
||||
dividerHeight: 0.3,
|
||||
tabAlignment: TabAlignment.startOffset,
|
||||
tabs: [
|
||||
Tab(
|
||||
@ -185,8 +217,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 14,
|
||||
backgroundColor:
|
||||
Theme.of(context).colorScheme.primary,
|
||||
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||
child: const Icon(
|
||||
Icons.forum,
|
||||
size: 16,
|
||||
@ -287,7 +318,6 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -101,11 +101,39 @@ class _ExploreScreenState extends State<ExploreScreen>
|
||||
],
|
||||
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),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
|
@ -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<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 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),
|
||||
],
|
||||
)
|
||||
|
@ -6,7 +6,7 @@ abstract class AppNavigation {
|
||||
static List<AppNavigationDestination> 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',
|
||||
),
|
||||
];
|
||||
|
@ -28,7 +28,7 @@ class _AppNavigationBottomState extends State<AppNavigationBottom> {
|
||||
currentIndex: _currentIndex,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
showUnselectedLabels: false,
|
||||
showSelectedLabels: false,
|
||||
showSelectedLabels: true,
|
||||
landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
|
||||
items: AppNavigation.destinations
|
||||
.map(
|
||||
|
59
lib/widgets/navigation/app_navigation_rail.dart
Normal file
59
lib/widgets/navigation/app_navigation_rail.dart
Normal 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);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
@ -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<Realm?>(
|
||||
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)),
|
||||
),
|
||||
),
|
||||
|
@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user