design: Big redesign of three column mode to advanced two column mode
krille-chan
2 years ago
parent
f442bb89f9
commit
9e13bd8dfd
@ -0,0 +1,76 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import '../../widgets/matrix.dart';
|
||||
import 'chat_members_view.dart';
|
||||
|
||||
class ChatMembersPage extends StatefulWidget {
|
||||
final String roomId;
|
||||
const ChatMembersPage({required this.roomId, super.key});
|
||||
|
||||
@override
|
||||
State<ChatMembersPage> createState() => ChatMembersController();
|
||||
}
|
||||
|
||||
class ChatMembersController extends State<ChatMembersPage> {
|
||||
List<User>? members;
|
||||
List<User>? filteredMembers;
|
||||
Object? error;
|
||||
|
||||
final TextEditingController filterController = TextEditingController();
|
||||
|
||||
void setFilter([_]) async {
|
||||
final filter = filterController.text.toLowerCase().trim();
|
||||
|
||||
if (filter.isEmpty) {
|
||||
setState(() {
|
||||
filteredMembers = members
|
||||
?..sort((b, a) => a.powerLevel.compareTo(b.powerLevel));
|
||||
});
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
filteredMembers = members
|
||||
?.where(
|
||||
(user) =>
|
||||
user.displayName?.toLowerCase().contains(filter) ??
|
||||
user.id.toLowerCase().contains(filter),
|
||||
)
|
||||
.toList()
|
||||
?..sort((b, a) => a.powerLevel.compareTo(b.powerLevel));
|
||||
});
|
||||
}
|
||||
|
||||
void refreshMembers() async {
|
||||
try {
|
||||
setState(() {
|
||||
error = null;
|
||||
});
|
||||
final participants = await Matrix.of(context)
|
||||
.client
|
||||
.getRoomById(widget.roomId)
|
||||
?.requestParticipants();
|
||||
|
||||
setState(() {
|
||||
members = participants;
|
||||
});
|
||||
setFilter();
|
||||
} catch (e, s) {
|
||||
Logs()
|
||||
.d('Unable to request participants. Try again in 3 seconds...', e, s);
|
||||
setState(() {
|
||||
error = e;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
refreshMembers();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => ChatMembersView(this);
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||
import '../../widgets/layouts/max_width_body.dart';
|
||||
import '../../widgets/matrix.dart';
|
||||
import '../chat_details/participant_list_item.dart';
|
||||
import 'chat_members.dart';
|
||||
|
||||
class ChatMembersView extends StatelessWidget {
|
||||
final ChatMembersController controller;
|
||||
const ChatMembersView(this.controller, {super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final room =
|
||||
Matrix.of(context).client.getRoomById(controller.widget.roomId);
|
||||
if (room == null) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(L10n.of(context)!.oopsSomethingWentWrong),
|
||||
),
|
||||
body: Center(
|
||||
child: Text(L10n.of(context)!.youAreNoLongerParticipatingInThisChat),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final members = controller.filteredMembers;
|
||||
|
||||
final roomCount = (room.summary.mJoinedMemberCount ?? 0) +
|
||||
(room.summary.mInvitedMemberCount ?? 0);
|
||||
|
||||
final error = controller.error;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
leading: const Center(child: BackButton()),
|
||||
title: Text(
|
||||
L10n.of(context)!.countParticipants(roomCount),
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () => context.go('/rooms/{room.id}/invite'),
|
||||
icon: const Icon(
|
||||
Icons.person_add_outlined,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: MaxWidthBody(
|
||||
withScrolling: false,
|
||||
child: error != null
|
||||
? Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(Icons.error_outline),
|
||||
Text(error.toLocalizedString(context)),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton.icon(
|
||||
onPressed: controller.refreshMembers,
|
||||
icon: const Icon(Icons.refresh_outlined),
|
||||
label: Text(L10n.of(context)!.tryAgain),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
: members == null
|
||||
? const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(16.0),
|
||||
child: CircularProgressIndicator.adaptive(),
|
||||
),
|
||||
)
|
||||
: ListView.builder(
|
||||
shrinkWrap: true,
|
||||
itemCount: members.length + 1,
|
||||
itemBuilder: (context, i) => i == 0
|
||||
? Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: TextField(
|
||||
controller: controller.filterController,
|
||||
onChanged: controller.setFilter,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.search_outlined),
|
||||
hintText: L10n.of(context)!.search,
|
||||
),
|
||||
),
|
||||
)
|
||||
: ParticipantListItem(members[i - 1]),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
|
||||
class SideViewLayout extends StatelessWidget {
|
||||
final Widget mainView;
|
||||
final Widget sideView;
|
||||
final bool hideSideView;
|
||||
|
||||
const SideViewLayout({
|
||||
Key? key,
|
||||
required this.mainView,
|
||||
required this.sideView,
|
||||
required this.hideSideView,
|
||||
}) : super(key: key);
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final sideView = this.sideView;
|
||||
const sideViewWidth = 360.0;
|
||||
final threeColumnMode = FluffyThemes.isThreeColumnMode(context);
|
||||
return Stack(
|
||||
children: [
|
||||
AnimatedPositioned(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: !threeColumnMode || hideSideView ? 0 : sideViewWidth,
|
||||
child: ClipRRect(child: mainView),
|
||||
),
|
||||
AnimatedPositioned(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
left: !threeColumnMode && !hideSideView ? 0 : null,
|
||||
width: hideSideView
|
||||
? 0
|
||||
: !threeColumnMode
|
||||
? null
|
||||
: sideViewWidth,
|
||||
child: hideSideView
|
||||
? const SizedBox.shrink()
|
||||
: Container(
|
||||
clipBehavior: Clip.hardEdge,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: Theme.of(context).dividerColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: sideView,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue