feat: implement space hierarchy
- implement spaces hierarchy - create expandable navigation drawer tiles - display suggested rooms below joined rooms when in space - everything works nested - fix shared preferenced conflic with debug builds on Linux - add [`package:async`](https://pub.dev/packages/async) Signed-off-by: TheOneWithTheBraid <the-one@with-the-braid.cf>braid/spaces-hierarchy-fixes
TheOneWithTheBraid
3 years ago
committed by
Christian Pauly
parent
171c2d7b99
commit
855c735aef
@ -0,0 +1,113 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/pages/chat_list/spaces_hierarchy_proposal.dart';
|
||||||
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
|
import 'package:fluffychat/widgets/public_room_bottom_sheet.dart';
|
||||||
|
|
||||||
|
class RecommendedRoomListItem extends StatelessWidget {
|
||||||
|
final SpaceRoomsChunk room;
|
||||||
|
|
||||||
|
const RecommendedRoomListItem({Key? key, required this.room})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final leading = Avatar(
|
||||||
|
mxContent: room.avatarUrl,
|
||||||
|
name: room.name,
|
||||||
|
);
|
||||||
|
final title = Row(
|
||||||
|
children: <Widget>[
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
room.name ?? '',
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
softWrap: false,
|
||||||
|
style: TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: Theme.of(context).textTheme.bodyText1!.color,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// number of joined users
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(left: 4.0),
|
||||||
|
child: Text.rich(
|
||||||
|
TextSpan(children: [
|
||||||
|
WidgetSpan(
|
||||||
|
child: Tooltip(
|
||||||
|
child: const Icon(
|
||||||
|
Icons.people_outlined,
|
||||||
|
size: 20,
|
||||||
|
),
|
||||||
|
message: L10n.of(context)!
|
||||||
|
.numberRoomMembers(room.numJoinedMembers),
|
||||||
|
),
|
||||||
|
alignment: PlaceholderAlignment.middle,
|
||||||
|
baseline: TextBaseline.alphabetic),
|
||||||
|
TextSpan(text: ' ${room.numJoinedMembers}')
|
||||||
|
]),
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 13,
|
||||||
|
color: Theme.of(context).textTheme.bodyText2!.color,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
final subtitle = Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
room.topic ?? 'topic',
|
||||||
|
softWrap: false,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).textTheme.bodyText2!.color,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
void handler() => showModalBottomSheet(
|
||||||
|
context: context,
|
||||||
|
builder: (c) => PublicRoomBottomSheet(
|
||||||
|
roomAlias: room.canonicalAlias!,
|
||||||
|
outerContext: context,
|
||||||
|
chunk: room,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
if (room.roomType == 'm.space') {
|
||||||
|
return Material(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: ExpansionTile(
|
||||||
|
leading: leading,
|
||||||
|
title: title,
|
||||||
|
subtitle: subtitle,
|
||||||
|
onExpansionChanged: (open) {
|
||||||
|
if (!open) handler();
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
SpacesHierarchyProposals(space: room.roomId),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return Material(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: ListTile(
|
||||||
|
leading: leading,
|
||||||
|
title: title,
|
||||||
|
subtitle: subtitle,
|
||||||
|
onTap: handler,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class SearchTitle extends StatelessWidget {
|
||||||
|
final String title;
|
||||||
|
final Widget icon;
|
||||||
|
final Widget? trailing;
|
||||||
|
final void Function()? onTap;
|
||||||
|
|
||||||
|
const SearchTitle({
|
||||||
|
required this.title,
|
||||||
|
required this.icon,
|
||||||
|
this.trailing,
|
||||||
|
this.onTap,
|
||||||
|
Key? key,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => Material(
|
||||||
|
shape: Border(
|
||||||
|
top: BorderSide(
|
||||||
|
color: Theme.of(context).dividerColor,
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
|
bottom: BorderSide(
|
||||||
|
color: Theme.of(context).dividerColor,
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
color: Theme.of(context).colorScheme.surface,
|
||||||
|
child: InkWell(
|
||||||
|
onTap: onTap,
|
||||||
|
splashColor: Theme.of(context).colorScheme.surface,
|
||||||
|
child: Align(
|
||||||
|
alignment: Alignment.centerLeft,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(
|
||||||
|
horizontal: 16,
|
||||||
|
vertical: 8,
|
||||||
|
),
|
||||||
|
child: IconTheme(
|
||||||
|
data: Theme.of(context).iconTheme.copyWith(size: 16),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
icon,
|
||||||
|
const SizedBox(width: 16),
|
||||||
|
Text(title,
|
||||||
|
textAlign: TextAlign.left,
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).colorScheme.onSurface,
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
)),
|
||||||
|
if (trailing != null)
|
||||||
|
Expanded(
|
||||||
|
child: Align(
|
||||||
|
alignment: Alignment.centerRight,
|
||||||
|
child: trailing!,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/pages/chat_list/chat_list.dart';
|
||||||
|
import 'package:fluffychat/pages/chat_list/spaces_drawer.dart';
|
||||||
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
|
|
||||||
|
class SpacesDrawerEntry extends StatelessWidget {
|
||||||
|
final SpacesEntryMaybeChildren entry;
|
||||||
|
final ChatListController controller;
|
||||||
|
|
||||||
|
const SpacesDrawerEntry(
|
||||||
|
{Key? key, required this.entry, required this.controller})
|
||||||
|
: super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final space = entry.spacesEntry;
|
||||||
|
final room = space.getSpace(context);
|
||||||
|
|
||||||
|
final active = controller.activeSpacesEntry == entry.spacesEntry;
|
||||||
|
final leading = room == null
|
||||||
|
? CircleAvatar(
|
||||||
|
child: space.getIcon(active),
|
||||||
|
radius: Avatar.defaultSize / 2,
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.secondary,
|
||||||
|
foregroundColor: Theme.of(context).colorScheme.onSecondary,
|
||||||
|
)
|
||||||
|
: Avatar(
|
||||||
|
mxContent: room.avatar,
|
||||||
|
name: space.getName(context),
|
||||||
|
);
|
||||||
|
final title = Text(
|
||||||
|
space.getName(context),
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
);
|
||||||
|
final subtitle = room?.topic.isEmpty ?? true
|
||||||
|
? null
|
||||||
|
: Tooltip(
|
||||||
|
message: room!.topic,
|
||||||
|
child: Text(
|
||||||
|
room.topic.replaceAll('\n', ' '),
|
||||||
|
softWrap: false,
|
||||||
|
overflow: TextOverflow.fade,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
void onTap() => controller.setActiveSpacesEntry(
|
||||||
|
context,
|
||||||
|
space,
|
||||||
|
);
|
||||||
|
final trailing = room != null
|
||||||
|
? SizedBox(
|
||||||
|
width: 32,
|
||||||
|
child: IconButton(
|
||||||
|
splashRadius: 24,
|
||||||
|
icon: const Icon(Icons.edit_outlined),
|
||||||
|
tooltip: L10n.of(context)!.edit,
|
||||||
|
onPressed: () => controller.editSpace(context, room.id),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: const Icon(Icons.arrow_forward_ios_outlined);
|
||||||
|
|
||||||
|
if (entry.children.isEmpty) {
|
||||||
|
return ListTile(
|
||||||
|
selected: active,
|
||||||
|
leading: leading,
|
||||||
|
title: title,
|
||||||
|
subtitle: subtitle,
|
||||||
|
onTap: onTap,
|
||||||
|
trailing: trailing,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return ExpansionTile(
|
||||||
|
leading: leading,
|
||||||
|
initiallyExpanded:
|
||||||
|
entry.children.any((element) => entry.isActiveOfChild(controller)),
|
||||||
|
title: GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
mainAxisSize: MainAxisSize.max,
|
||||||
|
children: [
|
||||||
|
Expanded(child: title),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
trailing
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
children: entry.children
|
||||||
|
.map((e) => SpacesDrawerEntry(entry: e, controller: controller))
|
||||||
|
.toList(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import 'package:animations/animations.dart';
|
||||||
|
import 'package:async/async.dart';
|
||||||
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
import 'package:matrix/matrix.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/pages/chat_list/search_title.dart';
|
||||||
|
import 'package:fluffychat/widgets/matrix.dart';
|
||||||
|
import 'recommended_room_list_item.dart';
|
||||||
|
|
||||||
|
class SpacesHierarchyProposals extends StatefulWidget {
|
||||||
|
static final Map<String, AsyncCache<GetSpaceHierarchyResponse?>> _cache = {};
|
||||||
|
|
||||||
|
final String? space;
|
||||||
|
final String? query;
|
||||||
|
|
||||||
|
const SpacesHierarchyProposals({
|
||||||
|
Key? key,
|
||||||
|
required this.space,
|
||||||
|
this.query,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<SpacesHierarchyProposals> createState() =>
|
||||||
|
_SpacesHierarchyProposalsState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SpacesHierarchyProposalsState extends State<SpacesHierarchyProposals> {
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(covariant SpacesHierarchyProposals oldWidget) {
|
||||||
|
if (oldWidget.space != widget.space || oldWidget.query != widget.query) {
|
||||||
|
setState(() {});
|
||||||
|
}
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
// check for recommended rooms in case the active space is a [SpaceSpacesEntry]
|
||||||
|
if (widget.space != null) {
|
||||||
|
final client = Matrix.of(context).client;
|
||||||
|
|
||||||
|
final cache = SpacesHierarchyProposals._cache[widget.space!] ??=
|
||||||
|
AsyncCache<GetSpaceHierarchyResponse?>(const Duration(minutes: 15));
|
||||||
|
|
||||||
|
/// additionally saving the future's state in the completer in order to
|
||||||
|
/// display the loading indicator when refreshing as a [FutureBuilder] is
|
||||||
|
/// a [StatefulWidget].
|
||||||
|
final completer = Completer();
|
||||||
|
final future = cache.fetch(() => client.getSpaceHierarchy(
|
||||||
|
widget.space!,
|
||||||
|
suggestedOnly: true,
|
||||||
|
maxDepth: 1,
|
||||||
|
));
|
||||||
|
future.then(completer.complete);
|
||||||
|
|
||||||
|
return FutureBuilder<GetSpaceHierarchyResponse?>(
|
||||||
|
future: future,
|
||||||
|
builder: (context, snapshot) {
|
||||||
|
Widget child;
|
||||||
|
if (snapshot.hasData) {
|
||||||
|
final rooms = snapshot.data!.rooms.where(
|
||||||
|
(element) =>
|
||||||
|
element.roomId != widget.space &&
|
||||||
|
// filtering in case a query is given
|
||||||
|
(widget.query != null
|
||||||
|
? (element.name?.contains(widget.query!) ?? false) ||
|
||||||
|
(element.topic?.contains(widget.query!) ?? false)
|
||||||
|
// in case not, just leave it...
|
||||||
|
: true) &&
|
||||||
|
client.rooms
|
||||||
|
.any((knownRoom) => element.roomId != knownRoom.id),
|
||||||
|
);
|
||||||
|
if (rooms.isEmpty) child = const ListTile(key: ValueKey(false));
|
||||||
|
child = Column(
|
||||||
|
key: ValueKey(widget.space),
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
SearchTitle(
|
||||||
|
title: L10n.of(context)!.suggestedRooms,
|
||||||
|
icon: const Icon(Icons.auto_awesome_outlined),
|
||||||
|
trailing: completer.isCompleted
|
||||||
|
? const Icon(
|
||||||
|
Icons.refresh_outlined,
|
||||||
|
size: 16,
|
||||||
|
)
|
||||||
|
: const SizedBox(
|
||||||
|
width: 16,
|
||||||
|
height: 16,
|
||||||
|
child: CircularProgressIndicator.adaptive(
|
||||||
|
strokeWidth: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onTap: () => setState(
|
||||||
|
() => SpacesHierarchyProposals._cache[widget.space!]!
|
||||||
|
.invalidate(),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
...rooms.map(
|
||||||
|
(e) => RecommendedRoomListItem(
|
||||||
|
room: e,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
child = Column(
|
||||||
|
key: const ValueKey(null),
|
||||||
|
children: const [
|
||||||
|
LinearProgressIndicator(),
|
||||||
|
ListTile(),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return PageTransitionSwitcher(
|
||||||
|
// prevent the animation from re-building on dependency change
|
||||||
|
key: ValueKey(widget.space),
|
||||||
|
transitionBuilder: (
|
||||||
|
Widget child,
|
||||||
|
Animation<double> primaryAnimation,
|
||||||
|
Animation<double> secondaryAnimation,
|
||||||
|
) {
|
||||||
|
return SharedAxisTransition(
|
||||||
|
animation: primaryAnimation,
|
||||||
|
secondaryAnimation: secondaryAnimation,
|
||||||
|
transitionType: SharedAxisTransitionType.scaled,
|
||||||
|
child: child,
|
||||||
|
fillColor: Colors.transparent,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
layoutBuilder: (children) => Stack(
|
||||||
|
alignment: Alignment.topCenter,
|
||||||
|
children: children,
|
||||||
|
),
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return Container();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue