mirror of
https://github.com/krille-chan/fluffychat
synced 2024-09-10 13:05:11 +00:00
feat: New UX design for create group chat
This commit is contained in:
parent
f58b9b814a
commit
7223581b97
4 changed files with 216 additions and 46 deletions
|
@ -76,7 +76,7 @@
|
||||||
"mxid": {}
|
"mxid": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"addChatDescription": "Add a chat description",
|
"addChatDescription": "Add a chat description...",
|
||||||
"addToSpace": "Add to space",
|
"addToSpace": "Add to space",
|
||||||
"@addToSpace": {},
|
"@addToSpace": {},
|
||||||
"admin": "Admin",
|
"admin": "Admin",
|
||||||
|
@ -2559,5 +2559,8 @@
|
||||||
"query": {}
|
"query": {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"searchChatsRooms": "Search for #chats, @users..."
|
"searchChatsRooms": "Search for #chats, @users...",
|
||||||
|
"groupName": "Group name",
|
||||||
|
"createGroupAndInviteUsers": "Create a group and invite users",
|
||||||
|
"groupCanBeFoundViaSearch": "Group can be found via search"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
|
import 'dart:typed_data';
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:future_loading_dialog/future_loading_dialog.dart';
|
import 'package:file_picker/file_picker.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
import 'package:matrix/matrix.dart' as sdk;
|
import 'package:matrix/matrix.dart' as sdk;
|
||||||
|
|
||||||
|
@ -15,29 +17,86 @@ class NewGroup extends StatefulWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
class NewGroupController extends State<NewGroup> {
|
class NewGroupController extends State<NewGroup> {
|
||||||
TextEditingController controller = TextEditingController();
|
TextEditingController nameController = TextEditingController();
|
||||||
|
|
||||||
|
TextEditingController topicController = TextEditingController();
|
||||||
|
|
||||||
bool publicGroup = false;
|
bool publicGroup = false;
|
||||||
|
bool groupCanBeFound = true;
|
||||||
|
|
||||||
|
Uint8List? avatar;
|
||||||
|
|
||||||
|
Uri? avatarUrl;
|
||||||
|
|
||||||
|
Object? error;
|
||||||
|
|
||||||
|
bool loading = false;
|
||||||
|
|
||||||
void setPublicGroup(bool b) => setState(() => publicGroup = b);
|
void setPublicGroup(bool b) => setState(() => publicGroup = b);
|
||||||
|
|
||||||
|
void setGroupCanBeFound(bool b) => setState(() => groupCanBeFound = b);
|
||||||
|
|
||||||
|
void selectPhoto() async {
|
||||||
|
final photo = await FilePicker.platform.pickFiles(
|
||||||
|
type: FileType.image,
|
||||||
|
allowMultiple: false,
|
||||||
|
withData: true,
|
||||||
|
);
|
||||||
|
|
||||||
|
setState(() {
|
||||||
|
avatarUrl = null;
|
||||||
|
avatar = photo?.files.singleOrNull?.bytes;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
void submitAction([_]) async {
|
void submitAction([_]) async {
|
||||||
final client = Matrix.of(context).client;
|
final client = Matrix.of(context).client;
|
||||||
final roomID = await showFutureLoadingDialog(
|
|
||||||
context: context,
|
try {
|
||||||
future: () async {
|
setState(() {
|
||||||
final roomId = await client.createGroupChat(
|
loading = true;
|
||||||
visibility:
|
error = null;
|
||||||
publicGroup ? sdk.Visibility.public : sdk.Visibility.private,
|
});
|
||||||
preset: publicGroup
|
|
||||||
? sdk.CreateRoomPreset.publicChat
|
final avatar = this.avatar;
|
||||||
: sdk.CreateRoomPreset.privateChat,
|
avatarUrl ??= avatar == null ? null : await client.uploadContent(avatar);
|
||||||
groupName: controller.text.isNotEmpty ? controller.text : null,
|
|
||||||
|
if (!mounted) return;
|
||||||
|
|
||||||
|
final roomId = await client.createGroupChat(
|
||||||
|
visibility:
|
||||||
|
publicGroup ? sdk.Visibility.public : sdk.Visibility.private,
|
||||||
|
preset: publicGroup
|
||||||
|
? sdk.CreateRoomPreset.publicChat
|
||||||
|
: sdk.CreateRoomPreset.privateChat,
|
||||||
|
groupName: nameController.text.isNotEmpty ? nameController.text : null,
|
||||||
|
initialState: [
|
||||||
|
if (topicController.text.isNotEmpty)
|
||||||
|
sdk.StateEvent(
|
||||||
|
type: sdk.EventTypes.RoomTopic,
|
||||||
|
content: {'topic': topicController.text},
|
||||||
|
),
|
||||||
|
if (avatar != null)
|
||||||
|
sdk.StateEvent(
|
||||||
|
type: sdk.EventTypes.RoomAvatar,
|
||||||
|
content: {'url': avatarUrl.toString()},
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
if (!mounted) return;
|
||||||
|
if (publicGroup && groupCanBeFound) {
|
||||||
|
await client.setRoomVisibilityOnDirectory(
|
||||||
|
roomId,
|
||||||
|
visibility: sdk.Visibility.public,
|
||||||
);
|
);
|
||||||
return roomId;
|
}
|
||||||
},
|
context.go('/rooms/$roomId/invite');
|
||||||
);
|
} catch (e, s) {
|
||||||
if (roomID.error == null) {
|
sdk.Logs().d('Unable to create group', e, s);
|
||||||
context.go('/rooms/${roomID.result!}/invite');
|
setState(() {
|
||||||
|
error = e;
|
||||||
|
loading = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,10 @@ import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||||
|
|
||||||
|
import 'package:fluffychat/config/themes.dart';
|
||||||
import 'package:fluffychat/pages/new_group/new_group.dart';
|
import 'package:fluffychat/pages/new_group/new_group.dart';
|
||||||
|
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||||
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
||||||
|
|
||||||
class NewGroupView extends StatelessWidget {
|
class NewGroupView extends StatelessWidget {
|
||||||
|
@ -12,48 +15,150 @@ class NewGroupView extends StatelessWidget {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
final avatar = controller.avatar;
|
||||||
|
final error = controller.error;
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
|
leading: Center(
|
||||||
|
child: BackButton(
|
||||||
|
onPressed: controller.loading ? null : Navigator.of(context).pop,
|
||||||
|
),
|
||||||
|
),
|
||||||
title: Text(L10n.of(context)!.createGroup),
|
title: Text(L10n.of(context)!.createGroup),
|
||||||
),
|
),
|
||||||
body: MaxWidthBody(
|
body: MaxWidthBody(
|
||||||
child: Column(
|
child: Column(
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
|
const SizedBox(height: 16),
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.all(12.0),
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
InkWell(
|
||||||
|
borderRadius: BorderRadius.circular(90),
|
||||||
|
onTap: controller.loading ? null : controller.selectPhoto,
|
||||||
|
child: CircleAvatar(
|
||||||
|
radius: Avatar.defaultSize / 2,
|
||||||
|
child: avatar == null
|
||||||
|
? const Icon(Icons.camera_alt_outlined)
|
||||||
|
: Image.memory(
|
||||||
|
avatar,
|
||||||
|
width: Avatar.defaultSize,
|
||||||
|
height: Avatar.defaultSize,
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 16),
|
||||||
|
Expanded(
|
||||||
|
child: TextField(
|
||||||
|
controller: controller.nameController,
|
||||||
|
autocorrect: false,
|
||||||
|
readOnly: controller.loading,
|
||||||
|
decoration: InputDecoration(
|
||||||
|
prefixIcon: const Icon(Icons.people_outlined),
|
||||||
|
hintText: L10n.of(context)!.groupName,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||||
child: TextField(
|
child: TextField(
|
||||||
controller: controller.controller,
|
controller: controller.topicController,
|
||||||
autofocus: true,
|
minLines: 4,
|
||||||
autocorrect: false,
|
maxLines: 4,
|
||||||
textInputAction: TextInputAction.go,
|
maxLength: 255,
|
||||||
onSubmitted: controller.submitAction,
|
readOnly: controller.loading,
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
labelText: L10n.of(context)!.optionalGroupName,
|
hintText: L10n.of(context)!.addChatDescription,
|
||||||
prefixIcon: const Icon(Icons.people_outlined),
|
|
||||||
hintText: L10n.of(context)!.enterAGroupName,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
SwitchListTile.adaptive(
|
SwitchListTile.adaptive(
|
||||||
secondary: const Icon(Icons.public_outlined),
|
secondary: const Icon(Icons.public_outlined),
|
||||||
title: Text(L10n.of(context)!.groupIsPublic),
|
title: Text(L10n.of(context)!.groupIsPublic),
|
||||||
value: controller.publicGroup,
|
value: controller.publicGroup,
|
||||||
onChanged: controller.setPublicGroup,
|
onChanged: controller.loading ? null : controller.setPublicGroup,
|
||||||
|
),
|
||||||
|
AnimatedSize(
|
||||||
|
duration: FluffyThemes.animationDuration,
|
||||||
|
child: controller.publicGroup
|
||||||
|
? SwitchListTile.adaptive(
|
||||||
|
secondary: const Icon(Icons.search_outlined),
|
||||||
|
title: Text(L10n.of(context)!.groupCanBeFoundViaSearch),
|
||||||
|
value: controller.groupCanBeFound,
|
||||||
|
onChanged: controller.loading
|
||||||
|
? null
|
||||||
|
: controller.setGroupCanBeFound,
|
||||||
|
)
|
||||||
|
: const SizedBox.shrink(),
|
||||||
),
|
),
|
||||||
SwitchListTile.adaptive(
|
SwitchListTile.adaptive(
|
||||||
secondary: const Icon(Icons.lock_outlined),
|
secondary: Icon(
|
||||||
title: Text(L10n.of(context)!.enableEncryption),
|
Icons.lock_outlined,
|
||||||
|
color: Theme.of(context).colorScheme.onBackground,
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
L10n.of(context)!.enableEncryption,
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).colorScheme.onBackground,
|
||||||
|
),
|
||||||
|
),
|
||||||
value: !controller.publicGroup,
|
value: !controller.publicGroup,
|
||||||
onChanged: null,
|
onChanged: null,
|
||||||
),
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.all(16.0),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: ElevatedButton(
|
||||||
|
style: ElevatedButton.styleFrom(
|
||||||
|
foregroundColor: Theme.of(context).colorScheme.onPrimary,
|
||||||
|
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||||
|
),
|
||||||
|
onPressed:
|
||||||
|
controller.loading ? null : controller.submitAction,
|
||||||
|
child: controller.loading
|
||||||
|
? const LinearProgressIndicator()
|
||||||
|
: Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
L10n.of(context)!.createGroupAndInviteUsers,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Icon(Icons.adaptive.arrow_forward_outlined),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
AnimatedSize(
|
||||||
|
duration: FluffyThemes.animationDuration,
|
||||||
|
child: error == null
|
||||||
|
? const SizedBox.shrink()
|
||||||
|
: ListTile(
|
||||||
|
leading: Icon(
|
||||||
|
Icons.warning_outlined,
|
||||||
|
color: Theme.of(context).colorScheme.error,
|
||||||
|
),
|
||||||
|
title: Text(
|
||||||
|
error.toLocalizedString(context),
|
||||||
|
style: TextStyle(
|
||||||
|
color: Theme.of(context).colorScheme.error,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
floatingActionButton: FloatingActionButton(
|
|
||||||
onPressed: controller.submitAction,
|
|
||||||
child: const Icon(Icons.arrow_forward_outlined),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,6 +11,7 @@ import 'package:fluffychat/config/app_config.dart';
|
||||||
import 'package:fluffychat/config/themes.dart';
|
import 'package:fluffychat/config/themes.dart';
|
||||||
import 'package:fluffychat/pages/new_private_chat/new_private_chat.dart';
|
import 'package:fluffychat/pages/new_private_chat/new_private_chat.dart';
|
||||||
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||||
|
import 'package:fluffychat/utils/platform_infos.dart';
|
||||||
import 'package:fluffychat/utils/url_launcher.dart';
|
import 'package:fluffychat/utils/url_launcher.dart';
|
||||||
import 'package:fluffychat/widgets/avatar.dart';
|
import 'package:fluffychat/widgets/avatar.dart';
|
||||||
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
import 'package:fluffychat/widgets/layouts/max_width_body.dart';
|
||||||
|
@ -28,6 +29,7 @@ class NewPrivateChatView extends StatelessWidget {
|
||||||
min(MediaQuery.of(context).size.width - 16, 256).toDouble();
|
min(MediaQuery.of(context).size.width - 16, 256).toDouble();
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
appBar: AppBar(
|
||||||
|
scrolledUnderElevation: Theme.of(context).appBarTheme.elevation,
|
||||||
leading: const Center(child: BackButton()),
|
leading: const Center(child: BackButton()),
|
||||||
title: Text(L10n.of(context)!.newChat),
|
title: Text(L10n.of(context)!.newChat),
|
||||||
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
||||||
|
@ -121,18 +123,18 @@ class NewPrivateChatView extends StatelessWidget {
|
||||||
onPressed: controller.copyUserId,
|
onPressed: controller.copyUserId,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
//if (PlatformInfos.isMobile)
|
if (PlatformInfos.isMobile)
|
||||||
ListTile(
|
ListTile(
|
||||||
leading: CircleAvatar(
|
leading: CircleAvatar(
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
Theme.of(context).colorScheme.primaryContainer,
|
Theme.of(context).colorScheme.primaryContainer,
|
||||||
foregroundColor:
|
foregroundColor:
|
||||||
Theme.of(context).colorScheme.onPrimaryContainer,
|
Theme.of(context).colorScheme.onPrimaryContainer,
|
||||||
child: const Icon(Icons.qr_code_scanner_outlined),
|
child: const Icon(Icons.qr_code_scanner_outlined),
|
||||||
|
),
|
||||||
|
title: Text(L10n.of(context)!.scanQrCode),
|
||||||
|
onTap: controller.openScannerAction,
|
||||||
),
|
),
|
||||||
title: Text(L10n.of(context)!.scanQrCode),
|
|
||||||
onTap: controller.openScannerAction,
|
|
||||||
),
|
|
||||||
ListTile(
|
ListTile(
|
||||||
leading: CircleAvatar(
|
leading: CircleAvatar(
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
|
@ -234,6 +236,7 @@ class NewPrivateChatView extends StatelessWidget {
|
||||||
leading: Avatar(
|
leading: Avatar(
|
||||||
name: displayname,
|
name: displayname,
|
||||||
mxContent: contact.avatarUrl,
|
mxContent: contact.avatarUrl,
|
||||||
|
presenceUserId: contact.userId,
|
||||||
),
|
),
|
||||||
title: Text(displayname),
|
title: Text(displayname),
|
||||||
subtitle: Text(contact.userId),
|
subtitle: Text(contact.userId),
|
||||||
|
|
Loading…
Reference in a new issue