chore: Improved UX for creating groups and spaces
This commit is contained in:
krille-chan
parent
f143a60b61
commit
b9cd24eea7
8 changed files with 151 additions and 259 deletions
|
|
@ -4,13 +4,18 @@ import 'package:flutter/material.dart';
|
|||
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:matrix/matrix.dart' as sdk;
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/pages/new_group/new_group_view.dart';
|
||||
import 'package:fluffychat/utils/file_selector.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
|
||||
class NewGroup extends StatefulWidget {
|
||||
const NewGroup({super.key});
|
||||
final CreateGroupType createGroupType;
|
||||
const NewGroup({
|
||||
this.createGroupType = CreateGroupType.group,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
NewGroupController createState() => NewGroupController();
|
||||
|
|
@ -30,6 +35,14 @@ class NewGroupController extends State<NewGroup> {
|
|||
|
||||
bool loading = false;
|
||||
|
||||
CreateGroupType get createGroupType =>
|
||||
_createGroupType ?? widget.createGroupType;
|
||||
|
||||
CreateGroupType? _createGroupType;
|
||||
|
||||
void setCreateGroupType(Set<CreateGroupType> b) =>
|
||||
setState(() => _createGroupType = b.single);
|
||||
|
||||
void setPublicGroup(bool b) => setState(() => publicGroup = b);
|
||||
|
||||
void setGroupCanBeFound(bool b) => setState(() => groupCanBeFound = b);
|
||||
|
|
@ -48,6 +61,52 @@ class NewGroupController extends State<NewGroup> {
|
|||
});
|
||||
}
|
||||
|
||||
Future<void> _createGroup() async {
|
||||
if (!mounted) return;
|
||||
final roomId = await Matrix.of(context).client.createGroupChat(
|
||||
visibility:
|
||||
groupCanBeFound ? sdk.Visibility.public : sdk.Visibility.private,
|
||||
preset: publicGroup
|
||||
? sdk.CreateRoomPreset.publicChat
|
||||
: sdk.CreateRoomPreset.privateChat,
|
||||
groupName: nameController.text.isNotEmpty ? nameController.text : null,
|
||||
initialState: [
|
||||
if (avatar != null)
|
||||
sdk.StateEvent(
|
||||
type: sdk.EventTypes.RoomAvatar,
|
||||
content: {'url': avatarUrl.toString()},
|
||||
),
|
||||
],
|
||||
);
|
||||
if (!mounted) return;
|
||||
context.go('/rooms/$roomId/invite');
|
||||
}
|
||||
|
||||
Future<void> _createSpace() async {
|
||||
if (!mounted) return;
|
||||
final spaceId = await Matrix.of(context).client.createRoom(
|
||||
preset: publicGroup
|
||||
? sdk.CreateRoomPreset.publicChat
|
||||
: sdk.CreateRoomPreset.privateChat,
|
||||
creationContent: {'type': RoomCreationTypes.mSpace},
|
||||
visibility: publicGroup ? sdk.Visibility.public : null,
|
||||
roomAliasName: publicGroup
|
||||
? nameController.text.trim().toLowerCase().replaceAll(' ', '_')
|
||||
: null,
|
||||
name: nameController.text.trim(),
|
||||
powerLevelContentOverride: {'events_default': 100},
|
||||
initialState: [
|
||||
if (avatar != null)
|
||||
sdk.StateEvent(
|
||||
type: sdk.EventTypes.RoomAvatar,
|
||||
content: {'url': avatarUrl.toString()},
|
||||
),
|
||||
],
|
||||
);
|
||||
if (!mounted) return;
|
||||
context.pop<String>(spaceId);
|
||||
}
|
||||
|
||||
void submitAction([_]) async {
|
||||
final client = Matrix.of(context).client;
|
||||
|
||||
|
|
@ -62,23 +121,12 @@ class NewGroupController extends State<NewGroup> {
|
|||
|
||||
if (!mounted) return;
|
||||
|
||||
final roomId = await client.createGroupChat(
|
||||
visibility:
|
||||
groupCanBeFound ? sdk.Visibility.public : sdk.Visibility.private,
|
||||
preset: publicGroup
|
||||
? sdk.CreateRoomPreset.publicChat
|
||||
: sdk.CreateRoomPreset.privateChat,
|
||||
groupName: nameController.text.isNotEmpty ? nameController.text : null,
|
||||
initialState: [
|
||||
if (avatar != null)
|
||||
sdk.StateEvent(
|
||||
type: sdk.EventTypes.RoomAvatar,
|
||||
content: {'url': avatarUrl.toString()},
|
||||
),
|
||||
],
|
||||
);
|
||||
if (!mounted) return;
|
||||
context.go('/rooms/$roomId/invite');
|
||||
switch (createGroupType) {
|
||||
case CreateGroupType.group:
|
||||
await _createGroup();
|
||||
case CreateGroupType.space:
|
||||
await _createSpace();
|
||||
}
|
||||
} catch (e, s) {
|
||||
sdk.Logs().d('Unable to create group', e, s);
|
||||
setState(() {
|
||||
|
|
@ -91,3 +139,5 @@ class NewGroupController extends State<NewGroup> {
|
|||
@override
|
||||
Widget build(BuildContext context) => NewGroupView(this);
|
||||
}
|
||||
|
||||
enum CreateGroupType { group, space }
|
||||
|
|
|
|||
|
|
@ -26,12 +26,33 @@ class NewGroupView extends StatelessWidget {
|
|||
onPressed: controller.loading ? null : Navigator.of(context).pop,
|
||||
),
|
||||
),
|
||||
title: Text(L10n.of(context).createGroup),
|
||||
title: Text(
|
||||
controller.createGroupType == CreateGroupType.space
|
||||
? L10n.of(context).newSpace
|
||||
: L10n.of(context).createGroup,
|
||||
),
|
||||
),
|
||||
body: MaxWidthBody(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: SegmentedButton<CreateGroupType>(
|
||||
selected: {controller.createGroupType},
|
||||
onSelectionChanged: controller.setCreateGroupType,
|
||||
segments: [
|
||||
ButtonSegment(
|
||||
value: CreateGroupType.group,
|
||||
label: Text(L10n.of(context).group),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: CreateGroupType.space,
|
||||
label: Text(L10n.of(context).space),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
InkWell(
|
||||
borderRadius: BorderRadius.circular(90),
|
||||
|
|
@ -44,8 +65,8 @@ class NewGroupView extends StatelessWidget {
|
|||
borderRadius: BorderRadius.circular(90),
|
||||
child: Image.memory(
|
||||
avatar,
|
||||
width: Avatar.defaultSize,
|
||||
height: Avatar.defaultSize,
|
||||
width: Avatar.defaultSize * 2,
|
||||
height: Avatar.defaultSize * 2,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
|
|
@ -53,7 +74,7 @@ class NewGroupView extends StatelessWidget {
|
|||
),
|
||||
const SizedBox(height: 32),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24.0),
|
||||
child: TextField(
|
||||
autofocus: true,
|
||||
controller: controller.nameController,
|
||||
|
|
@ -61,7 +82,9 @@ class NewGroupView extends StatelessWidget {
|
|||
readOnly: controller.loading,
|
||||
decoration: InputDecoration(
|
||||
prefixIcon: const Icon(Icons.people_outlined),
|
||||
labelText: L10n.of(context).groupName,
|
||||
labelText: controller.createGroupType == CreateGroupType.space
|
||||
? L10n.of(context).spaceName
|
||||
: L10n.of(context).groupName,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
@ -69,12 +92,17 @@ class NewGroupView extends StatelessWidget {
|
|||
SwitchListTile.adaptive(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 32),
|
||||
secondary: const Icon(Icons.public_outlined),
|
||||
title: Text(L10n.of(context).groupIsPublic),
|
||||
title: Text(
|
||||
controller.createGroupType == CreateGroupType.space
|
||||
? L10n.of(context).spaceIsPublic
|
||||
: L10n.of(context).groupIsPublic,
|
||||
),
|
||||
value: controller.publicGroup,
|
||||
onChanged: controller.loading ? null : controller.setPublicGroup,
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
child: controller.publicGroup
|
||||
? SwitchListTile.adaptive(
|
||||
contentPadding:
|
||||
|
|
@ -88,20 +116,42 @@ class NewGroupView extends StatelessWidget {
|
|||
)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
SwitchListTile.adaptive(
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 32),
|
||||
secondary: Icon(
|
||||
Icons.lock_outlined,
|
||||
color: theme.colorScheme.onSurface,
|
||||
),
|
||||
title: Text(
|
||||
L10n.of(context).enableEncryption,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
value: !controller.publicGroup,
|
||||
onChanged: null,
|
||||
AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
child: controller.createGroupType == CreateGroupType.space
|
||||
? const SizedBox.shrink()
|
||||
: SwitchListTile.adaptive(
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 32),
|
||||
secondary: Icon(
|
||||
Icons.lock_outlined,
|
||||
color: theme.colorScheme.onSurface,
|
||||
),
|
||||
title: Text(
|
||||
L10n.of(context).enableEncryption,
|
||||
style: TextStyle(
|
||||
color: theme.colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
value: !controller.publicGroup,
|
||||
onChanged: null,
|
||||
),
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
child: controller.createGroupType == CreateGroupType.space
|
||||
? ListTile(
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 32),
|
||||
trailing: const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Icon(Icons.info_outlined),
|
||||
),
|
||||
subtitle: Text(L10n.of(context).newSpaceDescription),
|
||||
)
|
||||
: const SizedBox.shrink(),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
|
|
@ -112,12 +162,17 @@ class NewGroupView extends StatelessWidget {
|
|||
controller.loading ? null : controller.submitAction,
|
||||
child: controller.loading
|
||||
? const LinearProgressIndicator()
|
||||
: Text(L10n.of(context).createGroupAndInviteUsers),
|
||||
: Text(
|
||||
controller.createGroupType == CreateGroupType.space
|
||||
? L10n.of(context).createNewSpace
|
||||
: L10n.of(context).createGroupAndInviteUsers,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
AnimatedSize(
|
||||
duration: FluffyThemes.animationDuration,
|
||||
curve: FluffyThemes.animationCurve,
|
||||
child: error == null
|
||||
? const SizedBox.shrink()
|
||||
: ListTile(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue