💄 Better sidebar navigation
This commit is contained in:
@ -3,16 +3,15 @@ import 'package:get/get.dart';
|
||||
import 'package:solian/models/account_status.dart';
|
||||
import 'package:solian/providers/account_status.dart';
|
||||
import 'package:solian/providers/auth.dart';
|
||||
import 'package:solian/providers/content/channel.dart';
|
||||
import 'package:solian/providers/relation.dart';
|
||||
import 'package:solian/router.dart';
|
||||
import 'package:solian/shells/root_shell.dart';
|
||||
import 'package:solian/theme.dart';
|
||||
import 'package:solian/widgets/account/account_avatar.dart';
|
||||
import 'package:solian/widgets/account/account_status_action.dart';
|
||||
import 'package:solian/widgets/channel/channel_list.dart';
|
||||
import 'package:solian/widgets/navigation/app_navigation.dart';
|
||||
import 'package:badges/badges.dart' as badges;
|
||||
import 'package:solian/widgets/navigation/app_navigation_regions.dart';
|
||||
|
||||
class AppNavigationDrawer extends StatefulWidget {
|
||||
final String? routeName;
|
||||
@ -24,12 +23,8 @@ class AppNavigationDrawer extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
|
||||
int? _selectedIndex = 0;
|
||||
|
||||
AccountStatus? _accountStatus;
|
||||
|
||||
late final ChannelProvider _channels;
|
||||
|
||||
Future<void> _getStatus() async {
|
||||
final StatusProvider provider = Get.find();
|
||||
|
||||
@ -41,15 +36,6 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
|
||||
});
|
||||
}
|
||||
|
||||
void _detectSelectedIndex() {
|
||||
if (widget.routeName == null) return;
|
||||
|
||||
final nameList = AppNavigation.destinations.map((x) => x.page).toList();
|
||||
final idx = nameList.indexOf(widget.routeName!);
|
||||
|
||||
_selectedIndex = idx != -1 ? idx : null;
|
||||
}
|
||||
|
||||
void _closeDrawer() {
|
||||
rootScaffoldKey.currentState!.closeDrawer();
|
||||
}
|
||||
@ -59,7 +45,6 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
|
||||
icon: const Icon(Icons.settings),
|
||||
onPressed: () {
|
||||
AppRouter.instance.pushNamed('settings');
|
||||
setState(() => _selectedIndex = null);
|
||||
_closeDrawer();
|
||||
});
|
||||
}
|
||||
@ -67,175 +52,139 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_channels = Get.find();
|
||||
_detectSelectedIndex();
|
||||
_getStatus();
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
_detectSelectedIndex();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final AuthProvider auth = Get.find();
|
||||
|
||||
return NavigationDrawer(
|
||||
return Drawer(
|
||||
backgroundColor:
|
||||
SolianTheme.isLargeScreen(context) ? Colors.transparent : null,
|
||||
selectedIndex: _selectedIndex,
|
||||
onDestinationSelected: (idx) {
|
||||
setState(() => _selectedIndex = idx);
|
||||
AppRouter.instance.goNamed(AppNavigation.destinations[idx].page);
|
||||
_closeDrawer();
|
||||
},
|
||||
children: [
|
||||
Obx(() {
|
||||
if (auth.isAuthorized.isFalse || auth.userProfile.value == null) {
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 28),
|
||||
leading: const Icon(Icons.account_circle),
|
||||
title: Text('guest'.tr),
|
||||
subtitle: Text('unsignedIn'.tr),
|
||||
trailing: _buildSettingButton(),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed('account');
|
||||
setState(() => _selectedIndex = null);
|
||||
_closeDrawer();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
title: Text(
|
||||
auth.userProfile.value!['nick'],
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.fade,
|
||||
),
|
||||
subtitle: Builder(
|
||||
builder: (context) {
|
||||
if (_accountStatus == null) {
|
||||
return Text('loading'.tr);
|
||||
}
|
||||
final info = StatusProvider.determineStatus(
|
||||
_accountStatus!,
|
||||
child: SafeArea(
|
||||
child: Column(
|
||||
children: [
|
||||
Obx(() {
|
||||
if (auth.isAuthorized.isFalse || auth.userProfile.value == null) {
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 28),
|
||||
leading: const Icon(Icons.account_circle),
|
||||
title: Text('guest'.tr),
|
||||
subtitle: Text('unsignedIn'.tr),
|
||||
trailing: _buildSettingButton(),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed('account');
|
||||
_closeDrawer();
|
||||
},
|
||||
);
|
||||
return Text(
|
||||
info.$3,
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
title: Text(
|
||||
auth.userProfile.value!['nick'],
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.fade,
|
||||
);
|
||||
},
|
||||
),
|
||||
leading: Obx(() {
|
||||
final statusBadgeColor = _accountStatus != null
|
||||
? StatusProvider.determineStatus(
|
||||
),
|
||||
subtitle: Builder(
|
||||
builder: (context) {
|
||||
if (_accountStatus == null) {
|
||||
return Text('loading'.tr);
|
||||
}
|
||||
final info = StatusProvider.determineStatus(
|
||||
_accountStatus!,
|
||||
).$2
|
||||
: Colors.grey;
|
||||
|
||||
final RelationshipProvider relations = Get.find();
|
||||
final accountNotifications = relations.friendRequestCount.value;
|
||||
|
||||
return badges.Badge(
|
||||
badgeContent: Text(
|
||||
accountNotifications.toString(),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
);
|
||||
return Text(
|
||||
info.$3,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.fade,
|
||||
);
|
||||
},
|
||||
),
|
||||
showBadge: accountNotifications > 0,
|
||||
position: badges.BadgePosition.topEnd(
|
||||
top: -10,
|
||||
end: -6,
|
||||
),
|
||||
child: badges.Badge(
|
||||
showBadge: _accountStatus != null,
|
||||
badgeStyle: badges.BadgeStyle(badgeColor: statusBadgeColor),
|
||||
position: badges.BadgePosition.bottomEnd(
|
||||
bottom: 0,
|
||||
end: -2,
|
||||
),
|
||||
child: AccountAvatar(
|
||||
content: auth.userProfile.value!['avatar'],
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
trailing: _buildSettingButton(),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed('account');
|
||||
setState(() => _selectedIndex = null);
|
||||
_closeDrawer();
|
||||
},
|
||||
onLongPress: () {
|
||||
showModalBottomSheet(
|
||||
useRootNavigator: true,
|
||||
context: context,
|
||||
builder: (context) => AccountStatusAction(
|
||||
currentStatus: _accountStatus!.status,
|
||||
),
|
||||
).then((val) {
|
||||
if (val == true) _getStatus();
|
||||
});
|
||||
},
|
||||
);
|
||||
}).paddingOnly(top: 8),
|
||||
const Divider(thickness: 0.3, height: 1).paddingOnly(
|
||||
bottom: 12,
|
||||
top: 8,
|
||||
),
|
||||
...AppNavigation.destinations.map(
|
||||
(e) => NavigationDrawerDestination(
|
||||
icon: e.icon,
|
||||
label: Text(e.label),
|
||||
),
|
||||
),
|
||||
const Divider(thickness: 0.3, height: 1).paddingOnly(
|
||||
top: 12,
|
||||
),
|
||||
Obx(() {
|
||||
if (auth.isAuthorized.isFalse || auth.userProfile.value == null) {
|
||||
return const SizedBox();
|
||||
}
|
||||
leading: Obx(() {
|
||||
final statusBadgeColor = _accountStatus != null
|
||||
? StatusProvider.determineStatus(
|
||||
_accountStatus!,
|
||||
).$2
|
||||
: Colors.grey;
|
||||
|
||||
final selfId = auth.userProfile.value!['id'];
|
||||
final RelationshipProvider relations = Get.find();
|
||||
final accountNotifications =
|
||||
relations.friendRequestCount.value;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
Theme(
|
||||
data: Theme.of(context)
|
||||
.copyWith(dividerColor: Colors.transparent),
|
||||
child: ExpansionTile(
|
||||
title: Text('channels'.tr),
|
||||
tilePadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
children: [
|
||||
Obx(
|
||||
() => SizedBox(
|
||||
height: 360,
|
||||
child: RefreshIndicator(
|
||||
onRefresh: () => _channels.refreshAvailableChannel(),
|
||||
child: ChannelListWidget(
|
||||
channels: _channels.groupChannels,
|
||||
selfId: selfId,
|
||||
isDense: true,
|
||||
useReplace: true,
|
||||
onSelected: (_) {
|
||||
setState(() => _selectedIndex = null);
|
||||
_closeDrawer();
|
||||
},
|
||||
),
|
||||
),
|
||||
return badges.Badge(
|
||||
badgeContent: Text(
|
||||
accountNotifications.toString(),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
showBadge: accountNotifications > 0,
|
||||
position: badges.BadgePosition.topEnd(
|
||||
top: -10,
|
||||
end: -6,
|
||||
),
|
||||
child: badges.Badge(
|
||||
showBadge: _accountStatus != null,
|
||||
badgeStyle:
|
||||
badges.BadgeStyle(badgeColor: statusBadgeColor),
|
||||
position: badges.BadgePosition.bottomEnd(
|
||||
bottom: 0,
|
||||
end: -2,
|
||||
),
|
||||
child: AccountAvatar(
|
||||
content: auth.userProfile.value!['avatar'],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
trailing: _buildSettingButton(),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed('account');
|
||||
_closeDrawer();
|
||||
},
|
||||
onLongPress: () {
|
||||
showModalBottomSheet(
|
||||
useRootNavigator: true,
|
||||
context: context,
|
||||
builder: (context) => AccountStatusAction(
|
||||
currentStatus: _accountStatus!.status,
|
||||
),
|
||||
).then((val) {
|
||||
if (val == true) _getStatus();
|
||||
});
|
||||
},
|
||||
);
|
||||
}).paddingOnly(top: 8),
|
||||
const Divider(thickness: 0.3, height: 1),
|
||||
Column(
|
||||
children: AppNavigation.destinations
|
||||
.map(
|
||||
(e) => ListTile(
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
),
|
||||
leading: e.icon,
|
||||
title: Text(e.label),
|
||||
enabled: true,
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed(e.page);
|
||||
_closeDrawer();
|
||||
},
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
).paddingSymmetric(vertical: 8),
|
||||
const Divider(thickness: 0.3, height: 1),
|
||||
Expanded(
|
||||
child: AppNavigationRegions(
|
||||
onSelected: (item) {
|
||||
_closeDrawer();
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
87
lib/widgets/navigation/app_navigation_regions.dart
Normal file
87
lib/widgets/navigation/app_navigation_regions.dart
Normal file
@ -0,0 +1,87 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:solian/models/channel.dart';
|
||||
import 'package:solian/providers/content/channel.dart';
|
||||
import 'package:solian/router.dart';
|
||||
import 'package:collection/collection.dart';
|
||||
|
||||
class AppNavigationRegions extends StatelessWidget {
|
||||
final Function(Channel item) onSelected;
|
||||
|
||||
const AppNavigationRegions({super.key, required this.onSelected});
|
||||
|
||||
void _gotoChannel(Channel item) {
|
||||
AppRouter.instance.pushReplacementNamed(
|
||||
'channelChat',
|
||||
pathParameters: {'alias': item.alias},
|
||||
queryParameters: {
|
||||
if (item.realmId != null) 'realm': item.realm!.alias,
|
||||
},
|
||||
);
|
||||
|
||||
onSelected(item);
|
||||
}
|
||||
|
||||
Widget _buildEntry(BuildContext context, Channel item) {
|
||||
const padding = EdgeInsets.symmetric(horizontal: 20);
|
||||
|
||||
return ListTile(
|
||||
minTileHeight: 0,
|
||||
leading: const Icon(Icons.tag_outlined),
|
||||
contentPadding: padding,
|
||||
title: Text(item.name),
|
||||
subtitle: Text(
|
||||
item.description,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
onTap: () => _gotoChannel(item),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ChannelProvider channels = Get.find();
|
||||
|
||||
return Obx(() {
|
||||
final List<Channel> noRealmGroupChannels = channels.availableChannels
|
||||
.where((x) => x.type == 0 && x.realmId == null)
|
||||
.toList();
|
||||
final List<Channel> hasRealmGroupChannels = channels.availableChannels
|
||||
.where((x) => x.type == 0 && x.realmId != null)
|
||||
.toList();
|
||||
|
||||
return CustomScrollView(
|
||||
slivers: [
|
||||
const SliverPadding(padding: EdgeInsets.only(top: 8)),
|
||||
SliverList.builder(
|
||||
itemCount: noRealmGroupChannels.length,
|
||||
itemBuilder: (context, index) {
|
||||
final element = noRealmGroupChannels[index];
|
||||
return _buildEntry(context, element);
|
||||
},
|
||||
),
|
||||
SliverList.list(
|
||||
children: hasRealmGroupChannels
|
||||
.groupListsBy((x) => x.realm)
|
||||
.entries
|
||||
.map((element) {
|
||||
return ExpansionTile(
|
||||
minTileHeight: 0,
|
||||
tilePadding: const EdgeInsets.only(left: 20, right: 24),
|
||||
backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
|
||||
collapsedBackgroundColor:
|
||||
Theme.of(context).colorScheme.surfaceContainer,
|
||||
title: Text(element.value.first.realm!.name),
|
||||
leading: const Icon(Icons.workspaces, size: 16)
|
||||
.paddingSymmetric(horizontal: 4),
|
||||
children:
|
||||
element.value.map((x) => _buildEntry(context, x)).toList(),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
],
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user