mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 09:45:14 +00:00
feat: add drawer for huge devices
Signed-off-by: TheOneWithTheBraid <the-one@with-the-braid.cf>
This commit is contained in:
parent
6c53ab370b
commit
f6d95b9440
11 changed files with 760 additions and 206 deletions
|
@ -134,6 +134,7 @@
|
||||||
"senderName": {}
|
"senderName": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"spaces": "Spaces",
|
||||||
"anyoneCanJoin": "Anyone can join",
|
"anyoneCanJoin": "Anyone can join",
|
||||||
"@anyoneCanJoin": {
|
"@anyoneCanJoin": {
|
||||||
"type": "text",
|
"type": "text",
|
||||||
|
|
|
@ -28,4 +28,5 @@ abstract class SettingKeys {
|
||||||
static const String autoplayImages = 'chat.fluffy.autoplay_images';
|
static const String autoplayImages = 'chat.fluffy.autoplay_images';
|
||||||
static const String sendOnEnter = 'chat.fluffy.send_on_enter';
|
static const String sendOnEnter = 'chat.fluffy.send_on_enter';
|
||||||
static const String experimentalVoip = 'chat.fluffy.experimental_voip';
|
static const String experimentalVoip = 'chat.fluffy.experimental_voip';
|
||||||
|
static const String desktopDrawerOpen = 'chat.fluffy.drawer.open';
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,9 @@ import 'package:flutter/services.dart';
|
||||||
|
|
||||||
import 'package:vrouter/vrouter.dart';
|
import 'package:vrouter/vrouter.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/config/setting_keys.dart';
|
||||||
import 'package:fluffychat/utils/platform_infos.dart';
|
import 'package:fluffychat/utils/platform_infos.dart';
|
||||||
|
import '../widgets/matrix.dart';
|
||||||
import 'app_config.dart';
|
import 'app_config.dart';
|
||||||
|
|
||||||
abstract class FluffyThemes {
|
abstract class FluffyThemes {
|
||||||
|
@ -14,8 +16,24 @@ abstract class FluffyThemes {
|
||||||
static bool isColumnMode(BuildContext context) =>
|
static bool isColumnMode(BuildContext context) =>
|
||||||
isColumnModeByWidth(MediaQuery.of(context).size.width);
|
isColumnModeByWidth(MediaQuery.of(context).size.width);
|
||||||
|
|
||||||
static bool getDisplayNavigationRail(BuildContext context) =>
|
static ValueNotifier<bool>? _navigationRailWidth;
|
||||||
!VRouter.of(context).path.startsWith('/settings');
|
|
||||||
|
static ValueNotifier<bool>? getDisplayNavigationRail(BuildContext context) {
|
||||||
|
if (!VRouter.of(context).path.startsWith('/settings')) {
|
||||||
|
if (_navigationRailWidth == null) {
|
||||||
|
_navigationRailWidth = ValueNotifier(false);
|
||||||
|
Matrix.of(context)
|
||||||
|
.store
|
||||||
|
.getItemBool(SettingKeys.desktopDrawerOpen, false)
|
||||||
|
.then((value) => _navigationRailWidth!.value = value);
|
||||||
|
}
|
||||||
|
return _navigationRailWidth;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static const hugeScreenBreakpoint = 1280;
|
||||||
|
|
||||||
static const fallbackTextStyle = TextStyle(
|
static const fallbackTextStyle = TextStyle(
|
||||||
fontFamily: 'Roboto',
|
fontFamily: 'Roboto',
|
||||||
|
|
|
@ -5,6 +5,7 @@ import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
||||||
|
import 'package:badges/badges.dart';
|
||||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
import 'package:future_loading_dialog/future_loading_dialog.dart';
|
import 'package:future_loading_dialog/future_loading_dialog.dart';
|
||||||
import 'package:matrix/matrix.dart';
|
import 'package:matrix/matrix.dart';
|
||||||
|
@ -13,12 +14,14 @@ import 'package:uni_links/uni_links.dart';
|
||||||
import 'package:vrouter/vrouter.dart';
|
import 'package:vrouter/vrouter.dart';
|
||||||
|
|
||||||
import 'package:fluffychat/config/app_config.dart';
|
import 'package:fluffychat/config/app_config.dart';
|
||||||
|
import 'package:fluffychat/config/setting_keys.dart';
|
||||||
import 'package:fluffychat/config/themes.dart';
|
import 'package:fluffychat/config/themes.dart';
|
||||||
import 'package:fluffychat/pages/chat_list/chat_list_view.dart';
|
import 'package:fluffychat/pages/chat_list/chat_list_view.dart';
|
||||||
import 'package:fluffychat/utils/famedlysdk_store.dart';
|
import 'package:fluffychat/utils/famedlysdk_store.dart';
|
||||||
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart';
|
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart';
|
||||||
import 'package:fluffychat/utils/platform_infos.dart';
|
import 'package:fluffychat/utils/platform_infos.dart';
|
||||||
|
import 'package:fluffychat/widgets/unread_rooms_badge.dart';
|
||||||
import '../../../utils/account_bundles.dart';
|
import '../../../utils/account_bundles.dart';
|
||||||
import '../../utils/matrix_sdk_extensions.dart/matrix_file_extension.dart';
|
import '../../utils/matrix_sdk_extensions.dart/matrix_file_extension.dart';
|
||||||
import '../../utils/url_launcher.dart';
|
import '../../utils/url_launcher.dart';
|
||||||
|
@ -667,6 +670,59 @@ class ChatListController extends State<ChatList>
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
List<NavigationDestination> getNavigationDestinations(BuildContext context) {
|
||||||
|
final badgePosition = BadgePosition.topEnd(top: -12, end: -8);
|
||||||
|
return [
|
||||||
|
if (AppConfig.separateChatTypes) ...[
|
||||||
|
NavigationDestination(
|
||||||
|
icon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.groups),
|
||||||
|
child: const Icon(Icons.groups_outlined),
|
||||||
|
),
|
||||||
|
selectedIcon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.groups),
|
||||||
|
child: const Icon(Icons.groups),
|
||||||
|
),
|
||||||
|
label: L10n.of(context)!.groups,
|
||||||
|
),
|
||||||
|
NavigationDestination(
|
||||||
|
icon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.messages),
|
||||||
|
child: const Icon(Icons.chat_outlined),
|
||||||
|
),
|
||||||
|
selectedIcon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.messages),
|
||||||
|
child: const Icon(Icons.chat),
|
||||||
|
),
|
||||||
|
label: L10n.of(context)!.messages,
|
||||||
|
),
|
||||||
|
] else
|
||||||
|
NavigationDestination(
|
||||||
|
icon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.allChats),
|
||||||
|
child: const Icon(Icons.chat_outlined),
|
||||||
|
),
|
||||||
|
selectedIcon: UnreadRoomsBadge(
|
||||||
|
badgePosition: badgePosition,
|
||||||
|
filter: getRoomFilterByActiveFilter(ActiveFilter.allChats),
|
||||||
|
child: const Icon(Icons.chat),
|
||||||
|
),
|
||||||
|
label: L10n.of(context)!.chats,
|
||||||
|
),
|
||||||
|
if (spaces.isNotEmpty)
|
||||||
|
NavigationDestination(
|
||||||
|
icon: const Icon(Icons.workspaces_outlined),
|
||||||
|
selectedIcon: const Icon(Icons.workspaces),
|
||||||
|
label: L10n.of(context)!.spaces,
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
Matrix.of(context).navigatorContext = context;
|
Matrix.of(context).navigatorContext = context;
|
||||||
|
@ -685,6 +741,14 @@ class ChatListController extends State<ChatList>
|
||||||
|
|
||||||
Future<void> dehydrate() =>
|
Future<void> dehydrate() =>
|
||||||
SettingsAccountController.dehydrateDevice(context);
|
SettingsAccountController.dehydrateDevice(context);
|
||||||
|
|
||||||
|
void toggleDesktopDrawer() {
|
||||||
|
final listenable = FluffyThemes.getDisplayNavigationRail(context)!;
|
||||||
|
listenable.value = !listenable.value;
|
||||||
|
Matrix.of(context)
|
||||||
|
.store
|
||||||
|
.setItemBool(SettingKeys.desktopDrawerOpen, listenable.value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
enum EditBundleAction { addToBundle, removeFromBundle }
|
enum EditBundleAction { addToBundle, removeFromBundle }
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/services.dart';
|
import 'package:flutter/services.dart';
|
||||||
|
|
||||||
import 'package:badges/badges.dart';
|
|
||||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
|
import 'package:keyboard_shortcuts/keyboard_shortcuts.dart';
|
||||||
import 'package:vrouter/vrouter.dart';
|
import 'package:vrouter/vrouter.dart';
|
||||||
|
@ -9,11 +8,10 @@ import 'package:vrouter/vrouter.dart';
|
||||||
import 'package:fluffychat/config/app_config.dart';
|
import 'package:fluffychat/config/app_config.dart';
|
||||||
import 'package:fluffychat/config/themes.dart';
|
import 'package:fluffychat/config/themes.dart';
|
||||||
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
||||||
import 'package:fluffychat/widgets/avatar.dart';
|
|
||||||
import 'package:fluffychat/widgets/unread_rooms_badge.dart';
|
|
||||||
import '../../widgets/matrix.dart';
|
import '../../widgets/matrix.dart';
|
||||||
import 'chat_list_body.dart';
|
import 'chat_list_body.dart';
|
||||||
import 'chat_list_header.dart';
|
import 'chat_list_header.dart';
|
||||||
|
import 'navigation_rail.dart';
|
||||||
import 'start_chat_fab.dart';
|
import 'start_chat_fab.dart';
|
||||||
|
|
||||||
class ChatListView extends StatelessWidget {
|
class ChatListView extends StatelessWidget {
|
||||||
|
@ -21,66 +19,8 @@ class ChatListView extends StatelessWidget {
|
||||||
|
|
||||||
const ChatListView(this.controller, {Key? key}) : super(key: key);
|
const ChatListView(this.controller, {Key? key}) : super(key: key);
|
||||||
|
|
||||||
List<NavigationDestination> getNavigationDestinations(BuildContext context) {
|
|
||||||
final badgePosition = BadgePosition.topEnd(top: -12, end: -8);
|
|
||||||
return [
|
|
||||||
if (AppConfig.separateChatTypes) ...[
|
|
||||||
NavigationDestination(
|
|
||||||
icon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
|
|
||||||
child: const Icon(Icons.groups_outlined),
|
|
||||||
),
|
|
||||||
selectedIcon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter: controller.getRoomFilterByActiveFilter(ActiveFilter.groups),
|
|
||||||
child: const Icon(Icons.groups),
|
|
||||||
),
|
|
||||||
label: L10n.of(context)!.groups,
|
|
||||||
),
|
|
||||||
NavigationDestination(
|
|
||||||
icon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter:
|
|
||||||
controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
|
|
||||||
child: const Icon(Icons.chat_outlined),
|
|
||||||
),
|
|
||||||
selectedIcon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter:
|
|
||||||
controller.getRoomFilterByActiveFilter(ActiveFilter.messages),
|
|
||||||
child: const Icon(Icons.chat),
|
|
||||||
),
|
|
||||||
label: L10n.of(context)!.messages,
|
|
||||||
),
|
|
||||||
] else
|
|
||||||
NavigationDestination(
|
|
||||||
icon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter:
|
|
||||||
controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
|
|
||||||
child: const Icon(Icons.chat_outlined),
|
|
||||||
),
|
|
||||||
selectedIcon: UnreadRoomsBadge(
|
|
||||||
badgePosition: badgePosition,
|
|
||||||
filter:
|
|
||||||
controller.getRoomFilterByActiveFilter(ActiveFilter.allChats),
|
|
||||||
child: const Icon(Icons.chat),
|
|
||||||
),
|
|
||||||
label: L10n.of(context)!.chats,
|
|
||||||
),
|
|
||||||
if (controller.spaces.isNotEmpty)
|
|
||||||
const NavigationDestination(
|
|
||||||
icon: Icon(Icons.workspaces_outlined),
|
|
||||||
selectedIcon: Icon(Icons.workspaces),
|
|
||||||
label: 'Spaces',
|
|
||||||
),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final client = Matrix.of(context).client;
|
|
||||||
return StreamBuilder<Object?>(
|
return StreamBuilder<Object?>(
|
||||||
stream: Matrix.of(context).onShareContentChanged.stream,
|
stream: Matrix.of(context).onShareContentChanged.stream,
|
||||||
builder: (_, __) {
|
builder: (_, __) {
|
||||||
|
@ -106,116 +46,8 @@ class ChatListView extends StatelessWidget {
|
||||||
child: Row(
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
if (FluffyThemes.isColumnMode(context) &&
|
if (FluffyThemes.isColumnMode(context) &&
|
||||||
FluffyThemes.getDisplayNavigationRail(context)) ...[
|
FluffyThemes.getDisplayNavigationRail(context) != null) ...[
|
||||||
Builder(builder: (context) {
|
ChatListNavigationRail(controller: controller),
|
||||||
final allSpaces = client.rooms.where((room) => room.isSpace);
|
|
||||||
final rootSpaces = allSpaces
|
|
||||||
.where(
|
|
||||||
(space) => !allSpaces.any(
|
|
||||||
(parentSpace) => parentSpace.spaceChildren
|
|
||||||
.any((child) => child.roomId == space.id),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.toList();
|
|
||||||
final destinations = getNavigationDestinations(context);
|
|
||||||
|
|
||||||
return SizedBox(
|
|
||||||
width: 64,
|
|
||||||
child: ListView.builder(
|
|
||||||
scrollDirection: Axis.vertical,
|
|
||||||
itemCount: rootSpaces.length + destinations.length,
|
|
||||||
itemBuilder: (context, i) {
|
|
||||||
if (i < destinations.length) {
|
|
||||||
final isSelected = i == controller.selectedIndex;
|
|
||||||
return Container(
|
|
||||||
height: 64,
|
|
||||||
width: 64,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border(
|
|
||||||
bottom: i == (destinations.length - 1)
|
|
||||||
? BorderSide(
|
|
||||||
width: 1,
|
|
||||||
color: Theme.of(context).dividerColor,
|
|
||||||
)
|
|
||||||
: BorderSide.none,
|
|
||||||
left: BorderSide(
|
|
||||||
color: isSelected
|
|
||||||
? Theme.of(context).colorScheme.primary
|
|
||||||
: Colors.transparent,
|
|
||||||
width: 4,
|
|
||||||
),
|
|
||||||
right: const BorderSide(
|
|
||||||
color: Colors.transparent,
|
|
||||||
width: 4,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
alignment: Alignment.center,
|
|
||||||
child: IconButton(
|
|
||||||
color: isSelected
|
|
||||||
? Theme.of(context).colorScheme.secondary
|
|
||||||
: null,
|
|
||||||
icon: CircleAvatar(
|
|
||||||
backgroundColor: isSelected
|
|
||||||
? Theme.of(context).colorScheme.secondary
|
|
||||||
: Theme.of(context)
|
|
||||||
.colorScheme
|
|
||||||
.background,
|
|
||||||
foregroundColor: isSelected
|
|
||||||
? Theme.of(context)
|
|
||||||
.colorScheme
|
|
||||||
.onSecondary
|
|
||||||
: Theme.of(context)
|
|
||||||
.colorScheme
|
|
||||||
.onBackground,
|
|
||||||
child: i == controller.selectedIndex
|
|
||||||
? destinations[i].selectedIcon ??
|
|
||||||
destinations[i].icon
|
|
||||||
: destinations[i].icon),
|
|
||||||
tooltip: destinations[i].label,
|
|
||||||
onPressed: () =>
|
|
||||||
controller.onDestinationSelected(i),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
i -= destinations.length;
|
|
||||||
final isSelected =
|
|
||||||
controller.activeFilter == ActiveFilter.spaces &&
|
|
||||||
rootSpaces[i].id == controller.activeSpaceId;
|
|
||||||
return Container(
|
|
||||||
height: 64,
|
|
||||||
width: 64,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border(
|
|
||||||
left: BorderSide(
|
|
||||||
color: isSelected
|
|
||||||
? Theme.of(context).colorScheme.secondary
|
|
||||||
: Colors.transparent,
|
|
||||||
width: 4,
|
|
||||||
),
|
|
||||||
right: const BorderSide(
|
|
||||||
color: Colors.transparent,
|
|
||||||
width: 4,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
alignment: Alignment.center,
|
|
||||||
child: IconButton(
|
|
||||||
tooltip: rootSpaces[i].displayname,
|
|
||||||
icon: Avatar(
|
|
||||||
mxContent: rootSpaces[i].avatar,
|
|
||||||
name: rootSpaces[i].displayname,
|
|
||||||
size: 32,
|
|
||||||
fontSize: 12,
|
|
||||||
),
|
|
||||||
onPressed: () =>
|
|
||||||
controller.setActiveSpace(rootSpaces[i].id),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
Container(
|
Container(
|
||||||
color: Theme.of(context).dividerColor,
|
color: Theme.of(context).dividerColor,
|
||||||
width: 1,
|
width: 1,
|
||||||
|
@ -235,7 +67,8 @@ class ChatListView extends StatelessWidget {
|
||||||
selectedIndex: controller.selectedIndex,
|
selectedIndex: controller.selectedIndex,
|
||||||
onDestinationSelected:
|
onDestinationSelected:
|
||||||
controller.onDestinationSelected,
|
controller.onDestinationSelected,
|
||||||
destinations: getNavigationDestinations(context),
|
destinations:
|
||||||
|
controller.getNavigationDestinations(context),
|
||||||
)
|
)
|
||||||
: null,
|
: null,
|
||||||
floatingActionButtonLocation:
|
floatingActionButtonLocation:
|
||||||
|
|
82
lib/pages/chat_list/navigation_rail.dart
Normal file
82
lib/pages/chat_list/navigation_rail.dart
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:animations/animations.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/config/themes.dart';
|
||||||
|
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
||||||
|
import 'package:fluffychat/widgets/matrix.dart';
|
||||||
|
import 'navigation_rail_content.dart';
|
||||||
|
import 'spaces_drawer.dart';
|
||||||
|
|
||||||
|
final drawerKey = GlobalKey<State<AnimatedContainer>>();
|
||||||
|
|
||||||
|
class ChatListNavigationRail extends StatelessWidget {
|
||||||
|
final ChatListController controller;
|
||||||
|
|
||||||
|
const ChatListNavigationRail({Key? key, required this.controller})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return ValueListenableBuilder<bool>(
|
||||||
|
valueListenable: FluffyThemes.getDisplayNavigationRail(context)!,
|
||||||
|
builder: (context, drawerOpen, c) {
|
||||||
|
final client = Matrix.of(context).client;
|
||||||
|
final allSpaces = client.rooms.where((room) => room.isSpace);
|
||||||
|
final rootSpaces = allSpaces
|
||||||
|
.where(
|
||||||
|
(space) => space.hasNotJoinedParentSpace(),
|
||||||
|
)
|
||||||
|
.toList();
|
||||||
|
final destinations = controller.getNavigationDestinations(context);
|
||||||
|
|
||||||
|
return LayoutBuilder(
|
||||||
|
builder: (context, constraints) {
|
||||||
|
final allowFullSizeDrawer = MediaQuery.of(context).size.width >=
|
||||||
|
FluffyThemes.hugeScreenBreakpoint;
|
||||||
|
drawerOpen &= allowFullSizeDrawer;
|
||||||
|
return AnimatedContainer(
|
||||||
|
key: drawerKey,
|
||||||
|
width: drawerOpen ? 256 : 64,
|
||||||
|
duration: const Duration(milliseconds: 250),
|
||||||
|
curve: Curves.easeOut,
|
||||||
|
child: PageTransitionSwitcher(
|
||||||
|
reverse: drawerOpen,
|
||||||
|
transitionBuilder: (
|
||||||
|
Widget child,
|
||||||
|
Animation<double> primaryAnimation,
|
||||||
|
Animation<double> secondaryAnimation,
|
||||||
|
) {
|
||||||
|
return SharedAxisTransition(
|
||||||
|
animation: primaryAnimation,
|
||||||
|
secondaryAnimation: secondaryAnimation,
|
||||||
|
transitionType: SharedAxisTransitionType.horizontal,
|
||||||
|
fillColor: Theme.of(context).scaffoldBackgroundColor,
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
layoutBuilder: (children) => Stack(
|
||||||
|
alignment: Alignment.topLeft,
|
||||||
|
children: children,
|
||||||
|
),
|
||||||
|
child: drawerOpen
|
||||||
|
? SpacesDrawer(
|
||||||
|
key: const ValueKey(true),
|
||||||
|
rootSpaces: rootSpaces,
|
||||||
|
destinations: destinations,
|
||||||
|
controller: controller)
|
||||||
|
: NavigationRailContent(
|
||||||
|
key: const ValueKey(false),
|
||||||
|
allowFullSizeDrawer: allowFullSizeDrawer,
|
||||||
|
rootSpaces: rootSpaces,
|
||||||
|
destinations: destinations,
|
||||||
|
controller: controller,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
132
lib/pages/chat_list/navigation_rail_content.dart
Normal file
132
lib/pages/chat_list/navigation_rail_content.dart
Normal file
|
@ -0,0 +1,132 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
||||||
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
|
|
||||||
|
class NavigationRailContent extends StatelessWidget {
|
||||||
|
final List<Room> rootSpaces;
|
||||||
|
final List<NavigationDestination> destinations;
|
||||||
|
final ChatListController controller;
|
||||||
|
final bool allowFullSizeDrawer;
|
||||||
|
|
||||||
|
const NavigationRailContent({
|
||||||
|
Key? key,
|
||||||
|
required this.rootSpaces,
|
||||||
|
required this.destinations,
|
||||||
|
required this.controller,
|
||||||
|
required this.allowFullSizeDrawer,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final count = rootSpaces.length + destinations.length;
|
||||||
|
final listView = ListView.builder(
|
||||||
|
scrollDirection: Axis.vertical,
|
||||||
|
itemCount: count,
|
||||||
|
itemBuilder: (context, i) {
|
||||||
|
if (i < destinations.length) {
|
||||||
|
final isSelected = i == controller.selectedIndex;
|
||||||
|
return Container(
|
||||||
|
height: 64,
|
||||||
|
width: 64,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border(
|
||||||
|
bottom: i == (destinations.length - 1)
|
||||||
|
? BorderSide(
|
||||||
|
width: 1,
|
||||||
|
color: Theme.of(context).dividerColor,
|
||||||
|
)
|
||||||
|
: BorderSide.none,
|
||||||
|
left: BorderSide(
|
||||||
|
color: isSelected
|
||||||
|
? Theme.of(context).colorScheme.primary
|
||||||
|
: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
right: const BorderSide(
|
||||||
|
color: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: IconButton(
|
||||||
|
color:
|
||||||
|
isSelected ? Theme.of(context).colorScheme.secondary : null,
|
||||||
|
icon: CircleAvatar(
|
||||||
|
backgroundColor: isSelected
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context).colorScheme.background,
|
||||||
|
foregroundColor: isSelected
|
||||||
|
? Theme.of(context).colorScheme.onSecondary
|
||||||
|
: Theme.of(context).colorScheme.onBackground,
|
||||||
|
child: i == controller.selectedIndex
|
||||||
|
? destinations[i].selectedIcon ?? destinations[i].icon
|
||||||
|
: destinations[i].icon),
|
||||||
|
tooltip: destinations[i].label,
|
||||||
|
onPressed: () => controller.onDestinationSelected(i),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
i -= destinations.length;
|
||||||
|
final isSelected = controller.activeFilter == ActiveFilter.spaces &&
|
||||||
|
rootSpaces[i].id == controller.activeSpaceId;
|
||||||
|
return Container(
|
||||||
|
height: 64,
|
||||||
|
width: 64,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border(
|
||||||
|
left: BorderSide(
|
||||||
|
color: isSelected
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
right: const BorderSide(
|
||||||
|
color: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: IconButton(
|
||||||
|
tooltip: rootSpaces[i].displayname,
|
||||||
|
icon: Avatar(
|
||||||
|
mxContent: rootSpaces[i].avatar,
|
||||||
|
name: rootSpaces[i].displayname,
|
||||||
|
size: 32,
|
||||||
|
fontSize: 12,
|
||||||
|
),
|
||||||
|
onPressed: () => controller.setActiveSpace(rootSpaces[i].id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
if (allowFullSizeDrawer) {
|
||||||
|
return Column(
|
||||||
|
children: [
|
||||||
|
Expanded(child: listView),
|
||||||
|
Container(
|
||||||
|
height: 64,
|
||||||
|
width: 64,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: CircleAvatar(
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.secondary,
|
||||||
|
child: IconButton(
|
||||||
|
color: Theme.of(context).colorScheme.onSecondary,
|
||||||
|
tooltip: L10n.of(context)!.allSpaces,
|
||||||
|
onPressed: controller.toggleDesktopDrawer,
|
||||||
|
icon: const Icon(Icons.arrow_right),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return listView;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,3 +1,5 @@
|
||||||
|
import 'dart:async';
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
import 'package:adaptive_dialog/adaptive_dialog.dart';
|
||||||
|
@ -17,6 +19,7 @@ import '../../widgets/matrix.dart';
|
||||||
class SpaceView extends StatefulWidget {
|
class SpaceView extends StatefulWidget {
|
||||||
final ChatListController controller;
|
final ChatListController controller;
|
||||||
final ScrollController scrollController;
|
final ScrollController scrollController;
|
||||||
|
|
||||||
const SpaceView(
|
const SpaceView(
|
||||||
this.controller, {
|
this.controller, {
|
||||||
Key? key,
|
Key? key,
|
||||||
|
@ -28,23 +31,10 @@ class SpaceView extends StatefulWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
class _SpaceViewState extends State<SpaceView> {
|
class _SpaceViewState extends State<SpaceView> {
|
||||||
static final Map<String, Future<GetSpaceHierarchyResponse>> _requests = {};
|
SpaceHierarchyCache? cache;
|
||||||
|
|
||||||
String? prevBatch;
|
String? prevBatch;
|
||||||
|
|
||||||
void _refresh() {
|
|
||||||
setState(() {
|
|
||||||
_requests.remove(widget.controller.activeSpaceId);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Future<GetSpaceHierarchyResponse> getFuture(String activeSpaceId) =>
|
|
||||||
_requests[activeSpaceId] ??= Matrix.of(context).client.getSpaceHierarchy(
|
|
||||||
activeSpaceId,
|
|
||||||
maxDepth: 1,
|
|
||||||
from: prevBatch,
|
|
||||||
);
|
|
||||||
|
|
||||||
void _onJoinSpaceChild(SpaceRoomsChunk spaceChild) async {
|
void _onJoinSpaceChild(SpaceRoomsChunk spaceChild) async {
|
||||||
final client = Matrix.of(context).client;
|
final client = Matrix.of(context).client;
|
||||||
final space = client.getRoomById(widget.controller.activeSpaceId!);
|
final space = client.getRoomById(widget.controller.activeSpaceId!);
|
||||||
|
@ -64,7 +54,9 @@ class _SpaceViewState extends State<SpaceView> {
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
if (result.error != null) return;
|
if (result.error != null) return;
|
||||||
_refresh();
|
setState(() {
|
||||||
|
cache!.refresh(widget.controller.activeSpaceId!);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if (spaceChild.roomType == 'm.space') {
|
if (spaceChild.roomType == 'm.space') {
|
||||||
if (spaceChild.roomId == widget.controller.activeSpaceId) {
|
if (spaceChild.roomId == widget.controller.activeSpaceId) {
|
||||||
|
@ -132,6 +124,8 @@ class _SpaceViewState extends State<SpaceView> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
cache ??= SpaceHierarchyCache.instance ??=
|
||||||
|
SpaceHierarchyCache(client: Matrix.of(context).client);
|
||||||
final client = Matrix.of(context).client;
|
final client = Matrix.of(context).client;
|
||||||
final activeSpaceId = widget.controller.activeSpaceId;
|
final activeSpaceId = widget.controller.activeSpaceId;
|
||||||
final allSpaces = client.rooms.where((room) => room.isSpace);
|
final allSpaces = client.rooms.where((room) => room.isSpace);
|
||||||
|
@ -170,7 +164,7 @@ class _SpaceViewState extends State<SpaceView> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return FutureBuilder<GetSpaceHierarchyResponse>(
|
return FutureBuilder<GetSpaceHierarchyResponse>(
|
||||||
future: getFuture(activeSpaceId),
|
future: cache!.getFuture(activeSpaceId, prevBatch),
|
||||||
builder: (context, snapshot) {
|
builder: (context, snapshot) {
|
||||||
final response = snapshot.data;
|
final response = snapshot.data;
|
||||||
final error = snapshot.error;
|
final error = snapshot.error;
|
||||||
|
@ -184,7 +178,7 @@ class _SpaceViewState extends State<SpaceView> {
|
||||||
child: Text(error.toLocalizedString(context)),
|
child: Text(error.toLocalizedString(context)),
|
||||||
),
|
),
|
||||||
IconButton(
|
IconButton(
|
||||||
onPressed: _refresh,
|
onPressed: () => cache!.refresh(activeSpaceId),
|
||||||
icon: const Icon(Icons.refresh_outlined),
|
icon: const Icon(Icons.refresh_outlined),
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
|
@ -221,24 +215,38 @@ class _SpaceViewState extends State<SpaceView> {
|
||||||
: parentSpace.displayname),
|
: parentSpace.displayname),
|
||||||
trailing: IconButton(
|
trailing: IconButton(
|
||||||
icon: snapshot.connectionState != ConnectionState.done
|
icon: snapshot.connectionState != ConnectionState.done
|
||||||
? const CircularProgressIndicator.adaptive()
|
? const SizedBox.square(
|
||||||
|
dimension: 24,
|
||||||
|
child: CircularProgressIndicator.adaptive(),
|
||||||
|
)
|
||||||
: const Icon(Icons.refresh_outlined),
|
: const Icon(Icons.refresh_outlined),
|
||||||
onPressed:
|
onPressed:
|
||||||
snapshot.connectionState != ConnectionState.done
|
snapshot.connectionState != ConnectionState.done
|
||||||
? null
|
? null
|
||||||
: _refresh,
|
: () => setState(() {
|
||||||
|
cache!.refresh(activeSpaceId);
|
||||||
|
}),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
i--;
|
i--;
|
||||||
if (canLoadMore && i == spaceChildren.length) {
|
if (canLoadMore && i == spaceChildren.length) {
|
||||||
return ListTile(
|
return ListTile(
|
||||||
title: Text(L10n.of(context)!.loadMore),
|
title: TextButton.icon(
|
||||||
trailing: const Icon(Icons.chevron_right_outlined),
|
label: Text(L10n.of(context)!.loadMore),
|
||||||
onTap: () {
|
icon: cache?.isRefreshing(activeSpaceId) ?? false
|
||||||
prevBatch = response.nextBatch;
|
? const SizedBox.square(
|
||||||
_refresh();
|
dimension: 24,
|
||||||
|
child: CircularProgressIndicator(),
|
||||||
|
)
|
||||||
|
: const Icon(Icons.refresh),
|
||||||
|
onPressed: () {
|
||||||
|
prevBatch = snapshot.data!.nextBatch!;
|
||||||
|
setState(() {
|
||||||
|
cache!.refresh(activeSpaceId);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
final spaceChild = spaceChildren[i];
|
final spaceChild = spaceChildren[i];
|
||||||
|
@ -336,3 +344,69 @@ enum SpaceChildContextAction {
|
||||||
leave,
|
leave,
|
||||||
removeFromSpace,
|
removeFromSpace,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class SpaceHierarchyCache {
|
||||||
|
static SpaceHierarchyCache? instance;
|
||||||
|
|
||||||
|
final Client client;
|
||||||
|
final Map<String, List<Completer<GetSpaceHierarchyResponse?>>> _requests = {};
|
||||||
|
|
||||||
|
SpaceHierarchyCache({required this.client});
|
||||||
|
|
||||||
|
void refresh(String activeSpaceId) {
|
||||||
|
_requests.remove(activeSpaceId);
|
||||||
|
}
|
||||||
|
|
||||||
|
bool isRefreshing(String spaceId) =>
|
||||||
|
_requests[spaceId] != null &&
|
||||||
|
(_requests[spaceId]?.any((element) => !element.isCompleted) ?? false);
|
||||||
|
|
||||||
|
Future<GetSpaceHierarchyResponse> getFuture(
|
||||||
|
String activeSpaceId,
|
||||||
|
String? prevBatch,
|
||||||
|
) {
|
||||||
|
_requests[activeSpaceId] ??= [];
|
||||||
|
final completer = Completer<GetSpaceHierarchyResponse?>();
|
||||||
|
client
|
||||||
|
.getSpaceHierarchy(
|
||||||
|
activeSpaceId,
|
||||||
|
maxDepth: 1,
|
||||||
|
from: prevBatch,
|
||||||
|
)
|
||||||
|
.then(
|
||||||
|
completer.complete,
|
||||||
|
)
|
||||||
|
.onError(completer.completeError);
|
||||||
|
_requests[activeSpaceId]?.add(completer);
|
||||||
|
|
||||||
|
return Future.wait(_requests[activeSpaceId]!.reversed.map(
|
||||||
|
(e) => e.future.onError((e, s) => null),
|
||||||
|
)).then(
|
||||||
|
(value) => SpacesHierarchyMerges.merged(
|
||||||
|
value.whereNotNull().toList(),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension SpacesHierarchyMerges on GetSpaceHierarchyResponse {
|
||||||
|
static GetSpaceHierarchyResponse merged(
|
||||||
|
List<GetSpaceHierarchyResponse> responses,
|
||||||
|
) {
|
||||||
|
final rooms = <SpaceRoomsChunk>[];
|
||||||
|
for (final response in responses) {
|
||||||
|
for (final newRoom in response.rooms) {
|
||||||
|
if (rooms.none(
|
||||||
|
(existingRoom) => existingRoom.roomId == newRoom.roomId,
|
||||||
|
)) {
|
||||||
|
rooms.add(newRoom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
String? nextBatch;
|
||||||
|
if (!responses.any((response) => response.nextBatch == null)) {
|
||||||
|
nextBatch = responses.last.nextBatch;
|
||||||
|
}
|
||||||
|
return GetSpaceHierarchyResponse(rooms: rooms, nextBatch: nextBatch);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
163
lib/pages/chat_list/spaces_drawer.dart
Normal file
163
lib/pages/chat_list/spaces_drawer.dart
Normal file
|
@ -0,0 +1,163 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:collection/collection.dart';
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
|
import 'chat_list.dart';
|
||||||
|
import 'spaces_drawer_entry.dart';
|
||||||
|
|
||||||
|
class SpacesDrawer extends StatelessWidget {
|
||||||
|
final ChatListController controller;
|
||||||
|
final List<Room> rootSpaces;
|
||||||
|
final List<NavigationDestination> destinations;
|
||||||
|
|
||||||
|
const SpacesDrawer({
|
||||||
|
Key? key,
|
||||||
|
required this.controller,
|
||||||
|
required this.rootSpaces,
|
||||||
|
required this.destinations,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final spacesHierarchy = controller.spaces
|
||||||
|
.map((e) =>
|
||||||
|
SpacesEntryMaybeChildren.buildIfTopLevel(e, controller.spaces))
|
||||||
|
.whereNotNull()
|
||||||
|
.toList();
|
||||||
|
|
||||||
|
final filteredDestinations = destinations;
|
||||||
|
filteredDestinations
|
||||||
|
.removeWhere((element) => element.label == L10n.of(context)!.spaces);
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: ListView.builder(
|
||||||
|
itemCount: spacesHierarchy.length + filteredDestinations.length,
|
||||||
|
itemBuilder: (context, i) {
|
||||||
|
if (i < filteredDestinations.length) {
|
||||||
|
final isSelected = i == controller.selectedIndex;
|
||||||
|
return Container(
|
||||||
|
height: 64,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border(
|
||||||
|
bottom: i == (filteredDestinations.length - 1)
|
||||||
|
? BorderSide(
|
||||||
|
width: 1,
|
||||||
|
color: Theme.of(context).dividerColor,
|
||||||
|
)
|
||||||
|
: BorderSide.none,
|
||||||
|
left: BorderSide(
|
||||||
|
color: isSelected
|
||||||
|
? Theme.of(context).colorScheme.primary
|
||||||
|
: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
right: const BorderSide(
|
||||||
|
color: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: ListTile(
|
||||||
|
leading: CircleAvatar(
|
||||||
|
backgroundColor: isSelected
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Theme.of(context).colorScheme.background,
|
||||||
|
foregroundColor: isSelected
|
||||||
|
? Theme.of(context).colorScheme.onSecondary
|
||||||
|
: Theme.of(context).colorScheme.onBackground,
|
||||||
|
child: i == controller.selectedIndex
|
||||||
|
? filteredDestinations[i].selectedIcon ??
|
||||||
|
filteredDestinations[i].icon
|
||||||
|
: filteredDestinations[i].icon),
|
||||||
|
title: Text(filteredDestinations[i].label),
|
||||||
|
onTap: () => controller.onDestinationSelected(i),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
i -= filteredDestinations.length;
|
||||||
|
}
|
||||||
|
final space = spacesHierarchy[i];
|
||||||
|
return SpacesDrawerEntry(
|
||||||
|
entry: space,
|
||||||
|
controller: controller,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
height: 64,
|
||||||
|
width: 64,
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(12.0),
|
||||||
|
child: CircleAvatar(
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.secondary,
|
||||||
|
foregroundColor: Theme.of(context).colorScheme.onSecondary,
|
||||||
|
child: IconButton(
|
||||||
|
tooltip: L10n.of(context)!.allSpaces,
|
||||||
|
color: Theme.of(context).colorScheme.onSecondary,
|
||||||
|
onPressed: controller.toggleDesktopDrawer,
|
||||||
|
icon: const Icon(Icons.arrow_left),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class SpacesEntryMaybeChildren {
|
||||||
|
final Room spacesEntry;
|
||||||
|
|
||||||
|
final Set<SpacesEntryMaybeChildren> children;
|
||||||
|
|
||||||
|
const SpacesEntryMaybeChildren(this.spacesEntry, [this.children = const {}]);
|
||||||
|
|
||||||
|
static SpacesEntryMaybeChildren? buildIfTopLevel(
|
||||||
|
Room room, List<Room> allEntries,
|
||||||
|
[String? parent]) {
|
||||||
|
// don't add rooms with parent space apart from those where the
|
||||||
|
// parent space is not joined
|
||||||
|
if ((parent == null &&
|
||||||
|
room.spaceParents.isNotEmpty &&
|
||||||
|
!room.hasNotJoinedParentSpace()) ||
|
||||||
|
(parent != null &&
|
||||||
|
!room.spaceParents.any((element) => element.roomId == parent))) {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
final children = allEntries
|
||||||
|
.where((element) =>
|
||||||
|
element.spaceParents.any((parent) => parent.roomId == room.id))
|
||||||
|
.toList();
|
||||||
|
return SpacesEntryMaybeChildren(
|
||||||
|
room,
|
||||||
|
children
|
||||||
|
.map((e) => buildIfTopLevel(e, allEntries, room.id))
|
||||||
|
.whereNotNull()
|
||||||
|
.toSet());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bool isActiveOrChild(ChatListController controller) =>
|
||||||
|
spacesEntry.id == controller.activeSpaceId ||
|
||||||
|
children.any(
|
||||||
|
(element) => element.isActiveOrChild(controller),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
extension HasNotJoinedParentSpace on Room {
|
||||||
|
bool hasNotJoinedParentSpace() {
|
||||||
|
return !client.rooms.any(
|
||||||
|
(parentSpace) =>
|
||||||
|
parentSpace.isSpace &&
|
||||||
|
parentSpace.spaceChildren.any((child) => child.roomId == id),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
152
lib/pages/chat_list/spaces_drawer_entry.dart
Normal file
152
lib/pages/chat_list/spaces_drawer_entry.dart
Normal file
|
@ -0,0 +1,152 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:collection/collection.dart';
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
||||||
|
import 'package:fluffychat/pages/chat_list/space_view.dart';
|
||||||
|
import 'package:fluffychat/pages/chat_list/spaces_drawer.dart';
|
||||||
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
|
import 'package:fluffychat/widgets/matrix.dart';
|
||||||
|
|
||||||
|
class SpacesDrawerEntry extends StatefulWidget {
|
||||||
|
final SpacesEntryMaybeChildren entry;
|
||||||
|
final ChatListController controller;
|
||||||
|
|
||||||
|
const SpacesDrawerEntry(
|
||||||
|
{Key? key, required this.entry, required this.controller})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<SpacesDrawerEntry> createState() => _SpacesDrawerEntryState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SpacesDrawerEntryState extends State<SpacesDrawerEntry> {
|
||||||
|
SpaceHierarchyCache? _cache;
|
||||||
|
|
||||||
|
String? prevBatch;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
_cache ??= SpaceHierarchyCache.instance ??=
|
||||||
|
SpaceHierarchyCache(client: Matrix.of(context).client);
|
||||||
|
return FutureBuilder<GetSpaceHierarchyResponse>(
|
||||||
|
future: _cache!.getFuture(widget.entry.spacesEntry.id, prevBatch),
|
||||||
|
builder: (context, snapshot) {
|
||||||
|
final space = Matrix.of(context).client.rooms.singleWhereOrNull(
|
||||||
|
(element) =>
|
||||||
|
element.id == snapshot.data?.rooms.first.roomId) ??
|
||||||
|
widget.entry.spacesEntry;
|
||||||
|
final room = space;
|
||||||
|
|
||||||
|
final canLoadMore = snapshot.data?.nextBatch != null;
|
||||||
|
final active =
|
||||||
|
widget.controller.activeSpaceId == widget.entry.spacesEntry.id;
|
||||||
|
final leading = Container(
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
alignment: Alignment.center,
|
||||||
|
child: Avatar(
|
||||||
|
mxContent: space.avatar,
|
||||||
|
name: space.displayname,
|
||||||
|
size: 32,
|
||||||
|
fontSize: 12,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
final title = Text(
|
||||||
|
space.name,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
);
|
||||||
|
void onTap() {
|
||||||
|
widget.controller.setActiveSpace(space.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
final trailing = SizedBox(
|
||||||
|
width: 32,
|
||||||
|
child: IconButton(
|
||||||
|
splashRadius: 24,
|
||||||
|
icon: const Icon(Icons.edit_outlined),
|
||||||
|
tooltip: L10n.of(context)!.edit,
|
||||||
|
onPressed: () => widget.controller.editSpace(context, room.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (widget.entry.children.isEmpty && !canLoadMore) {
|
||||||
|
return ListTile(
|
||||||
|
selected: active,
|
||||||
|
leading: leading,
|
||||||
|
title: title,
|
||||||
|
onTap: onTap,
|
||||||
|
trailing: trailing,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
final isSelected =
|
||||||
|
widget.controller.activeFilter == ActiveFilter.spaces &&
|
||||||
|
space.id == widget.controller.activeSpaceId;
|
||||||
|
return Stack(
|
||||||
|
alignment: Alignment.topLeft,
|
||||||
|
children: [
|
||||||
|
ExpansionTile(
|
||||||
|
leading: leading,
|
||||||
|
initiallyExpanded: widget.entry.children.any((element) =>
|
||||||
|
widget.entry.isActiveOrChild(widget.controller)),
|
||||||
|
title: GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisSize: MainAxisSize.max,
|
||||||
|
children: [
|
||||||
|
Expanded(child: title),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
trailing
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
...widget.entry.children.map((e) => SpacesDrawerEntry(
|
||||||
|
entry: e, controller: widget.controller)),
|
||||||
|
if (canLoadMore)
|
||||||
|
ListTile(
|
||||||
|
title: TextButton.icon(
|
||||||
|
label: Text(L10n.of(context)!.loadMore),
|
||||||
|
icon: _cache?.isRefreshing(
|
||||||
|
widget.entry.spacesEntry.id,
|
||||||
|
) ??
|
||||||
|
false
|
||||||
|
? const SizedBox.square(
|
||||||
|
dimension: 24,
|
||||||
|
child: CircularProgressIndicator(),
|
||||||
|
)
|
||||||
|
: const Icon(Icons.refresh),
|
||||||
|
onPressed: () {
|
||||||
|
prevBatch = snapshot.data!.nextBatch!;
|
||||||
|
setState(() {
|
||||||
|
_cache!.refresh(widget.entry.spacesEntry.id);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
height: 56,
|
||||||
|
width: 4,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: Border(
|
||||||
|
left: BorderSide(
|
||||||
|
color: isSelected
|
||||||
|
? Theme.of(context).colorScheme.secondary
|
||||||
|
: Colors.transparent,
|
||||||
|
width: 4,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -11,18 +11,32 @@ class TwoColumnLayout extends StatelessWidget {
|
||||||
required this.mainView,
|
required this.mainView,
|
||||||
required this.sideView,
|
required this.sideView,
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final listenable = FluffyThemes.getDisplayNavigationRail(context);
|
||||||
return ScaffoldMessenger(
|
return ScaffoldMessenger(
|
||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
body: Row(
|
body: Row(
|
||||||
children: [
|
children: [
|
||||||
Container(
|
// otherwise, we'd have an ugly animation where we don't want any...
|
||||||
clipBehavior: Clip.antiAlias,
|
listenable == null
|
||||||
decoration: const BoxDecoration(),
|
? _FirstColumnChild(child: mainView)
|
||||||
width: 360.0 +
|
: ValueListenableBuilder<bool>(
|
||||||
(FluffyThemes.getDisplayNavigationRail(context) ? 64 : 0),
|
valueListenable: listenable,
|
||||||
child: mainView,
|
child: mainView,
|
||||||
|
builder: (context, open, child) =>
|
||||||
|
LayoutBuilder(builder: (context, constraints) {
|
||||||
|
final width = open &&
|
||||||
|
MediaQuery.of(context).size.width >
|
||||||
|
FluffyThemes.hugeScreenBreakpoint
|
||||||
|
? 256.0
|
||||||
|
: 64.0;
|
||||||
|
return _FirstColumnChild(
|
||||||
|
drawerWidth: width,
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}),
|
||||||
),
|
),
|
||||||
Container(
|
Container(
|
||||||
width: 1.0,
|
width: 1.0,
|
||||||
|
@ -39,3 +53,23 @@ class TwoColumnLayout extends StatelessWidget {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class _FirstColumnChild extends StatelessWidget {
|
||||||
|
final Widget? child;
|
||||||
|
final double drawerWidth;
|
||||||
|
|
||||||
|
const _FirstColumnChild({Key? key, required this.child, this.drawerWidth = 0})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return AnimatedContainer(
|
||||||
|
clipBehavior: Clip.antiAlias,
|
||||||
|
decoration: const BoxDecoration(),
|
||||||
|
width: 360.0 + drawerWidth,
|
||||||
|
duration: const Duration(milliseconds: 250),
|
||||||
|
curve: Curves.easeOut,
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue