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